最近公司网站进行升级，项目要用.net mvc，mysql和轻量级orm框架dapper。由于美工页面出不来啊，让我先写简单写写后台的列表，同事说用MvcJqGrid，也得到了架构的同意。

可是不得不说这个相关文档真不多啊，以前用过jqgrid，但是早忘透了。其实MVCJqGrid这个东西是一个HtmlHelper扩展。不多说，先来看看这个东西吧。

文档的参考地址   http://mvcjqgrid.skaele.it/

下载地址   https://github.com/robinvanderknaap/MvcJqGrid

首先项目中应该添加MvcJqGrid引用。

view视图引用@using MvcJqGrid;

因为jqgrid相对配置麻烦，所以有了MvcJqGrid，使用起来也是简单明了：

  1. @(Html.Grid("search")                  //设置jqgrid容器，search就是其ID
  2.     .SetCaption("Toolbar Search")      //设置主标题
  3.     .AddColumn(new Column("ID")        //添加一列（对应数据集合的列名）
  4.         .SetLabel("Id"))               //设置列标题
  5.     .AddColumn(new Column("NickName"))
  6.     .AddColumn(new Column("MobilePhone")
  7.     .SetUrl("/Home/GetPagedList_User") //请求数据的地址
  8.     .SetAutoWidth(true)                //自动宽度
  9.     .SetRowNum()                     //每页条数
  10.     .SetRowList(new[] { , ,  })  //设置可选每页页数
  11.     .SetViewRecords(true)              //设置显示条数
  12.     .SetPager("pager"))                //设置分页，pager就是分页容器ID

这样一个简单的列表分页页面前台展示就出来了。

后台取数据简单的这种套路：

  1. public JsonResult GetPagedList_User( GridSettings gridSettings)
  2. {
  3.     //参数分别为排序字段，排序方式，当前页，每页条数
  4.    List<T> list=获取分页列表(gridSettings.SortColumn, gridSettings.SortOrder, gridSettings.PageIndex, gridSettings.PageSize)
  5.     if(list==null)
  6.         return Json(new{total=,page=,records=,rows=("")}, JsonRequestBehavior.AllowGet);
  7.     var jsonData = new
  8.     {
  9.         total = 获取总条数(),
  10.         page =total / gridSettings.PageSize + ;,
  11.         records = content.TotalCount,
  12.         rows = (
  13.                 from c in list
  14.                 select new
  15.                 {
  16.                     id = c.ID,
  17.                     cell = new[]
  18.             {
  19.                 c.ID.ToString(),
  20.                 c.NickName,
  21.                 c.MobilePhone,
  22.                 ......
  23.             }
  24.                 }).ToArray()
  25.     };
  26.     return Json(jsonData, JsonRequestBehavior.AllowGet);
  27. }

展示列表其实很简单，但是查询的时候遇到了麻烦。因为google很多示例都是使用EF这样的操作的，例如：

  1. if (gridSettings.IsSearch)
  2. {
  3.    name = gridSettings.Where.rules.Any(r => r.field == "Name") ?
  4.           gridSettings.Where.rules.FirstOrDefault(r => r.field == "Name").data : string.Empty;
  5.    company = gridSettings.Where.rules.Any(r => r.field == "Company") ?
  6.    gridSettings.Where.rules.FirstOrDefault(r => r.field == "Company").data : string.Empty;
  7. }
  8. CustomerRepository repository = new CustomerRepository();
  9. var customers = repository.List(name, company, gridSettings.SortColumn, gridSettings.SortOrder);

乍一看看不明觉厉啊。而当需要手写查询，或者用刀轻量级orm框架需要写sql语句时，就有些手足无措了。

索性通过浏览器f12查看网站示例的请求，发现类似这种参数filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22Last+Modified%22%2C%22op%22%3A%22bw%22%2C%22data%22%3A%2208-11-2013%22%7D%5D%7D，经解码得到{"groupOp":"AND","rules":[{"field":"Last+Modified","op":"bw","data":"08-11-2013"}]}。

后来又看其源码，其实filters就是一个过滤条件类，rules是rule类的集合就是匹配的查询条件，rule类有三个属性field，op，data，意思呢就是字段名，查询方式？，值。其实有这三个就够写sql语句了。例如“select * from user where”+ rule.filed+rule.op+rule.data。

op属性目前有14个查询方式，例如：等于，不等于，小于...包含某值，以某值结束等等。这里拼接rule.op字符串要对此查询方式进行解析。

但是这里问题出来了，没有时间范围查询。


这里我找到他的MvcJqGrid.Enums下的SearchOptions枚举，添加一个RangeDate，表示时间范围。然后在用到此枚举的地方加上。MvcJqGrid下的Column类public Column SetSearchOption方法，它是设置搜索条件的方法，我们在最后添加：

  1. /// Sets search option for column
  2. /// </summary>
  3. /// <param name="searchOption">Search option</param>
  4. public Column SetSearchOption(SearchOptions searchOption)
  5. {
  6.     switch (searchOption)
  7.     {
  8.         case SearchOptions.Equal:
  9.             _searchOption = "eq";
  10.             break;
  11.         case SearchOptions.NotEqual:
  12.             _searchOption = "ne";
  13.             break;
  14.         case SearchOptions.Less:
  15.             _searchOption = "lt";
  16.             break;
  17.         case SearchOptions.LessOrEqual:
  18.             _searchOption = "le";
  19.             break;
  20.         case SearchOptions.Greater:
  21.             _searchOption = "gt";
  22.             break;
  23.         case SearchOptions.GreaterOrEqual:
  24.             _searchOption = "ge";
  25.             break;
  26.         case SearchOptions.BeginsWith:
  27.             _searchOption = "bw";
  28.             break;
  29.         case SearchOptions.DoesNotBeginWith:
  30.             _searchOption = "bn";
  31.             break;
  32.         case SearchOptions.IsIn:
  33.             _searchOption = "in";
  34.             break;
  35.         case SearchOptions.IsNotIn:
  36.             _searchOption = "ni";
  37.             break;
  38.         case SearchOptions.EndsWith:
  39.             _searchOption = "ew";
  40.             break;
  41.         case SearchOptions.DoesNotEndWith:
  42.             _searchOption = "en";
  43.             break;
  44.         case SearchOptions.Contains:
  45.             _searchOption = "cn";
  46.             break;
  47.         case SearchOptions.DoesNotContain:
  48.             _searchOption = "nc";
  49.             break;
  50.         case SearchOptions.RangeDate://新添加的时间范围
  51.             _searchOption = "rd";
  52.             break;
  53.     }
  54.     return this;
  55. }

好了，到现在可以了解到查询方式基本有了，但是目前来说MvcJqgrid提供的日期查询js插件是DatePicker，好像没有时间查询。于是我找到了一个好用的东西—>daterangepicker.js

下载地址：https://github.com/dangrossman/bootstrap-daterangepicker

打开一看英文的展示啊，于是我用了最笨最直接的方法，直接修改它源文件。实例中需要引用moment.min.js，和主文件daterangepicker.js。前者是一个日期处理类库，直接找到_month和_weekdays关键字，对应后面字符串Jan_Feb_Mar_Apr_......修改成一月_二月_...你懂得，Sun_Mon_Tue_...改成星期日_星期一_...注意文件保存格式应为Unicode，要不有乱码。daterangepicker我也把能看懂的展示的文字改成了中文，另外精简了下它的展示方式。看起来还不错的样子：

好了，现在就是两者关联了，直接在MvcJqgrid类库中搜索DatePicker关键字，于是又在Column类中第585行找到了，代码如下：

  1. // SearchType datepicker
  2. if (_searchType == Searchtype.Datepicker)
  3. {
  4.     if (_searchDateFormat.IsNullOrWhiteSpace())
  5.         script.Append(
  6.             ", dataInit:function(el){$(el).datepicker({changeYear:true, onSelect: function() {var sgrid = $('###gridid##')[0]; sgrid.triggerToolbar();},dateFormat:'dd-mm-yy'});}");
  7.     else
  8.         script.Append(
  9.             ", dataInit:function(el){$(el).datepicker({changeYear:true, onSelect: function() {var sgrid = $('###gridid##')[0]; sgrid.triggerToolbar();},dateFormat:'" +
  10.             _searchDateFormat + "'});}");
  11. }

看不太明白，只知道有个回调函数onSelect，这里估计就是要触发Jqgrid的查询事件了，但是确定按钮(未修改前叫Apply)daterangepicker中貌似没有事件啊。只能为它添加一个：

  1. var DateRangePicker = function (element, options, cb) {
  2.     var hasOptions = typeof options == 'object';
  3.     ......
  4.     this.cb = function () { };
  5.     //添加onApplyClick回调函数，用于jqgrid获取事件
  6.     this.onApplyClick = function () { };
  7.     ......
  8.  
  9.     //event listeners(找到它，在下面添加一句)
  10.     if (typeof options.onApplyClick == 'function') {
  11.         //此处为调用确定按钮回调
  12.         this.container.find('.ranges').on('click', 'button.applyBtn', options.onApplyClick);
  13.     }
  14.     ......
  15. }

然后修改Column类下的这里部分

  1. // SearchType datepicker
  2. if (_searchType == Searchtype.Datepicker)
  3. {
  4.     if (_searchDateFormat.IsNullOrWhiteSpace())
  5.         script.Append(
  6.             ",dataInit:function(el){$(el).daterangepicker({onApplyClick:function(){var sgrid = $('###gridid##')[0]; sgrid.triggerToolbar();}});}");
  7.     else
  8.         script.Append(
  9.             ",dataInit:function(el){$(el).daterangepicker({format:'" + _searchDateFormat + "',onApplyClick:function(){var sgrid = $('###gridid##')[0]; sgrid.triggerToolbar();}});}");
  10. }

好了。准备工作完了。下面要有一个通用的模板才行。我在MvcJqgrid类库中加入了一个文件夹，名字叫MyExtend。

首先需要一个枚举来标识查询的字段是不是可以用引号的（当然我的理解很粗俗）。OptionType：

  1. /// <summary>
  2. /// 查询时候需不需要用引号
  3. /// </summary>
  4. public enum OptionType
  5. {
  6.     /// <summary>
  7.     /// 不用引号
  8.     /// </summary>
  9.     Number = ,
  10.     /// <summary>
  11.     /// 用引号
  12.     /// </summary>
  13.     String =
  14. }

其次通过前面说过的后台列表代码，我们知道其实应该有四个属性，列表List<T>，当前页PageIndex,总条数TotalCount,总页数TotalPage。于是起了个名字叫GridContent的实体类：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5.  
  6. namespace MvcJqGrid.MyExtend
  7. {
  8.     public class GridContent<T> where T : new()
  9.     {
  10.         /// <summary>
  11.         /// 查询列表  2013.11.27
  12.         /// </summary>
  13.         public List<T> GList { get; set; }
  14.         /// <summary>
  15.         /// 总条数
  16.         /// </summary>
  17.         public int TotalCount { get; set; }
  18.         /// <summary>
  19.         /// 总页数
  20.         /// </summary>
  21.         public int TotalPage { get; set; }
  22.         /// <summary>
  23.         /// 当前页
  24.         /// </summary>
  25.         public int PageIndex { get; set; }
  26.     }
  27. }

然后就是我们要提取出来一个接口，作为获取根据条件查询的数据列表和根据条件查询的总条数。起了名字叫ICanSetGrid：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5.  
  6. namespace MvcJqGrid.MyExtend
  7. {
  8.     /// <summary>
  9.     /// 设置jqgrid的接口。后台类用到要查询列表时需实现此接口 2013.11.27
  10.     /// </summary>
  11.     /// <typeparam name="T"></typeparam>
  12.     public interface ICanSetGrid<T> where T : new()
  13.     {
  14.         /// <summary>
  15.         /// 获取分页列表
  16.         /// </summary>
  17.         /// <param name="sidx">排序字段</param>
  18.         /// <param name="sort">排序方式</param>
  19.         /// <param name="page">当前页</param>
  20.         /// <param name="rows">每页条数</param>
  21.         /// <param name="where">查询条件</param>
  22.         /// <returns></returns>
  23.         List<T> GetPagedList(string sidx, string sort, int page, int rows, string where = null);
  24.         /// <summary>
  25.         /// 获取总条数
  26.         /// </summary>
  27.         /// <param name="where">查询条件</param>
  28.         /// <returns></returns>
  29.         int GetTotalCount(string where=null);
  30.     }
  31. }

最后就是主要的了，起名为JqGridHelper：

  1.  using System;
  2.  using System.Collections.Generic;
  3.  using System.Linq;
  4.  using System.Text;
  5.  using System.Text.RegularExpressions;
  6.  using System.Threading;
  7.  using System.Web.Mvc;
  8.  
  9.  namespace MvcJqGrid.MyExtend
  10.  {
  11.      /// <summary>
  12.      /// jqgrid帮助，controller用到GetGridContent方法  2013.11.27
  13.      /// </summary>
  14.      public class JqGridHelper
  15.      {
  16.  
  17.          /// <summary>
  18.          /// jqgrid匹配查询条件
  19.          /// </summary>
  20.          /// <param name="oType">字符串类型或者值类型</param>
  21.          /// <param name="searchOption">MvcJqGrid.Enums.SearchOptions对应的搜索条件字符串（搜索规则MvcJqGrid.Rule对应的op属性）</param>
  22.          /// <param name="column">搜索字段</param>
  23.          /// <param name="value">搜索值</param>
  24.          /// <returns>例如ID!=5，Phone like '%1581111222%'</returns>
  25.          private static string FormatSearchTerm(OptionType oType, string searchOption, string column, string value)
  26.          {
  27.              StringBuilder str = new StringBuilder();
  28.              switch (searchOption)
  29.              {
  30.                  case "eq"://等于
  31.                      return oType == OptionType.Number ? str.Append(column).Append("=").Append(value).ToString() : str.Append(column).Append("='").Append(value).Append("'").ToString();
  32.  
  33.                  case "ne"://不等于
  34.                      return oType == OptionType.Number ? str.Append(column).Append("<>").Append(value).ToString() : str.Append(column).Append("<>'").Append(value).Append("'").ToString();
  35.  
  36.                  case "lt"://小于
  37.                      return oType == OptionType.Number ? str.Append(column).Append("<").Append(value).ToString() : str.Append(column).Append("<'").Append(value).Append("'").ToString();
  38.  
  39.                  case "le"://小于等于
  40.                      return oType == OptionType.Number ? str.Append(column).Append("<=").Append(value).ToString() : str.Append(column).Append("<='").Append(value).Append("'").ToString();
  41.  
  42.                  case "gt"://大于
  43.                      return oType == OptionType.Number ? str.Append(column).Append(">").Append(value).ToString() : str.Append(column).Append(">'").Append(value).Append("'").ToString();
  44.  
  45.                  case "ge"://大于等于
  46.                      return oType == OptionType.Number ? str.Append(column).Append(">=").Append(value).ToString() : str.Append(column).Append(">='").Append(value).Append("'").ToString();
  47.  
  48.                  case "bw"://从某处开始查询
  49.                      return str.Append(column).Append(" like '").Append(value).Append("%'").ToString();
  50.  
  51.                  case "bn"://不从某处开始查询
  52.                      return str.Append(column).Append(" not like '").Append(value).Append("%'").ToString();
  53.  
  54.                  case "in"://包含某值
  55.                      return str.Append(column).Append(" in (").Append(value).Append(")").ToString();
  56.  
  57.                  case "ni"://不包含某值
  58.                      return str.Append(column).Append(" not in (").Append(value).Append(")").ToString();
  59.  
  60.                  case "ew"://以某值结束
  61.                      return str.Append(column).Append(" like '%").Append(value).Append("'").ToString();
  62.  
  63.                  case "en"://不以某值结束
  64.                      return str.Append(column).Append(" not like '%").Append(value).Append("'").ToString();
  65.  
  66.                  case "cn"://包含，全字匹配
  67.                      return str.Append(column).Append(" like '%").Append(value).Append("%'").ToString();
  68.  
  69.                  case "nc"://不包含
  70.                      return str.Append(column).Append(" not like '%").Append(value).Append("%'").ToString();
  71.  
  72.                  case "rd"://日期范围
  73.                      return GetRangeDateSearchTerm(column, value);
  74.  
  75.                  default://默认以某处开始
  76.                      return str.Append(column).Append(" like '").Append(value).Append("%'").ToString();
  77.              }
  78.          }
  79.          /// <summary>
  80.          /// 获取设置jqgrid的GridContent对象
  81.          /// </summary>
  82.          /// <typeparam name="T">操作的类</typeparam>
  83.          /// <param name="type">此处用到仅是获取类型，所以只传入T的一个实例就可以</param>
  84.          /// <param name="gridSettings">前台到后台的jqgrid参数</param>
  85.          /// <param name="SetGrid">实现ICanSetGrid接口的bll操作类</param>
  86.          /// <returns></returns>
  87.          public static GridContent<T> GetGridContent<T>(GridSettings gridSettings, ICanSetGrid<T> SetGrid) where T:new()
  88.          {
  89.              GridContent<T> content = new GridContent<T>();
  90.              if (gridSettings.IsSearch && gridSettings.Where != null)//有查询时候
  91.              {
  92.                  StringBuilder rulestr = new StringBuilder();
  93.                  var rules = gridSettings.Where.rules;
  94.                  for (int i = ; i < rules.Length; i++)
  95.                  {
  96.                      rulestr.Append(JqGridHelper.FormatSearchTerm(JqGridHelper.GetOptionType(new T().GetType(), rules[i].field), rules[i].op, rules[i].field, rules[i].data));
  97.  
  98.                      rulestr.Append(" and ");
  99.                  }
  100.                  rulestr.Remove(rulestr.Length - , );
  101.                  content.GList = SetGrid.GetPagedList(gridSettings.SortColumn, gridSettings.SortOrder, gridSettings.PageIndex, gridSettings.PageSize,rulestr.ToString());
  102.                  content.TotalCount = SetGrid.GetTotalCount(rulestr.ToString());
  103.              }
  104.              else//没有查询时候
  105.              {
  106.                  content.GList = SetGrid.GetPagedList(gridSettings.SortColumn, gridSettings.SortOrder, gridSettings.PageIndex, gridSettings.PageSize, null);
  107.                  content.TotalCount = SetGrid.GetTotalCount(null);
  108.              }
  109.              //如果总条数和每页数相等，那么总页数就是2页，所以判断是一页
  110.              content.TotalPage = (content.TotalCount <= gridSettings.PageSize ?  : content.TotalCount) / gridSettings.PageSize + ;
  111.              content.PageIndex = gridSettings.PageIndex;
  112.              return content;
  113.          }
  114.          /// <summary>
  115.          /// 获取类型属性
  116.          /// </summary>
  117.          /// <param name="localType">当前类类型</param>
  118.          /// <param name="columnName">属性名</param>
  119.          /// <returns></returns>
  120.          private static OptionType GetOptionType(Type localType, string columnName)
  121.          {
  122.              foreach (var item in localType.GetProperties())
  123.              {
  124.                  if (item.Name == columnName)
  125.                  {
  126.                      string typeName = item.PropertyType.Name;
  127.                      //数字返回，不需要引号
  128.                      if (typeName.Contains("Int") || typeName.Contains("Double") || typeName.Contains("Decimal") || typeName.Contains("Single"))
  129.                      {
  130.                          return OptionType.Number;
  131.                      }
  132.                      //返回需要引号类型
  133.                      return OptionType.String;
  134.                  }
  135.                  continue;
  136.              }
  137.              return OptionType.String;
  138.          }
  139.          /// <summary>
  140.          /// 日期范围条件
  141.          /// </summary>
  142.          /// <param name="column">要进行日期范围查询的字段名</param>
  143.          /// <param name="inputRange">查询值</param>
  144.          /// <returns></returns>
  145.          private static string GetRangeDateSearchTerm(string column, string inputRange)
  146.          {
  147.              Regex r = new Regex(@"(\d{8}) - (\d{8})");
  148.              if (!r.IsMatch(inputRange))
  149.                  return column + " like '" + inputRange + "'";//如果不符合范围则匹配模糊查询
  150.              Match m = r.Match(inputRange);
  151.              string start = DateTime.ParseExact(m.Groups[].Value, "yyyyMMdd", Thread.CurrentThread.CurrentCulture).ToString();
  152.              string end = DateTime.ParseExact(m.Groups[].Value, "yyyyMMdd", Thread.CurrentThread.CurrentCulture).AddSeconds().ToString();
  153.              return column + " between '" + start + "' and '" + end + "' ";
  154.          }
  155.      }
  156.  }

下面是例子，首先是相关Bll层的操作类实现ICanSetGrid<T>，两个方法对应Dao层的方法应该不难吧，这里举个栗子：

  1. /// <summary>
  2. /// 获得数据列表
  3. /// </summary>
  4. public List<UserInfo> GetEntityList(string strWhere)
  5. {
  6.     try
  7.     {
  8.         StringBuilder strSql = new StringBuilder();
  9.         strSql.Append("select *  FROM UserInfo ");
  10.         if (strWhere.Trim() != "")
  11.         {
  12.             strSql.Append(" where " + strWhere);
  13.         }
  14.         IEnumerable<UserInfo> list = null;
  15.         using (var conn = DbConnect.MysqlConnectObj())
  16.         {
  17.             list = conn.Query<UserInfo>(strSql.ToString(), null);
  18.         }
  19.         if (list != null && list.Count() > )
  20.             return list.ToList();
  21.         return null;
  22.     }
  23.     catch (Exception e)
  24.     {
  25.         throw new LDSystemException("UserInfo0x15", "系统错误", e);
  26.     }
  27. }
  28.  
  29. /// <summary>
  30. /// 分页获取查询所得到的用户列表
  31. /// </summary>
  32. /// <param name="where">查询条件，默认为1=1</param>
  33. /// <param name="sidx">排序字段</param>
  34. /// <param name="sort">升序降序</param>
  35. /// <param name="page">当前页</param>
  36. /// <param name="rows">每页条数</param>
  37. /// <returns></returns>
  38. public List<UserInfo> GetEntityPagedList(string where, string sidx, string sort, int page, int rows)
  39. {
  40.     return GetEntityList((string.IsNullOrEmpty(where) ? " 1=1 " : where) + "order by " + sidx + " " + sort + " limit " + (page - ) * rows + "," + rows);
  41. }
  42.  
  43. /// <summary>
  44. /// 获取用户数量
  45. /// </summary>
  46. /// <param name="where">条件</param>
  47. /// <returns></returns>
  48. public int GetTotalCount(string where)
  49. {
  50.     try
  51.     {
  52.         StringBuilder sb = new StringBuilder();
  53.         sb.Append("select count(1) as Count from UserInfo ");
  54.         if (!string.IsNullOrEmpty(where))
  55.         {
  56.             sb.Append(" where ");
  57.             sb.Append(where);
  58.         }
  59.         using (var conn = DbConnect.MysqlConnectObj())
  60.         {
  61.             var query = conn.Query(sb.ToString()).Single();
  62.             if (query == null)
  63.             {
  64.                 return ;
  65.             }
  66.             else
  67.             {
  68.                 return (int)query.Count;
  69.             }
  70.         }
  71.     }
  72.     catch (Exception e)
  73.     {
  74.         throw new LDSystemException("UserInfo0x25", "系统错误", e);
  75.     }
  76. }

然后是Controller中的例子了：

  1. public JsonResult GetPagedList_User( GridSettings gridSettings)
  2. {
  3.     GridContent<UserInfo> content = JqGridHelper.GetGridContent<UserInfo>(gridSettings, UserInfoBll.CreateInstance());
  4.     if(content.GList==null)
  5.         return Json(new{total=,page=,records=,rows=("")}, JsonRequestBehavior.AllowGet);
  6.     var jsonData = new
  7.     {
  8.         total = content.TotalPage,
  9.         page = content.PageIndex,
  10.         records = content.TotalCount,
  11.         rows = (
  12.                 from c in content.GList
  13.                 select new
  14.                 {
  15.                     id = c.UserID,
  16.                     cell = new[]
  17.             {
  18.                 c.UserID.ToString(),
  19.                 c.NickName,
  20.                 c.Phone,
  21.                 c.EMail,
  22.                 c.LastLoginTime.ToString("yyyy-MM-dd HH:mm"),
  23.                 c.isAct==?"激活":"未激活",
  24.             }
  25.                 }).ToArray()
  26.     };
  27.     return Json(jsonData, JsonRequestBehavior.AllowGet);
  28. }

最后来看下页面展示吧：

  1. @using MvcJqGrid;
  2. @{
  3.     ViewBag.Title = "UserList";
  4. }
  5. <link href="~/Content/jqgrid/css/jquery-ui-custom.min.css" rel="stylesheet" />
  6.     <link href="~/Content/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
  7. <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  8. <link href="~/Content/daterangepicker/css/daterangepicker-bs3.css" rel="stylesheet" />
  9.  
  10. <script src="~/Scripts/jquery-1.8.3.min.js"></script>
  11. <script src="~/Content/jqgrid/js/grid.locale-cn.js"></script>
  12.     <script src="~/Content/jqgrid/js/jquery.jqGrid.min.js"></script>
  13. <script src="~/Content/daterangepicker/js/moment.min.js"  charset="utf-8"></script>
  14. <script src="~/Content/daterangepicker/js/daterangepicker.js"></script>
  15.  
  16. <h2>用户列表</h2>
  17.  
  18.  @(Html.Grid("UserGrid")//定义容器ID
  19.     .SetCaption("用户列表")//设置标题
  20.     .AddColumn(new Column("UserID").SetLabel("ID").SetSearch(false))
  21.     .AddColumn(new Column("NickName").SetLabel("昵称").SetSearchOption(MvcJqGrid.Enums.SearchOptions.Contains))
  22.     .AddColumn(new Column("Phone").SetLabel("手机号").SetSearchOption(MvcJqGrid.Enums.SearchOptions.Contains))
  23.     .AddColumn(new Column("EMail").SetLabel("邮箱").SetSearchOption(MvcJqGrid.Enums.SearchOptions.Contains))
  24.     .AddColumn(new Column("LastLoginTime").SetLabel("最后登录时间").SetSearchType(MvcJqGrid.Enums.Searchtype.Datepicker).SetSearchOption(MvcJqGrid.Enums.SearchOptions.RangeDate))
  25.     .AddColumn(new Column("isAct").SetLabel("是否激活").SetSearchType(MvcJqGrid.Enums.Searchtype.Select).SetSearchTerms(new Dictionary<string, string>() { {"0","未激活"},{"1","激活"}}).SetSearchOption(MvcJqGrid.Enums.SearchOptions.Equal))
  26.     .SetUrl(Url.Action("GetPagedList_User", "UserInfo")).SetRowNumbers(true)//设置取数据的地址
  27.     .SetSortName("UserID")//默认排序
  28.     .SetAutoWidth(true)
  29.     .SetHeight(450)
  30.     .SetRowNum(10)//设置每页条数
  31.     .SetRowList(new[] { 10, 15, 20 })//可选择每页条数
  32.     .SetViewRecords(true)//显示条数
  33.     .SetSearchToolbar(true).SetSearchOnEnter(true)//设置可以搜索
  34.     .SetPager("pager")//设置分页
  35.     .SetLoadText("请等待")
  36.     .SetMultiSelect(true)
  37.     .SetToolbar(true).SetToolbarPosition(MvcJqGrid.Enums.ToolbarPosition.Bottom)
  38.     )

好了，大概就是这么个样子。数据库拼接字符串查询确实不太好，我再看看别的方法。

另外bootstrap是个好东西啊，建议大家看看。

使用MVCJqGrid的心得的更多相关文章

  1. 使用MVCJqGrid

    使用MVCJqGrid的心得   最近公司网站进行升级,项目要用.net mvc,mysql和轻量级orm框架dapper.由于美工页面出不来啊,让我先写简单写写后台的列表,同事说用MvcJqGrid ...

  2. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  3. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  4. 我的MYSQL学习心得（二） 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  5. 我的MYSQL学习心得（三） 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  6. 我的MYSQL学习心得（四） 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  7. 我的MYSQL学习心得（五） 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  8. 我的MYSQL学习心得（六） 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  9. 我的MYSQL学习心得（七） 查询

    我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

随机推荐

  1. BNUOJ-29357 Bread Sorting 模拟

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29357 直接模拟就可以了.. //STATUS:C++_AC_190MS_1884KB # ...

  2. cache 的简单认识与思考

    之前对NOSQL的总结是:基本功能是key-value, 然后各自附加特殊功能. 现在简单的来认识一下cache. 背景 大家都知道NoSQL, 大多数都是 key-value 型的数据库.有些内存型 ...

  3. Hadoop概念学习系列之分布式文件系统（三十）

    ===============> 数据量越来越多,在一个操作系统管辖的范围存下不了,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,因此迫切需要一种系统来管理多台机器上的文件,这就 ...

  4. VisualStudio2010中创建ASP.Net WebService

    相关资料:http://blog.csdn.net/yapingxin/article/details/7331375 具体操作:1.打开“Microsoft Visual Studio 2010”- ...

  5. 转载 在.net中使用GAC

    转载出处 https://blog.log4d.com/2011/01/gac/ GAC GAC是什么?是用来干嘛的?GAC的全称叫做全局程序集缓存,通俗的理解就是存放各种.net平台下面需要使用的d ...

  6. 有如下Student 对象，  private String name;       private int age;       private int score;   private String classNum;  其中，classNum

    package homework003; import java.util.ArrayList; import java.util.List; public class Text { public s ...

  7. ECSHOP在线手册之模板结构说明 (适用版本v2.7.3)

    名称 类型 备注(作用或意义) 文件(目录)名可否更改 images 目录 存放模板图片目录 不可更改 library 目录 存放模板库文件目录 不可更改 screenshot.png 图片 用于“后 ...

  8. iOS 键盘框架IQKeyboardManager使用

    框架地址:https://github.com/hackiftekhar/IQKeyboardManager AppDelegate.m文件中   #import <IQKeyboardMana ...

  9. 【转】Netty那点事（四）Netty与Reactor模式

    [原文]https://github.com/code4craft/netty-learning/blob/master/posts/ch4-reactor.md 一:Netty.NIO.多线程? 时 ...

  10. Centos中安装vim

    Centos, 默认没有安装VIM, 所以要当然要安装了, 直接yum install vim是不行的, 首先: yum install vim* 会看到vim-enhanced这个包,没错, 我们要 ...