page.html
5.79 KB
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - big data page</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,
url: getUrl
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
view: {
addDiyDom: addDiyDom
},
callback: {
beforeExpand: beforeExpand,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
};
var zNodes =[
{name:"分页测试", t:"请点击分页按钮", id:"1", count:2000, page:0, pageSize:100, isParent:true}
];
var curPage = 0;
function getUrl(treeId, treeNode) {
var param = "id="+ treeNode.id +"_"+treeNode.page +"&count="+treeNode.pageSize,
aObj = $("#" + treeNode.tId + "_a");
aObj.attr("title", "当前第 " + treeNode.page + " 页 / 共 " + treeNode.maxPage + " 页")
return "../asyncData/getNodesForBigData.php?" + param;
}
function goPage(treeNode, page) {
treeNode.page = page;
if (treeNode.page<1) treeNode.page = 1;
if (treeNode.page>treeNode.maxPage) treeNode.page = treeNode.maxPage;
if (curPage == treeNode.page) return;
curPage = treeNode.page;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.reAsyncChildNodes(treeNode, "refresh");
}
function beforeExpand(treeId, treeNode) {
if (treeNode.page == 0) treeNode.page = 1;
return !treeNode.isAjaxing;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
alert("异步获取数据出现异常。");
treeNode.icon = "";
zTree.updateNode(treeNode);
}
function addDiyDom(treeId, treeNode) {
if (treeNode.level>0) return;
var aObj = $("#" + treeNode.tId + "_a");
if ($("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<span class='button lastPage' id='lastBtn_" + treeNode.id
+ "' title='last page' onfocus='this.blur();'></span><span class='button nextPage' id='nextBtn_" + treeNode.id
+ "' title='next page' onfocus='this.blur();'></span><span class='button prevPage' id='prevBtn_" + treeNode.id
+ "' title='prev page' onfocus='this.blur();'></span><span class='button firstPage' id='firstBtn_" + treeNode.id
+ "' title='first page' onfocus='this.blur();'></span>";
aObj.after(addStr);
var first = $("#firstBtn_"+treeNode.id);
var prev = $("#prevBtn_"+treeNode.id);
var next = $("#nextBtn_"+treeNode.id);
var last = $("#lastBtn_"+treeNode.id);
treeNode.maxPage = Math.round(treeNode.count/treeNode.pageSize - .5) + (treeNode.count%treeNode.pageSize == 0 ? 0:1);
first.bind("click", function(){
if (!treeNode.isAjaxing) {
goPage(treeNode, 1);
}
});
last.bind("click", function(){
if (!treeNode.isAjaxing) {
goPage(treeNode, treeNode.maxPage);
}
});
prev.bind("click", function(){
if (!treeNode.isAjaxing) {
goPage(treeNode, treeNode.page-1);
}
});
next.bind("click", function(){
if (!treeNode.isAjaxing) {
goPage(treeNode, treeNode.page+1);
}
});
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.button.firstPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -16px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.prevPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -48px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.nextPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -64px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.lastPage {float:right; margin-left:2px; margin-right: 0; background-position:-144px -32px; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<h1>分页加载大数据量</h1>
<h6>[ 文件路径: bigdata/page.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、大数据量加载说明</h2>
<ul class="list">
<li>1)、分页方案可以有效解决某一级节点数据超大的情况。</li>
<li>2)、分页按钮通过自定义控件的方法实现。</li>
<li class="highlight_red">3)、分页方案对于 checkbox 的关联关系无能为力，只能每次翻页后进行修正。由于时间关系，Demo 中不对 checkbox 的关联进行任何修正处理。</li>
<li class="highlight_red">4)、分页方案中，从 zTree 得到的节点数据只有当前页的节点数据，可以在每次翻页后自行保存每页的数据，作为缓存，具体情况要根据实际需求来决定。</li>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>需要设置 setting.async 异步加载部分的参数</li>
<li>其他不需要进行特殊的配置，根据自己的需求自行设置</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>