ASP.NET MVC and jqGrid 学习笔记 4-排序

排序（Sorting）分为两种：客户端排序和服务端排序

客户端排序的意思是把数据从数据库里一次性全部提取出来，然后在客户端进行排序，以后每次点击标题进行排序时，就不会给服务端传递请求了。这个“一次性”就是：

loadonce: true

是的没错！在jqgird里加入这句就是客户端排序了，因为jqgrid看到loadonce:true的时候，就会自动把datatype改成local：

datatype: "local"

虽然你设置的是json。

还要注意的是，要在jqgrid里加入sortorder,sortname参数。

加这2个参数的原因是因为我们要用到ViewModel。

为什么要用ViewModel？

因为每次jqgrid向服务端的请求都是那几个参数，每个action里都写那些参数（sidx、sord、page、rows、_search）的话就重复了，Don’t repeat yourself ！

从ViewModel开始

一、ViewModel

在解决方案资源管理器里新建一个文件夹ViewModel

添加一个JqGridViewModel.cs类文件，里面的属性就是jqgrid的参数，名称大小写要保持一致。

namespace HelloJqGrid.ViewModel
{
    public class JqGridViewModel
    {
        public string sidx { get; set; }
        public string sord { get; set; }
        public int page { get; set; }
        public int rows { get; set; }
        public bool _search { get; set; }
    }
}

二、View

@{
    ViewBag.Title = "ShowSorting";
}

<h2>ShowSorting</h2>
<script type="text/javascript">
    $(function () {
        jQuery("#grid").jqGrid({
            url: "/Home/GetSortingData",
            datatype: "json",           
            mtype:"get",
            colModel: [
                {label:'Number', name: 'No', index: 'No', width: 60, sorttype: "int" },
                {label:'Name', name: 'Name', index: 'Name', width: 90 },
                {label:'Email', name: 'Email', index: 'Email', width: 100,sortable:false},
                {label:'Created On', name: 'CreatedOn', index: 'CreatedOn', width: 100 }
            ],
            caption: "jqGrid data",
            loadonce: true,     //客户端排序：把服务端的数据都加载到页面。datatype会自动设置为local，所有的操作都在客户端完成。
            //loadonce: false,  //服务端排序：排序翻页等操作在服务端完成
            rowNum: 100,        //大于等于总记录数
            rowList:[5,10,20],  //设置分页下拉列表
            pager: "pager",
            viewrecords: true,
            width: 500, height: "auto",
            jsonReader: { repeatitems: false },
            sortorder:"asc",sortname:"No"
        });
    });
</script>

<table id="grid"></table>
<div id="pager"></div>

三、Controller

服务端的排序需要用到Dynamic Linq，这个可以通过NuGet获得：

然后引入命名空间：

客户端排序和服务端排序的action都是一样的：

//排序
        public ActionResult ShowSorting()
        {
            return View();
        }
        public ActionResult GetSortingData(JqGridViewModel grid)
        {
            MyContext db = new MyContext();
            var query = db.Members.AsQueryable();

            int pageNum  =grid.page;  //当前显示哪一页
            int pageSize =grid.rows;  //每一页显示多少条记录
            int totalRecords =query.Count();//总记录数
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);//总页数

            //排序-若出现：No property or field 'asc' exists in type 'Member'
            //解决办法：检查jqgrid里设置sortorder和sortname参数没有。
            query = query.OrderBy(grid.sidx + " " + grid.sord);

            var jsonData = new
            {
                total = totalPages,
                page = pageNum,
                records = totalRecords,
                rows = query.Skip((pageNum - 1) * pageSize).Take(pageSize)//分页
            };

            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

看一下ViewModel传来的参数：

这样用服务端排序时，点击jqgrid的标题，就可以给服务端传递参数了。

--End--