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