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 = 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);
    }