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 id="dg" iconcls="icon-edit">

 3     </table>

 4     @*如果需要弹出层，请参照下边的代码，并在js中做相应的设置*@

 5     <div id="dlg" class="easyui-dialog" title="弹出框标题" style="width: 400px; height: 200px; padding: 10px"

 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 style="color:red;">' + 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-id='" + 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     }