JQuery EasyUI中datagrid的使用

在学习过程中，可以参照JQuery EasyUI的官方网站学习。地址：http://www.jeasyui.com/demo/main/index.php

在学习JQuery EasyUI中的DataGrid标签时，可以参照http://www.jeasyui.com/documentation/datagrid.php进行学习。

本文主要讲解DataGrid标签的使用，怎么设置参数，怎么向后台请求数据等。

在使用过程中，我使用的是1.4版本，存在一个问题，当请求数据为0行时，会重新请求一次。

这一个问题，园中兄弟帮我解决了，地址是：http://www.cnblogs.com/Reaver/p/4056770.html，感谢flyreaver

一、在页面中添加标签

     @*这是datagrid标签展示的地方，其中iconcls表示datagrid中左上角展示的图标*@
     <table id="dg" iconcls="icon-edit">
     </table>
     @*如果需要弹出层，请参照下边的代码，并在js中做相应的设置*@
     <div id="dlg" class="easyui-dialog" title="弹出框标题" style="width: 400px; height: 200px; padding: 10px"
         data-options="
                     iconCls: 'icon-add',
                     buttons: [{
                         text:'确定',
                         iconCls:'icon-ok',
                         handler:function(){
                             //点击'确定'按钮触发的事件
                             UpdateData();
                         }
                     },{
                         text:'取消',
                         handler:function(){
                             alert('cancel');;
                         }
                     }]
                 ">
         <div class="aaa">
             <span>主键id:</span><input type="text" />
         </div>
     </div>

二、在js中添加方法，如下所示：

     <script type="text/javascript">
         $(function () {
             loadData();
         });

         function loadData() {
             $('#dg').datagrid({
                 url: '/Financial/GetLoanDataInfo',//请求方法的地址
                 title: '信息管理',
                 width: 900,
                 height: 400,
                 fitColumns: true, //列自适应
                 nowrap: false,//禁止文字自动换行
                 idField: 'CID',//主键列的列明
                 loadMsg: '正在加载信息...',//当数据没有加载出来时显示的文字
                 pagination: true,//是否有分页
                 singleSelect: true,//是否单行选择
                 pagePosition: 'bottom',//分页符在底部,可选参数为top，bottom，both
                 pageSize: 15,//页大小，一页多少条数据
                 pageNumber: 1,//默认当前的页码
                 pageList: [15, 30, 50],//一页可显示数据的条目
                 queryParams: {},//往后台传递参数，json格式
                 columns: [[
                     //field表示绑定的字段名，如不绑定就随便写一个；
                     //checkbox: true表示这一列是checkbox
                     //hidden: true表示隐藏这一列
                     //sortable: true表示单击这一列可以排(升/降)序，这样请求数据时会向后台多传输两个参数
                     { field: 'ck', checkbox: true, align: 'left', width: 50 },
                     { field: 'CID', title: '1', width: 80, align: 'center', hidden: true },
                     { field: 'CMoney', title: '2', width: 80, align: 'center', sortable: true },
                     {
                         field: 'CAge', title: '3', width: 80, align: 'center',
                         //这里表示对显示的信息做处理。value表示原本的值，在方法中对value进行逻辑判断并返回处理后的标签样式
                         formatter: function (value, row, index) {
                             //在该函数中，对文本大小判断，如果大于18，显示为红色的字
                             if (value > 18) {
                                 return '<span style="color:red;">' + value + '</span>';
                             } else {
                                 return value;
                             }
                         }
                     },
                     {
                         field: 'CTitle', title: '7', width: 80, align: 'center',
                         formatter: function (value, row, index) {
                             //在该函数中，把这一列变为一个a标签。设置class和自定义数据。为下边做准备
                             return "<a href='javascript:void(0);' data-id='" + row.CID + "' class='detailLink'>" + value + "</a>";
                         }
                     }
                 ]],
                 //绑定数据成功后执行这个方法
                 onLoadSuccess: function () {
                     //先把弹出框关闭
                     $('#dlg').dialog('close');
                     //添加最后一列的单击事件
                     $('.detailLink').click(function () {
                         //获取自定义数据
                         var id = $(this).data('id');
                         //为弹出的层中的标签赋值
                         $('.aaa input').attr('value', id);
                         //弹出层
                         $('#dlg').dialog('open');
                     });
                 }
             });
         }
         function UpdateData() {
             //点击弹出层的确定按钮触发的事件——刷新datagrid
             $('#dg').datagrid('reload');
         };
     </script>

三、后端得到datagrid传过去的参数，并返回数据

     //在本系统中，datagrid请求的方法需要是Action类型的方法
     public ActionResult GetLoanDataInfo()
     {
         int pageIndex;
         int pageSize;
         string sortName = string.Empty;
         string order = string.Empty;
         //page是datagrid内部实现的，传过来的参数名。表示第几页
         if (!int.TryParse(Request.Form["page"], out pageIndex))
         {
             pageIndex = ;
         }
         //rows表示这一页显示多少条数据
         if (!int.TryParse(Request.Form["rows"], out pageSize))
         {
             pageSize = ;
         }
         //sort表示根据那一列排序;order表示升序或者降序,有两个值：asc、desc
         if (!string.IsNullOrEmpty(Request.Form["sort"]))
         {
             sortName = Request.Form["sort"];
             order = Request.Form["order"];
         }
         //这一块是从后台请求数据,把上边的参数传进去（本例是模拟的，没有传参数进方法，应该在方法中同时把总数据的条目数out出来）
         List<TLoan> list = _DataHelper.GetData();
         int totalCount = list.Count();
         list = list.Skip((pageIndex - ) * pageSize).Take(pageSize).ToList();
         //把需要传给前台的数据，分拣出来，赋给rows,这样可以把不需要的数据过滤掉，如果不用过滤数据，可以省略下边一行代码
         var rows = from l in list
                    select new { CID = l.CID, CMoney= l.CMoney, CAge= l.CAge, CTitle= l.CTitle };
31
         //rows = rows, total = totalCount；等号之前的名字是不可变的，因为是easy ui规定的。
         //JsonRequestBehavior.AllowGet表示该方法可以被get方式请求，否则get方式请求得不到数据
         return Json(new { rows = rows, total = totalCount }, JsonRequestBehavior.AllowGet);
     }