jquery esay ui 的表格控件使用

jquery esay ui 的表格控件使用

JQuery EasyUI的datagrid的使用方式总结

第一步：添加样式和js脚本在前台添加展示数据表格的table元素

     例如：

     <div>

    <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit">

    </table>

     </div>

     注：表格的属性可以在table中设置（Unobtrusive），也可以直接使用js脚本进行控制。建议使用js脚本控制

  

    

     属性的定义：

     请参见Jquery easyui API

    

第二步：在doucment.ready中初始化表格的属性以及数据获取的方式。

    例如：

     $('#tt').datagrid({

                    url: '/UserInfo/GetAllUserInfos',

                    title: '演示表格使用',

                    width: 700,

                    height: 400,

                    fitColumns: true,

                    idField: 'ID',

                    loadMsg: '正在加载用户的信息...',

                    pagination: true,

                    singleSelect: false,

                    pageSize:10,

                    pageNumber:1,

                    pageList: [10, 20, 30],

                    queryParams: {},

                    columns: [[

                              { field: 'ck', checkbox: true, align: 'left', width: 50 },

                              { field: 'ID', title: '主键', width: 80 },

                              { field: 'UserName', title: '用户名', width: 120 },

                              { field: 'SubTime', title: '提交时间', width: 80, align: 'right',

                                   formatter:function(value,row,index){

                                        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");

                                   }

                              }，

                              {field:'showprice',title:'商品价格',width:80,align:'right',

                                          styler:function(value,row,index){

                                               if (value < 20){

                                                    return 'background-color:#ffee00;color:red;';

                                               }

                                          },

                                    formatter:function(value,row,index){

                                       return "<a href='#' οnclick='editGoodsPrice("+row.goodsid+");return false;'>"+value+"</a>";

                                    }

                             }

                         ]],

                    toolbar: [{

                                   id: 'btnDownShelf',

                                   text: '上架',

                                   iconCls: 'icon-add',

                                   handler: function () {

                                        var rows = $('#goodGrid').datagrid('getSelections');

                                        if (!rows || rows.length == 0) {

                                             //alert("请选择要修改的商品！");

                                             $.messager.alert("选择商品提醒", "请选择要修改的商品!", "error");

                                             return;

                                        }

                                        $.messager.confirm("上架提醒", "您是否要真的要将此商品上架？", function (r) {

                                             if (r) {

                                                  updateGoodsNewHot(rows, "onshelf");

                                             }

                                        });

                                   }

                    }],

                    onHeaderContextMenu: function (e, field) {

                    }

     });

    

    

第三步：后台设置加载的数据：

    注意：表格Post或者get回来的请求中

     page：3 代表page为key，然后选择的当前页码为3

     rows：10 代表一页的大小为10

     后台返回的数据的格式为：{total：''，rows：[{},{}]} 

     只要包含了总数tatol字段，rows是具体的行数

     例如：

     Asp.Net MVC 例子：

         public JsonResult GetAllUserInfos()

        {

            int pageSize = 5;

            int pageIndex = 1;

            int.TryParse(this.Request["page"], out pageIndex);

            int.TryParse(this.Request["rows"], out pageSize);

            pageSize = pageSize <= 0 ? 5 : pageSize;

            pageIndex = pageIndex < 1 ? 1 : pageIndex;

            var temp = db.UserInfo

                .OrderBy(u=>u.Sort)

                .Skip<UserInfo>((pageIndex-1)*pageSize)

                .Take<UserInfo>(pageSize)

                .ToList<UserInfo>();

            Hashtable ht = new Hashtable();

            ht["total"] = db.UserInfo.Count();

            ht["rows"] = temp;

            return Json(ht);

        }

         

     Asp.Net WebForm 例子：

         public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            var strWebName = context.Request["WebName"] ?? string.Empty;

            var  GoodsNo = context.Request["GoodsNo"] ?? string.Empty;

            int categoryId = 0;

            int pageIndex = 1;

            int pageSize = 10;

            int.TryParse(context.Request["rows"], out pageSize);

            int.TryParse(context.Request["page"], out pageIndex);

            decimal priceLeft = 0;

            decimal priceRight = 1000000;

            int goodsStatus = 0;

            decimal.TryParse(context.Request["PriceLeft"], out priceLeft);

            decimal.TryParse(context.Request["PriceRight"], out priceRight);

            int.TryParse(context.Request["CategoryId"], out categoryId);

            int.TryParse(context.Request["GoodsStatus"], out goodsStatus);

            var goodsQueryParamter = new GoodsQueryParamter();

           

          

            goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus;

            var ds = goodsService.GetGoodsList(goodsQueryParamter);

            string json = string.Empty;          

            if (ds != null && ds.Tables.Count > 0)

            {

                System.Text.StringBuilder rowJson = new System.Text.StringBuilder();

                int colLen = ds.Tables[0].Columns.Count;

                DataColumnCollection col = ds.Tables[0].Columns;

                foreach (DataRow row in ds.Tables[0].Rows)

                {

                    System.Text.StringBuilder colJson = new System.Text.StringBuilder();

                    rowJson.Append("{");

                    for (int i = 0; i < colLen; i++)

                    {

                        colJson.Append("\"" + col[i].ColumnName + "\":\"" + row[i].ToString() + "\",");

                    }

                    rowJson.Append(colJson.ToString().TrimEnd(','));

                    rowJson.Append("},");

                }

                json = "{\"total\":" + ds.Tables[0].Rows[0]["sumGoods"] + ",\"rows\":[" + rowJson.ToString().TrimEnd(',') + "]}";

            }

            context.Response.Write(json);

        }