ASP.NET MVC 3程序(一): 如何绑定JQuery插件JQgrid

今天试用了一些JQuery的插件JQgrid，此插件能非常快捷的帮助我们建立一个CRUD功能的表单，并且具有分页，排序等一些基本功能，非常好用。

这里是JQgrid的下载地址：

http://www.trirand.com/blog/

Demo示例：

http://www.trirand.com/blog/jqgrid/jqgrid.html

下面看下实施步骤：

首先下载好JQgrid的类库之后，在Layout.cshtml中引用他，那么之后我们就不需要在每一个view中都去引用相同的类库了。这里我引用了这几个文件来帮助我们开发:

    <link href="../../Scripts/JQgrid/jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />    <link href="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />    <script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>    <script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>

接下来我们可以开始在你需要的view文件中书写以下代码，当然你可以根据喜好来配置它的属性，JQgrid的属性非常之多，在上面的Demo示例中你可以找多更多的属性和事件。

<script type="text/javascript">    jQuery(document).ready(function () {        jQuery("#list").jqGrid({            url: '/UserView/UserMaintenance', //---necessary            datatype: 'json',  //---necessary            mtype: "GET", //---necessary              //datatype: 'local', //----add            //data: mydata, // ---add            colNames: ['Name', 'ID', 'Active', 'Customer Group'], //----edit            colModel: [       { name: 'Name', index: 'Name', width: 500, sortable: false },       { name: 'CP_CSTMR_ID', index: 'CP_CSTMR_ID', width: 100 },       { name: 'Active', index: 'Active', width: 100, sortable: false },       { name: 'Customer Group', index: 'Customer Group', width: 100, sortable: false} //----edit                          ],            pager: '#pager',            rowNum: 10,            sortname: 'CP_CSTMR_ID',            sortable: true,            sortorder: 'asc',            rowList: [10, 15, 20],            viewrecords: true,            caption: 'User Maintenance list',            height: 230,            loadtext: 'Loading Data please wait ...',            postData:            {                name: function () { return jQuery("#name").val(); },                active: function () { return jQuery("#active option:selected").val(); }            },            onSortCol: function (index, colindex, sortorder) {            }            //            gridComplete: function()            //            {            //                $(window).resize(function(){             //                var winwidth=$(window).width()*0.5;             //                $("#list").setGridWidth(winwidth);            //                })            //            }        });        jQuery("#list")        .jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false }, {}, {}, {}, { multipleSearch: false })        .navButtonAdd('#pager', {            caption: "Search",            buttonicon: "ui-icon-search",            onClickButton: function () {                           },            position: "last",            id:"searchButton"        })        .navButtonAdd('#pager', {                    caption: "View Detail",                    buttonicon: "ui-icon-detail",                    id: "viewdetails",                    onClickButton: function () {                        test();                    },                    position: "last"                })        //jQuery("#list").jqGrid('filterToolbar', options);      });</Script>

 

这里我们简单介绍以下，url指的是数据源对应的Action，也就是说JQgrid将从这个Action中获取数据，并且指定需要Json数据。ColName和ColMode是你需要显示的列名及数据的表现类型。SortName为排序字段，rowList为分页显示的每页的个数选择，另外我们这里没有使用它自带的增删改查功能，如果你需要使用它们，将代码中的del:false, add:false, edit:false, search:false 设置为True即可。

另外下面的navButtonAdd是我们添加的两个自定义按钮，分别实现了自定义的查看item和search功能。你也可以添加更多按钮实现自己想要的功能。

下面可以看看在后台的Action代码如何返回我们需要的数据（可以通过你需要的方式来得到例如Linq to sql，entity framework等等，这里我们使用linq作为示例），首先我们需要看看绑定JQgrid数据的这个Action需要接收什么样的参数：

        public ActionResult UserMaintenance(string sidx, string sord, int page, int rows)

sidx为排序字段名（这里为ID），sord为排序方式（asc，desc），page为页数，rows为每页大小（page_size）
了解参数的意义之后我们可以根据他们来编写代码，以返回合适的数据。

            STRDataContext context = new STRDataContext();            int pageIndex = Convert.ToInt32(page) - 1;            int pageSize = rows;            int? totalRecord = context. Customer.Count();            int totalPages = (int)Math.Ceiling((float)totalRecord / (float)pageSize);            var union = from c in context.Customer                        join p in context.Group                        on c.GroupID equals p.GroupID                        select new                        {                            c.Name,                            c.ID,                            c.Active,                            p.GroupName,                        };            var results = from entity in union.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize)                          select entity;            var jsonData = new            {                total = totalPages,                page = page,                records = totalRecord,                rows = (from item in results                        select new                        {                            id = item.ID.ToString(),                            cell = new string[] {                                item.Name.ToString(),                                item.ID.ToString(),                                item.Active.ToString(),                                item.GroupName.ToString(),                                                    }                        }).ToArray()            };            return Json(jsonData, JsonRequestBehavior.AllowGet);

这里context是linq to sql生成的context，另一个值得注意的地方是OrderBy（）方法，由于默认的linq orderby方法里面不接受string类型的参数，你可以写lamba表达式来做到这一点，例如 OrderBy(x => x.ID), 但是这样就不能根据输入参数来动态生成linq表达式了，由于不同的排序字段名你需要写多条linq表达式，而这里我们可以以这种方式写的的原因是通过Dynamic Linq来做到的，大家可以看看这里的资源：

http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx

推荐大家使用，很方便。