使用MVCJqGrid

使用MVCJqGrid的心得

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

可是不得不说这个相关文档真不多啊，以前用过jqgrid，但是早忘透了 View Code
好了，到现在可以了解到查询方式基本有了，但是目前来说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我也把能看懂的展示的文字改成了中文，另外精简了下它的展示方式。看起来还不错的样子：

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

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

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

View Code

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

View Code
然后是Controller中的例子了：

public JsonResult GetPagedList_User( GridSettings gridSettings)
{
GridContent<UserInfo> content = JqGridHelper.GetGridContent<UserInfo>(gridSettings, UserInfoBll.CreateInstance());
if(content.GList==null)
return Json(new{total=0,page=0,records=0,rows=("")}, JsonRequestBehavior.AllowGet);
var jsonData = new
{
total = content.TotalPage,
page = content.PageIndex,
records = content.TotalCount,
rows = (
from c in content.GList
select new
{
id = c.UserID,
cell = new[]
{
c.UserID.ToString(),
c.NickName,
c.Phone,
c.EMail,
c.LastLoginTime.ToString("yyyy-MM-dd HH:mm"),
c.isAct==1?"激活":"未激活",
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}

最后来看下页面展示吧：

@using MvcJqGrid;
@{
ViewBag.Title = "UserList";
}
<link href="~/Content/jqgrid/css/jquery-ui-custom.min.css" rel="stylesheet" />
<link href="~/Content/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/daterangepicker/css/daterangepicker-bs3.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Content/jqgrid/js/grid.locale-cn.js"></script>
<script src="~/Content/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="~/Content/daterangepicker/js/moment.min.js"  charset="utf-8"></script>
<script src="~/Content/daterangepicker/js/daterangepicker.js"></script>

<h2>用户列表</h2>

@(Html.Grid("UserGrid")//定义容器ID
.SetCaption("用户列表")//设置标题
.AddColumn(new Column("UserID").SetLabel("ID").SetSearch(false))
.AddColumn(new Column("NickName").SetLabel("昵称").SetSearchOption(MvcJqGrid.Enums.SearchOptions.Contains))
.AddColumn(new Column("Phone").SetLabel("手机号").SetSearchOption(MvcJqGrid.Enums.SearchOptions.Contains))
.AddColumn(new Column("EMail").SetLabel("邮箱").SetSearchOption(MvcJqGrid.Enums.SearchOptions.Contains))
.AddColumn(new Column("LastLoginTime").SetLabel("最后登录时间").SetSearchType(MvcJqGrid.Enums.Searchtype.Datepicker).SetSearchOption(MvcJqGrid.Enums.SearchOptions.RangeDate))
.AddColumn(new Column("isAct").SetLabel("是否激活").SetSearchType(MvcJqGrid.Enums.Searchtype.Select).SetSearchTerms(new Dictionary<string, string>() { {"0","未激活"},{"1","激活"}}).SetSearchOption(MvcJqGrid.Enums.SearchOptions.Equal))
.SetUrl(Url.Action("GetPagedList_User", "UserInfo")).SetRowNumbers(true)//设置取数据的地址
.SetSortName("UserID")//默认排序
.SetAutoWidth(true)
.SetHeight(450)
.SetRowNum(10)//设置每页条数
.SetRowList(new[] { 10, 15, 20 })//可选择每页条数
.SetViewRecords(true)//显示条数
.SetSearchToolbar(true).SetSearchOnEnter(true)//设置可以搜索
.SetPager("pager")//设置分页
.SetLoadText("请等待")
.SetMultiSelect(true)
.SetToolbar(true).SetToolbarPosition(MvcJqGrid.Enums.ToolbarPosition.Bottom)
)

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

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