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
一、在页面中添加标签
1 @*这是datagrid标签展示的地方，其中iconcls表示datagrid中左上角展示的图标*@
2 <table >
3 </table>
4 @*如果需要弹出层，请参照下边的代码，并在js中做相应的设置*@
5 <div
6 data-options="
7 iconCls: 'icon-add',
8 buttons: [{
9 text:'确定',
10 iconCls:'icon-ok',
11 handler:function(){
12 //点击'确定'按钮触发的事件
13 UpdateData();
14 }
15 },{
16 text:'取消',
17 handler:function(){
18 alert('cancel');;
19 }
20 }]
21 ">
22 <div class="aaa">
23 <span>主键id:</span><input type="text" />
24 </div>
25 </div>二、在js中添加方法，如下所示：
1 <script type="text/javascript">
2 $(function () {
3 loadData();
4 });
5
6 function loadData() {
7 $('#dg').datagrid({
8 url: '/Financial/GetLoanDataInfo',//请求方法的地址
9 title: '信息管理',
10 width: 900,
11 height: 400,
12 fitColumns: true, //列自适应
13 nowrap: false,//禁止文字自动换行
14 idField: 'CID',//主键列的列明
15 loadMsg: '正在加载信息...',//当数据没有加载出来时显示的文字
16 pagination: true,//是否有分页
17 singleSelect: true,//是否单行选择
18 pagePosition: 'bottom',//分页符在底部,可选参数为top，bottom，both
19 pageSize: 15,//页大小，一页多少条数据
20 pageNumber: 1,//默认当前的页码
21 pageList: [15, 30, 50],//一页可显示数据的条目
22 queryParams: {},//往后台传递参数，json格式
23 columns: [[
24 //field表示绑定的字段名，如不绑定就随便写一个；
25 //checkbox: true表示这一列是checkbox
26 //hidden: true表示隐藏这一列
27 //sortable: true表示单击这一列可以排(升/降)序，这样请求数据时会向后台多传输两个参数
28 { field: 'ck', checkbox: true, align: 'left', width: 50 },
29 { field: 'CID', title: '1', width: 80, align: 'center', hidden: true },
30 { field: 'CMoney', title: '2', width: 80, align: 'center', sortable: true },
31 {
32 field: 'CAge', title: '3', width: 80, align: 'center',
33 //这里表示对显示的信息做处理。value表示原本的值，在方法中对value进行逻辑判断并返回处理后的标签样式
34 formatter: function (value, row, index) {
35 //在该函数中，对文本大小判断，如果大于18，显示为红色的字
36 if (value > 18) {
37 return '<span >' + value + '</span>';
38 } else {
39 return value;
40 }
41 }
42 },
43 {
44 field: 'CTitle', title: '7', width: 80, align: 'center',
45 formatter: function (value, row, index) {
46 //在该函数中，把这一列变为一个a标签。设置class和自定义数据。为下边做准备
47 return "<a href='javascript:void(0);' data- + row.CID + "' class='detailLink'>" + value + "</a>";
48 }
49 }
50 ]],
51 //绑定数据成功后执行这个方法
52 onLoadSuccess: function () {
53 //先把弹出框关闭
54 $('#dlg').dialog('close');
55 //添加最后一列的单击事件
56 $('.detailLink').click(function () {
57 //获取自定义数据
58 var id = $(this).data('id');
59 //为弹出的层中的标签赋值
60 $('.aaa input').attr('value', id);
61 //弹出层
62 $('#dlg').dialog('open');
63 });
64 }
65 });
66 }
67 function UpdateData() {
68 //点击弹出层的确定按钮触发的事件——刷新datagrid
69 $('#dg').datagrid('reload');
70 };
71 </script>三、后端得到datagrid传过去的参数，并返回数据
1 //在本系统中，datagrid请求的方法需要是Action类型的方法
2 public ActionResult GetLoanDataInfo()
3 {
4 int pageIndex;
5 int pageSize;
6 string sortName = string.Empty;
7 string order = string.Empty;
8 //page是datagrid内部实现的，传过来的参数名。表示第几页
9 if (!int.TryParse(Request.Form["page"], out pageIndex))
10 {
11 pageIndex = 1;
12 }
13 //rows表示这一页显示多少条数据
14 if (!int.TryParse(Request.Form["rows"], out pageSize))
15 {
16 pageSize = 5;
17 }
18 //sort表示根据那一列排序;order表示升序或者降序,有两个值：asc、desc
19 if (!string.IsNullOrEmpty(Request.Form["sort"]))
20 {
21 sortName = Request.Form["sort"];
22 order = Request.Form["order"];
23 }
24 //这一块是从后台请求数据,把上边的参数传进去（本例是模拟的，没有传参数进方法，应该在方法中同时把总数据的条目数out出来）
25 List<TLoan> list = _DataHelper.GetData();
26 int totalCount = list.Count();
27 list = list.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
28 //把需要传给前台的数据，分拣出来，赋给rows,这样可以把不需要的数据过滤掉，如果不用过滤数据，可以省略下边一行代码
29 var rows = from l in list
30 select new { CID = l.CID, CMoney= l.CMoney, CAge= l.CAge, CTitle= l.CTitle };
31
32 //rows = rows, total = totalCount；等号之前的名字是不可变的，因为是easy ui规定的。
33 //JsonRequestBehavior.AllowGet表示该方法可以被get方式请求，否则get方式请求得不到数据
34 return Json(new { rows = rows, total = totalCount }, JsonRequestBehavior.AllowGet);
35 }