JQuery EasyUI的datagrid的使用方式总结

本是古典何须时尚 2022-05-22 08:52 234阅读 0赞

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

注：表格的属性可以在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);
            }