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 的帮助下，为树形菜单和树形网格添加分页功能都十分简单。只需对控件进行少量配置，即可快速实现分页效果，提高数据的可视性和用户体验。