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=" 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: '信息管理',
                 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',  50 },
                    { field: 'CID', title: '1',  80, align: 'center', hidden: true },
                    { field: 'CMoney', title: '2',  80, align: 'center', sortable: true },
                    {
                        field: 'CAge', title: '3',  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',  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 = 1;
        }
        //rows表示这一页显示多少条数据
        if (!int.TryParse(Request.Form["rows"], out pageSize))
        {
            pageSize = 5;
        }
        //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 - 1) * 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);
    }