欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQueryEasyUI datagrid框架的基本使用方法

程序员文章站 2022-05-11 14:29:20
今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细: 无需废话,上代码了: . 代码如下:...

今天说说这个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>

JQueryEasyUI datagrid框架的基本使用方法

这是前台请求数据时发送的数据;

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格式数据;