JQueryEasyUI datagrid框架的基本使用方法
今天说说这个datagrid框架的基本使用，这个框架一直以来都是大家比较头疼的框架，尤其是json数据的拼接，后台前台都很重要，使用这个框架，最重要的是仔细：
无需废话，上代码了：
. 代码如下:
<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<!--easyui最全的样式包也可单独引用你想使用的样式包-->
<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
<!--easyui自带图片样式包，也可自行添加-->
<script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--我使用的是easyui 1.3.2，基于jquery-1.8.0-->
<script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<!--easyui的js包-->
<script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_cn.js" type="text/javascript"></script>
<!--easyui的中文语言包，默认是英文-->
</head>
<body id="layoutbody" class="easyui-layout">
<p data-options="region:'north',title:'north title',split:true" style="height: 100px;">
</p>
<p data-options="region:'south',title:'south title',split:true" style="height: 100px;">
</p>
<p data-options="region:'east',iconcls:'icon-reload',title:'east',split:true" style="width: 100px;">
</p>
<p data-options="region:'west',title:'west',split:true" style="width: 100px;">
</p>
<p data-options="region:'center',title:'center title'" href="htmlpage.htm" style="padding: 5px;
background: #eee; overflow: hidden;"><!--这里指向了一个htm页-->
</p>
</body>
</html>
htmlpage.htm代码：
. 代码如下:
<script type="text/javascript" charst="utf-8">
//因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可
//有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架
$(function () {
$("#dg").datagrid({
url: "getjson.ashx", //指向一个一般处理程序或者一个控制器，返回数据要求是json格式，直接赋值json格式数据也可，我以demo中自带的json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项
title: "数据展示表格",
iconcls: "icon-add",
fitcolumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
//toolbar设置表格顶部的工具栏，以数组形式设置
idfield: 'id', //标识列，一般设为id，可能会区分大小写，大家注意一下
loadmsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
pagination: true, //显示最下端的分页工具栏
rownumbers: true, //显示行数 1，2，3，4...
pagesize: 10, //读取分页条数，即向后台读取数据时传过去的值
pagelist: [10, 20, 30], //可以调整每页显示的数据，即调整pagesize每次向后台请求数据时的数据
//由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的api
sortname: "name", //初始化表格时依据的排序 字段 必须和中的字段名称相同
sortorder: "asc", //正序
columns: [[
{ field: 'code', title: 'code', width: 100 },
{ field: 'name', title: 'name', width: 100 ,sortable:true},//sortable:true点击该列的时候可以改变升降序
{ field: 'addr', title: 'addr', width: 100,
//这里可以添加这样一个方法，使其显示数据得到改变
// formatter: function (value, row, index) {
// if (value == "0") {
// return "普通角色";
// } else {
// return "特殊角色";
// }
// }
}
]]//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demo
});
});
</script>
<p id="tt" class="easyui-tabs" style="width: 500px; height: 250px;" fit="true"
border="false">
<p title="tab1" style="padding: 20px;" border="false">
<table id="dg">
</table>
</p>
</p>
json格式数据一定要是双引号的，单引号无法显示数据哦；
数据格式如下：
. 代码如下:
{
"total":239,
"rows":[
{"code":"001","name":"name 1","addr":"address 11","col4":"col4 data"},
{"code":"002","name":"name 2","addr":"address 13","col4":"col4 data"},
{"code":"003","name":"name 3","addr":"address 87","col4":"col4 data"},
{"code":"004","name":"name 4","addr":"address 63","col4":"col4 data"},
{"code":"005","name":"name 5","addr":"address 45","col4":"col4 data"},
{"code":"006","name":"name 6","addr":"address 16","col4":"col4 data"},
{"code":"007","name":"name 7","addr":"address 27","col4":"col4 data"},
{"code":"008","name":"name 8","addr":"address 81","col4":"col4 data"},
{"code":"009","name":"name 9","addr":"address 69","col4":"col4 data"},
{"code":"010","name":"name 10","addr":"address 78","col4":"col4 data"}
]
}
这里呢，后台传递数据很重要：
注意：表格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);
}
asp.net中有一个类也可以序列化json格式数据；