EasyUI 筆記（2）datagrid 使用

1.js

 $(function () {


            $("#dg").datagrid({
                rownumbers: true,//顯示行號
                pagination: true, //顯示分頁
                fitColumns: false,
                //fit: true,
                striped: true,//行漸變
                pageSize: 20,//頁大小
                pageList: [20, 50, 80, 100, 150],
                loadMsg: '資料載入中...',
                method: 'get',
                toolbar: '#tb',//設定工具條
                idField: 'RN', //主鍵Id 該值不能為重複值。否則有些操作無法實現
                url: 'YBZDFWXZPage.aspx?action=query&Random=' + Math.random(), //從遠端站點請求資料的 URL。引數中加入隨機數防止頁面不重新整理
                columns: [[


                    { field: 'GLCZName', title: '站名', width: 150 },
                     {
                         field: 'CKS', title: '起點', width: 50,
                         formatter: function (val, rec) {
                             if (val == "1") {
                                 return " <input type=\"checkbox\"  id=\"CKS\"  value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\"  checked=\"checked\" />";
                             }
                             else {
                                 return " <input type=\"checkbox\"  id=\"CKS\"  value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" />";
                             }


                         }
                     },
                    {
                        field: 'CKE', title: '終點', width: 50,
                        formatter: function (val, rec) {
                            if (val == "1") {
                                return " <input type=\"checkbox\" id=\"CKE\"  value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" checked=\"checked\" />";
                            }
                            else {
                                return " <input type=\"checkbox\"  id=\"CKE\"  value=\"" + rec.GLCZ + "\" name=\"" + rec.DDSK + "\" />";
                            }
                        }
                    },


                ]]
            });
            // 載入水庫
            LoadSK();


        });

另：CKS  CKE 兩列加入了checkbox

2.頁面  如上述js所示  以 id為tb的div作為 datagrid的工具條

<table id="dg" style="width: auto; height: 500px;"></table>
        <div id="tb" style="padding: 5px; height: auto; height: 50px">
            <table style="float: left; margin-left: 20px">
                <tr>
                    <td style="width: 80px; margin-left: 5px">排程水庫</td>
                    <td style="width: 150px;">
                        <select id="sk" onchange="changeSK()"></select>
                    </td>
                    <td>釋出時間：<input type="text" id="StartTime" class="easyui-datebox" style="width: 150px;" /></td>
                    <td><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Select()">查詢</a></td>
                    <td>
                        <a href="#" onclick="SaveZDData()" class="easyui-linkbutton" data-options="iconCls:'icon-save'">儲存</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="Add()">新增</a></td>
                </tr>


            </table>
        </div>

3.重新整理資料

// js方法

 var checkText = $("#sk").find("option:selected").text(); //獲取Select選擇的Text 
            var checkValue = $("#sk").val(); //獲取Select選擇的Value 
            $("#dg").datagrid({ url: 'YBZDFWXZPage.aspx?action=query&stime=' + $("#StartTime").datebox("getValue") + '&skstcd=' + checkValue + '&Random=' + Math.random() });

// 後臺程式碼

 #region 根據所選水庫和釋出時間取得相應資料
        /// <summary>
        /// 根據所選水庫和釋出時間取得相應資料
        /// </summary>
        private void Select()
        {
            string stime = Request.QueryString["stime"];
            if (!string.IsNullOrEmpty(stime))
            {
                DateTime dt = DateTime.Now;
                if (DateTime.TryParse(stime, out dt))
                {
                    stime = dt.ToString("yyyy-MM-dd");
                }
                else
                { stime = ""; }
            }
            string skstcd = Request.QueryString["skstcd"];


            int pageIndex = 1; int pageSize = 20;
            string page = Request.QueryString["page"];
            string rows = Request.QueryString["rows"];
            if (!string.IsNullOrEmpty(page)) pageIndex = Convert.ToInt32(page);
            if (!string.IsNullOrEmpty(rows)) pageSize = Convert.ToInt32(rows);
            int pageCount = 0;
            YBZDModule info = new YBZDModule();
            //YBDataInfo info = new YBDataInfo();
            info.StartTime = stime;
            info.DDSK = skstcd;
            List<YBZDModule> lstYBZD = new List<YBZDModule>();
            lstYBZD = _BLL.Select(info, pageIndex, pageSize, out pageCount);




            StringBuilder sbjson = new StringBuilder();
            sbjson.Append("{\"rows\":");
            string jsonResult = JsonConvert.SerializeObject(lstYBZD);
            sbjson.Append(jsonResult);
            sbjson.Append(",\"total\":" + pageCount + "}");
            Response.Write(sbjson);
            Response.End();
        }
        #endregion

使用Newtonsoft.Json.dll將實體封裝為json字串