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

}