接上一篇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/blog.ytso.com/7609373

三、分页

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

效果截图：

项目源码下载：http://download.csdn.net/detail/blog.ytso.com/7609373

转载请注明出处：blog.ytso.com/article/details/37563551