jQuery EasyUI使用教程:添加分页到树网格中
来源:互联网 发布:java工程师就业班 编辑:程序博客网 时间:2024/06/07 16:32
本教程展示如何在带有动态加载特性的树网格中添加分页。
jQuery EasyUI最新试用版下载请猛戳>>
点击查看示例
创建树网格
想要启动树网格的分页功能,首先必须添加 'pagination:true' 属性,这样页面加载时就会向服务器发送 'page' 和 'rows' 参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<
table
title
=
"Products"
class
=
"easyui-treegrid"
style
=
"width:700px;height:300px"
data-options="
url: 'treegrid4_getdata.php',
rownumbers: true,
pagination: true,
pageSize: 2,
pageList: [2,10,20],
idField: 'id',
treeField: 'name',
onBeforeLoad: function(row,param){
if (!row) { // load top level rows
param.id
=
0
; // set
id
=
0
, indicate to load new page rows
}
}
">
<
thead
>
<
tr
>
<
th
field
=
"name"
width
=
"250"
>Name</
th
>
<
th
field
=
"quantity"
width
=
"100"
align
=
"right"
>Quantity</
th
>
<
th
field
=
"price"
width
=
"150"
align
=
"right"
formatter
=
"formatDollar"
>Price</
th
>
<
th
field
=
"total"
width
=
"150"
align
=
"right"
formatter
=
"formatDollar"
>Total</
th
>
</
tr
>
</
thead
>
</
table
>
服务器代码
treegrid4_getdata.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$page
= isset(
$_POST
[
'page'
]) ?
intval
(
$_POST
[
'page'
]) : 1;
$rows
= isset(
$_POST
[
'rows'
]) ?
intval
(
$_POST
[
'rows'
]) : 10;
$offset
= (
$page
-1)*
$rows
;
$id
= isset(
$_POST
[
'id'
]) ?
intval
(
$_POST
[
'id'
]) : 0;
include
'conn.php'
;
$result
=
array
();
if
(
$id
== 0){
$rs
= mysql_query(
"select count(*) from products where parentId=0"
);
$row
= mysql_fetch_row(
$rs
);
$result
[
"total"
] =
$row
[0];
$rs
= mysql_query(
"select * from products where parentId=0 limit $offset,$rows"
);
$items
=
array
();
while
(
$row
= mysql_fetch_array(
$rs
)){
$row
[
'state'
] = has_child(
$row
[
'id'
]) ?
'closed'
:
'open'
;
array_push
(
$items
,
$row
);
}
$result
[
"rows"
] =
$items
;
}
else
{
$rs
= mysql_query(
"select * from products where parentId=$id"
);
while
(
$row
= mysql_fetch_array(
$rs
)){
$row
[
'state'
] = has_child(
$row
[
'id'
]) ?
'closed'
:
'open'
;
$row
[
'total'
] =
$row
[
'price'
]*
$row
[
'quantity'
];
array_push
(
$result
,
$row
);
}
}
echo
json_encode(
$result
);
function
has_child(
$id
){
$rs
= mysql_query(
"select count(*) from products where parentId=$id"
);
$row
= mysql_fetch_array(
$rs
);
return
$row
[0] > 0 ? true : false;
}
发送到服务器的参数包括:
- page:要加载的当前页面
- rows:页面尺寸大小
- id:父行的id值,从服务器返回的行将被添加
当展开一个行节点时,'id' 值是大于 0 的。 当改变页码时,'id' 值应该被设置为 0 来放置加载子行。
下载EasyUI示例:easyui-treegrid-demo.zip
有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>
0 0
- jQuery EasyUI使用教程:添加分页到树网格中
- jQuery EasyUI使用教程之在数据网格中添加一个分页
- jQuery EasyUI使用教程之添加工具栏到数据网格
- jQuery EasyUI使用教程之自定义数据网格分页
- jQuery EasyUI使用教程之在数据网格中添加搜索功能
- jQuery EasyUI使用教程之创建基本的树网格
- jQuery EasyUI使用教程之创建复杂的树网格
- jQuery EasyUI使用教程之在树网格中动态加载
- jQuery EasyUI使用教程之在树网格中延迟加载节点
- jQuery EasyUI使用教程之添加节点到树形菜单
- jQuery EasyUI使用教程之从数据网格中获取选中行数据
- jQuery EasyUI使用教程之在数据网格中自定义排序
- jQuery EasyUI使用教程之在数据网格中创建列组
- jQuery EasyUI使用教程之在数据网格中创建列组
- jQuery EasyUI使用教程之在数据网格中扩展行显示详细信息
- jQuery EasyUI使用教程之动态改变数据网格列
- jQuery EasyUI使用教程之格式化数据网格列
- jQuery EasyUI使用教程之启用数据网格内联编辑
- android中 代码实现截图功能(静态+动态视频)
- BFS和DFS
- java 简单工厂
- 推荐算法概览
- poj 2635 The Embarrassed Cryptographer ??/Java??(???)
- jQuery EasyUI使用教程:添加分页到树网格中
- redis的安装
- [Python] SEU-jwc验证码识别器设计思路
- 2.2 Hello World
- Es6特性
- 五分钟深入 Hadoop 内核
- Android函数工具(读取InputStream到String字符串)
- tjut 3974
- 导出数据到excel报connection reset和broken pipe异常