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--