first commit

This commit is contained in:
jefferyzhao
2025-07-31 17:44:12 +08:00
commit b9bdc8598b
42390 changed files with 4467935 additions and 0 deletions

View File

@ -0,0 +1,190 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - big data common</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.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onNodeCreated: onNodeCreated
}
};
var dataMaker = function(count) {
var nodes = [], pId = -1,
min = 10, max = 90, level = 0, curLevel = [], prevLevel = [], levelCount,
i = 0,j,k,l,m;
while (i<count) {
if (level == 0) {
pId = -1;
levelCount = Math.round(Math.random() * max) + min;
for (j=0; j<levelCount && i<count; j++, i++) {
var n = {id:i, pId:pId, name:"Big-" +i};
nodes.push(n);
curLevel.push(n);
}
} else {
for (l=0, m=prevLevel.length; l<m && i<count; l++) {
pId = prevLevel[l].id;
levelCount = Math.round(Math.random() * max) + min;
for (j=0; j<levelCount && i<count; j++, i++) {
var n = {id:i, pId:pId, name:"Big-" +i};
nodes.push(n);
curLevel.push(n);
}
}
}
prevLevel = curLevel;
curLevel = [];
level++;
}
return nodes;
}
var ruler = {
doc: null,
ruler: null,
cursor: null,
minCount: 5000,
count: 5000,
stepCount:500,
minWidth: 30,
maxWidth: 215,
init: function() {
ruler.doc = $(document);
ruler.ruler = $("#ruler");
ruler.cursor = $("#cursor");
if (ruler.ruler) {
ruler.ruler.bind("mousedown", ruler.onMouseDown);
}
},
onMouseDown: function(e) {
ruler.drawRuler(e, true);
ruler.doc.bind("mousemove", ruler.onMouseMove);
ruler.doc.bind("mouseup", ruler.onMouseUp);
ruler.doc.bind("selectstart", ruler.onSelect);
$("body").css("cursor", "pointer");
},
onMouseMove: function(e) {
ruler.drawRuler(e);
return false;
},
onMouseUp: function(e) {
$("body").css("cursor", "auto");
ruler.doc.unbind("mousemove", ruler.onMouseMove);
ruler.doc.unbind("mouseup", ruler.onMouseUp);
ruler.doc.unbind("selectstart", ruler.onSelect);
ruler.drawRuler(e);
},
onSelect: function (e) {
return false;
},
getCount: function(end) {
var start = ruler.ruler.offset().left+1;
var c = Math.max((end - start), ruler.minWidth);
c = Math.min(c, ruler.maxWidth);
return {width:c, count:(c - ruler.minWidth)*ruler.stepCount + ruler.minCount};
},
drawRuler: function(e, animate) {
var c = ruler.getCount(e.clientX);
ruler.cursor.stop();
if ($.browser.msie || !animate) {
ruler.cursor.css({width:c.width});
} else {
ruler.cursor.animate({width:c.width}, {duration: "fast",easing: "swing", complete:null});
}
ruler.count = c.count;
ruler.cursor.text(c.count);
}
}
var showNodeCount = 0;
function onNodeCreated(event, treeId, treeNode) {
showNodeCount++;
}
function createTree () {
var zNodes = dataMaker(ruler.count);
showNodeCount = 0;
$("#treeDemo").empty();
setting.check.enable = $("#showChk").attr("checked");
var time1 = new Date();
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var time2 = new Date();
alert(" " + zNodes.length + " nodes are initialized, " + showNodeCount + " nodes generate the DOM object."
+ "\n\n Initialization zTree total time: " + (time2.getTime() - time1.getTime()) + " ms");
}
$(document).ready(function(){
ruler.init("ruler");
$("#createTree").bind("click", createTree);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>One-time Large Data Loading</h1>
<h6>[ File Path: bigdata/common.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul>
<li><span>Adjust the total number of nodes to the test load speed: </span>
<div id="ruler" class="ruler" title="can drag to adjust the number of nodes">
<div id="cursor" class="cursor">5000</div>
</div>
<div style="width:220px; text-align: center;">
<span>checkbox</span><input type="checkbox" id="showChk" title="whether to display checkbox" class="checkbox first" />&nbsp;&nbsp;&nbsp;&nbsp;
[ <a id="createTree" href="#" title="Initialize zTree" onclick="return false;">Initialize zTree</a> ]
</div>
</li>
</ul>
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of large data load</h2>
<ul class="list">
<li>1) zTree v3.x optimized for one-time large data loading capacity, using a lazy loading technique, which does not expand the node does not create child nodes of the DOM.</li>
<li class="highlight_red">2) If a maximum of 100 nodes each, but a total number of several thousand or even tens of thousands of nodes, and the parent node is collapsed by default to optimize the most obvious effect, very fast.</li>
<li class="highlight_red">3) For the next level there are thousands of sub-node case, the optimization of lazy loading is invalid, proposal to consider asynchronous page loading.</li>
<li class="highlight_red">4) if you set the data to all the parent nodes are expanded, the optimization of lazy loading is invalid, proposal to not expand all parent node when you initialize zTree.</li>
<li>5) set the display checkbox / radio will affect some of the performance.</li>
<li>6) DOM generated using addDiyDom function will affect the speed, the number of nodes determines the number of impact situations.</li>
<li>7) Using 'onNodeCreated' callback function to manipulate nodes object will affect the speed, the degree of influence determined by the number of nodes.</li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>No special configuration.</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li>No special requirements on the node data, the user can add custom attributes.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

