效果图：
代码：
<!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 + " 个, 初始化生成 DOM 的节点共 " + showNodeCount + " 个" + "\n\n 初始化 zTree 共耗时: " + (time2.getTime() - time1.getTime()) + " ms"); } $(document).ready(function(){ ruler.init("ruler"); $("#createTree").bind("click", createTree); }); //--> </SCRIPT> </HEAD> <BODY> <h1>一次性加载大数据量</h1> <h6>[ 文件路径: bigdata/common.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul> <li><span>调整总节点数，测试加载速度：</span> <div id="ruler" class="ruler" title="拖拽可调整节点数"> <div id="cursor" class="cursor">5000</div> </div> <div style="width:220px; text-align: center;"> <span>checkbox</span><input type="checkbox" id="showChk" title="是否显示 checkbox" class="checkbox first" /> [ <a id="createTree" href="#" title="初始化 zTree" onclick="return false;">初始化 zTree</a> ] </div> </li> </ul> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>1、大数据量加载说明</h2> <ul class="list"> <li>1)、zTree v3.x 针对大数据量一次性加载进行了更深入的优化，实现了延迟加载功能，即不展开的节点不创建子节点的 DOM。</li> <li class="highlight_red">2)、对于每级节点最多一百左右，但总节点数几千甚至几万，且不是全部展开的数据，一次性加载的效果最明显，速度非常快。</li> <li class="highlight_red">3)、对于某一级节点数就多达几千的情况 延迟加载无效，这种情况建议考虑分页异步加载。</li> <li class="highlight_red">4)、对于全部节点都展开显示的情况，延迟加载无效，这种情况建议不要全部展开。</li> <li>5)、显示 checkbox / radio 会造成一定程度的性能下降。</li> <li>6)、利用 addDiyDom 功能增加自定义控件会影响速度，影响程度受节点数量而定。</li> <li>7)、利用 onNodeCreated 事件回调函数对节点 DOM 进行操作会影响速度，影响程度受节点数量而定。</li> </ul> </li> <li class="title"><h2>2、setting 配置信息说明</h2> <ul class="list"> <li>不需要进行特殊的配置</li> </ul> </li> <li class="title"><h2>3、treeNode 节点数据说明</h2> <ul class="list"> <li>对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性</li> </ul> </li> </ul> </div> </div> </BODY> </HTML>
