EasyUI DataGrid和Pagination

连接一台EasyUI项目驱动学习

DataGrid数据表格及Pagination分页一起介绍

一、通过<table>标记创建DataGrid,嵌套<th>标签定义列表

<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'username',width:100">
名称
</th>
<th data-options="field:'orgname',width:100">
组织机构
</th>
<th data-options="field:'state',width:100">
状态
</th>
<th data-options="field:'loginname',width:100">
登录名
</th>
<th data-options="field:'ctime',width:100">
创建时间
</th>
</tr>
</thead>
</table>
<!-- 分页栏 -->
<div id="dom_var_pagination" class="easyui-pagination"></div>

二、载入数据表格

$("#dg").datagrid( {
url : 'getUserAction.action',
closable : true,
checkOnSelect : true,
striped : true,
rownumbers : true,
'toolbar' : '',
fitColumns : true,
loadFilter : function(data) {
var data_ = {
"rows" : data.resultList,  //行数据
"total" : data.totalSize   //总记录数
}
$("#dom_var_pagination").pagination( {
total : data.totalSize
});
return data_;
}
});

data.resultList 为后台返回的JSON格式的数据

如：[{id=1,loginname=zhangsan,username=zhangsan,state=可用, ctime=2014-01-01}]

再此后台代码就不再叙述,须要的话 可下载演示代码：http://download.csdn.net/detail/itmyhome/7609373

三、分页

$("#dom_var_pagination").pagination( {
onSelectPage: function(pageNumber, pageSize){
$('#dg').datagrid('load',{
pagesize: pageSize,
currentPage: pageNumber
});
}
});

效果截图：



项目源代码下载：http://download.csdn.net/detail/itmyhome/7609373

转载请注明出处：/article/1396627.html