easyui datagrid两种分页区别

最新推荐文章于 2024-09-21 19:42:30 发布

三流角色

最新推荐文章于 2024-09-21 19:42:30 发布

阅读量945

点赞数 1

分类专栏： easyui 文章标签： easyui datagrid

本文链接：https://blog.csdn.net/plq1210/article/details/49249991

版权

easyui 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.标准的datagrid属性设置分页：

通过官方datagrid的pageSize,pageList属性设置，如下图，弹出结果一致

$(function(){
		$('#hdr').datagrid({
			singleSelect:true,
			striped:true,
			collapsible:true,
			url:'datagrid_data1.json',
			method:'get',
			pagination:true,
			pageSize:10,
			pageList: [10,20,50,100],
			 columns:[[
			 {field:'itemid',width:80},
			 {field:'productid',width:100},
			 {field:'listprice',width:80,align:'right'}
			 
			 ]]
		});
		
		alert($('#hdr').datagrid('getPager').data("pagination").options.pageList)		// 弹出10,20,50,100
		$('#hdr').datagrid({
			onLoadSuccess : function(data) {
				console.log("111")
			}
		});
		
		alert($('#hdr').datagrid('getPager').data("pagination").options.pageList)		// 弹出10,20,50,100
	});

2.通过获取pager对象进行分页，如下，这时，如果分页脚本后面出现datagrid事件渲染的画，就会出现意向不到的结果

$(function(){
		var p = $('#hdr').datagrid('getPager'); 
		$(p).pagination({ 
		    pageSize: 20,					//每页显示的记录条数，默认10 
		    pageList: [20,20,50,100],		//可以设置每页记录条数的列表 
		    beforePageText: '第',			//页数文本框前显示的汉字 
		    afterPageText: '页    共 {pages} 页', 
		    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
		}); 
		
		alert($('#hdr').datagrid('getPager').data("pagination").options.pageList)		// 弹出20,20,50,100
		$('#hdr').datagrid({
			onLoadSuccess : function(data) {
				console.log("111")
			}
		});
		
		alert($('#hdr').datagrid('getPager').data("pagination").options.pageList)  // 弹出默认的10,20,30,40,50,并且之前设置的中文信息语言也没了
	});

由此推测：easyui datagrid事件绑定会重新渲染一遍datagrid组件，并且只认官方的datagrid配置进行渲染，其他类似$('#hdr').datagrid('getPager')进行设置的会失效，解决方法就是把这些脚本放到最后面，$("#id").datagrid({ 事件：function...})放前面即可，若有大神能解释其中源码实现原理就好了，小弟不才，错误之处还请指出

下面附上1个修改过后的datagrid实例源代码Basic.html，

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="hdr" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,striped:true,collapsible:true,url:'datagrid_data1.json',method:'get',pagination:true,pageSize:10">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
<script>

	$(function(){
		var p = $('#hdr').datagrid('getPager'); 
		$(p).pagination({ 
		    pageSize: 20,					//每页显示的记录条数，默认10 
		    pageList: [20,20,50,100],		//可以设置每页记录条数的列表 
		    beforePageText: '第',			//页数文本框前显示的汉字 
		    afterPageText: '页    共 {pages} 页', 
		    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
		}); 
		
		alert($('#hdr').datagrid('getPager').data("pagination").options.pageList)		// 弹出20,20,50,100
		$('#hdr').datagrid({
			onLoadSuccess : function(data) {
				console.log("111")
			}
		});
		
		alert($('#hdr').datagrid('getPager').data("pagination").options.pageList)		// 弹出默认的10,20,30,40,50，并且之前渲染的中文脚本也被替换了
	});
	
	
</script>	
</body>
</html>