jQuery EasyUI 树形菜单 - 树形网格添加分页
jQuery EasyUI 树形菜单 - 树形网格添加分页
概述
jQuery EasyUI 是一个基于 jQuery 的 UI 插件库,提供了大量易于使用和个性化配置的UI组件。其中包含树形菜单和树形网格两种控件,本文将详细介绍如何在这两个控件中添加分页功能。
树形菜单添加分页
树形菜单不像树形网格可以直接添加分页,需借助 EasyUI 自带的 pager 控件来实现。以下是实现过程:
<div id="mytree"></div>
<script>
$('#mytree').tree({
url: 'mydata.php', // 从服务器加载数据
queryParams: { page: 1, rows: 10 }, // 指定分页参数
onLoadSuccess: function (node, data) {
// 获取服务器返回信息中的总记录数
var total = data.total;
// 获取分页控件对象
var pager = $('#mytree').tree('getPager');
// 更新分页控件信息
pager.pagination({
total: total,
showPageList: false,
displayMsg: '第 {from} - {to} 条,共 {total} 条'
});
},
onBeforeLoad: function (node, param) {
// 防止节点展开时重复加载数据
if (node == null) {
param.page = $('#mytree').tree('options').pageNumber; // 获取当前页码
param.rows = $('#mytree').tree('options').pageSize; // 获取每页记录数
}
}
});
</script>
以上代码中,首先在 div
标签内创建树形菜单,然后通过 $('#mytree').tree()
方法进行初始化。其中,url
参数用于指定从服务器加载数据的地址,在本例中为 mydata.php
。 queryParams
参数用于指定分页参数,包括当前页码和每页记录数。 onLoadSuccess
方法会在数据加载成功后执行,其中获取服务器返回信息中的总记录数,并根据此更新分页控件信息。onBeforeLoad
方法用于防止节点展开时重复加载数据。
树形网格添加分页
树形网格可以直接通过 EasyUI 自带的 pagination 控件进行分页。以下是实现过程:
<table id="mygrid"></table>
<script>
$('#mygrid').treegrid({
url: 'mydata.php', // 从服务器加载数据
pagination: true, // 启用分页控件
pageSize: 10, // 每页记录数
pageList: [10, 20, 30], // 可选每页记录数
columns: [[
{ field: 'id', title: 'ID', width: 100 },
{ field: 'name', title: '名称', width: 100 },
{ field: 'price', title: '价格', width: 100 }
]],
onLoadSuccess: function (row, data) {
// 获取服务器返回信息中的总记录数
var total = data.total;
// 获取分页控件对象
var pager = $('#mygrid').treegrid('getPager');
// 更新分页控件信息
pager.pagination({
total: total,
showPageList: false,
displayMsg: '第 {from} - {to} 条,共 {total} 条'
});
}
});
</script>
以上代码中,首先在 table
标签内创建树形网格,然后通过 $('#mygrid').treegrid()
方法进行初始化。其中,url
参数用于指定从服务器加载数据的地址,在本例中为 mydata.php
。 pagination
参数用于启用分页控件。 pageSize
和 pageList
分别用于指定每页记录数和可选每页记录数。columns
用于定义网格列信息。 onLoadSuccess
方法会在数据加载成功后执行,其中获取服务器返回信息中的总记录数,并根据此更新分页控件信息。
总结
通过以上示例,我们可以看到,在 EasyUI 的帮助下,为树形菜单和树形网格添加分页功能都十分简单。只需对控件进行少量配置,即可快速实现分页效果,提高数据的可视性和用户体验。