zTreeが非同期でツリーをロードして初期化したときにすべて展開
8280 ワード
最近では、メニュー権限ツリーをzTreeで表示し、ロールバインドに関連する権限を指定するロール管理機能が行われています.
zTreeはすごいと思って使ってみましたが、修正をしているうちに、木がロードされている間に一気に全部展開したいと思っていました.今回は非同期で廃棄されたので、非同期にしなければならないと思っていました.意外にも強力なAPIで似たようなシーンが与えられていて、しかもよくできていて、再帰を採用していますが、やはり注意しなければならない問題があります.
つまりDEOMに与えられているのは、まずロードして展開しないで、クリックしてからすべて展開することです.これで大丈夫です.もし、関数を直接ロードしたときに展開すると、問題が発生します.DEMOには、親ノードの数が大きい場合は、非同期プロセスが多すぎることを避けるために、遅延を利用して制御することに注意してください.そのため、遅延ロードで制御する必要があります.
zTreeはすごいと思って使ってみましたが、修正をしているうちに、木がロードされている間に一気に全部展開したいと思っていました.今回は非同期で廃棄されたので、非同期にしなければならないと思っていました.意外にも強力なAPIで似たようなシーンが与えられていて、しかもよくできていて、再帰を採用していますが、やはり注意しなければならない問題があります.
つまりDEOMに与えられているのは、まずロードして展開しないで、クリックしてからすべて展開することです.これで大丈夫です.もし、関数を直接ロードしたときに展開すると、問題が発生します.DEMOには、親ノードの数が大きい場合は、非同期プロセスが多すぎることを避けるために、遅延を利用して制御することに注意してください.そのため、遅延ロードで制御する必要があります.
<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">
var setting = {
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter,
type: "get"
},
callback: {
beforeAsync: beforeAsync,
onAsyncSuccess: onAsyncSuccess
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i/\.n/g , '.');
}
return childNodes;
}
function beforeAsync() {
curAsyncCount++;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
curAsyncCount--;
if (curStatus == "expand") {
expandNodes(treeNode.children);
} else if (curStatus == "async") {
asyncNodes(treeNode.children);
}
if (curAsyncCount <= 0) {
curStatus = "";
}
}
var curStatus = "init", curAsyncCount = 0, goAsync = false;
function expandAll() {
if (!check()) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
expandNodes(zTree.getNodes());
if (!goAsync) {
curStatus = "";
}
}
function expandNodes(nodes) {
if (!nodes) return;
curStatus = "expand";
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for (var i=0, l=nodes.length; itrue, false, false);//
if (nodes[i].isParent && nodes[i].zAsync) {
expandNodes(nodes[i].children);//
} else {
goAsync = true;
}
}
}
function check() {
if (curAsyncCount > 0) {
return false;
}
return true;
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
setTimeout(function(){
expandAll("treeDemo");
},1000);//
});
SCRIPT>