View File

@ -0,0 +1,157 @@
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - big data async</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.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,
url: getUrl
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
view: {
expandSpeed: ""
},
callback: {
beforeExpand: beforeExpand,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
};
var zNodes =[
{name:"500 nodes", id:"1", count:500, times:1, isParent:true},
{name:"1000 nodes", id:"2", count:1000, times:1, isParent:true},
{name:"2000 nodes", id:"3", count:2000, times:1, isParent:true}
];
var log, className = "dark",
startTime = 0, endTime = 0, perCount = 100, perTime = 100;
function getUrl(treeId, treeNode) {
var curCount = (treeNode.children) ? treeNode.children.length : 0;
var getCount = (curCount + perCount) > treeNode.count ? (treeNode.count - curCount) : perCount;
var param = "id="+treeNode.id+"_"+(treeNode.times++) +"&count="+getCount;
return "../asyncData/getNodesForBigData.php?" + param;
}
function beforeExpand(treeId, treeNode) {
if (!treeNode.isAjaxing) {
startTime = new Date();
treeNode.times = 1;
ajaxGetNodes(treeNode, "refresh");
return true;
} else {
alert("Downloading data, Please wait to expand node...");
return false;
}
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
if (!msg || msg.length == 0) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
totalCount = treeNode.count;
if (treeNode.children.length < totalCount) {
setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);
} else {
treeNode.icon = "";
zTree.updateNode(treeNode);
zTree.selectNode(treeNode.children[0]);
endTime = new Date();
var usedTime = (endTime.getTime() - startTime.getTime())/1000;
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" ]&nbsp;&nbsp;treeNode:" + treeNode.name );
showLog("Child node has finished loading, a total of "+ (treeNode.times-1) +" times the asynchronous load, elapsed time: "+ usedTime + " seconds ");
}
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
alert("ajax error...");
treeNode.icon = "";
zTree.updateNode(treeNode);
}
function ajaxGetNodes(treeNode, reloadType) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (reloadType == "refresh") {
treeNode.icon = "../../../css/zTreeStyle/img/loading.gif";
zTree.updateNode(treeNode);
}
zTree.reAsyncChildNodes(treeNode, reloadType, true);
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 4) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Loading Data in Batches</h1>
<h6>[ File Path: bigdata/diy_async.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul>
<li class="highlight_red">&nbsp;&nbsp;&nbsp;&nbsp;Demo for testing load data in batches, each node needs to re-start to load.</li>
</ul>
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1, Explanation of large data load</h2>
<ul class="list">
<li>1) If has nodes for as many as thousands in one level, lazy loading is invalid, this demo shows how to load data in batches.</li>
<li class="highlight_red">2) This method applies to thousands of nodes must all display needs.</li>
<li class="highlight_red">3) This method doesn't solve the problem of slow loading, it will only make the final result appear more slowly, but can be limited to avoid browser suspended animation, and more nodes displayed slower.</li>
<li>4) For at least several thousand nodes in one level case, another solution is to: pagination loading.<br/>
async load log:<br/>
<ul id="log" class="log" style="height:85px"></ul></li>
</ul>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Need to set the parameters in setting.async</li>
<li>Advised to turn off animation effects: setting.view.expandSpeed = "";</li>
<li>No other special configuration, the user can set their own requirements.</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li>No special requirements on the node data, the user can add custom attributes.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>

150
node_modules/@ztree/ztree_v3/demo/en/bigdata/page.html generated vendored Normal file
View File

@ -0,0 +1,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.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.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:"page test", t:"Please click the paging buttons.", 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", "Page " + 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("ajax error...");
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>Loading Data By Pagination</h1>
<h6>[ File Path: 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, Explanation of large data load</h2>
<ul class="list">
<li>1) Pagination can be an effective solution to the large number of child nodes of the situation.</li>
<li>2) Using custom method to display the pagination button.</li>
<li class="highlight_red">3) Pagination lead to the association of checkbox can not be achieved, only correction after show each page . Because of the time limitation, Demo does not deal with association of checkbox.</li>
<li class="highlight_red">4) The use of pagination, you can only get the current page node data from zTree. You can save the data after each page loading as the cache, according to the demand to determine the specific methods.</li>
</li>
<li class="title"><h2>2, Explanation of setting</h2>
<ul class="list">
<li>Need to set the parameters in setting.async</li>
<li>No other special configuration, the user can set their own requirements.</li>
</ul>
</li>
<li class="title"><h2>3, Explanation of treeNode</h2>
<ul class="list">
<li>No special requirements on the node data, the user can add custom attributes.</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>