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字符串