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