ツリービューを作成するために fancytree プラグインを使用しています。すべてのデータは、ajax と json を介して拡張に読み込まれます。ノードが最初に展開されていない場合、ユーザーが親ノードを技術的にロードしないため、子ノードをロードするコードもあります。
私の問題は、3 レベルの深さの親子関係があり、レベル 2 に展開すると、3 番目のレベルがチェックされないことです。
本質的に私はこのようなものを持っています
Parent1
-->Child1
---->Child1-1
---->Child1-2
---->Child1-3
-->Child2
親を展開してチェックしないと、すべてのノードがロードされてチェックされます。ただし、親 1 を展開して子 1 と 2 を表示すると、parent1 をチェックすると、子ノード 1-1 から 3 がロードまたはチェックされることはありません。チェック時に子ノードをロードする必要があるコードは次のとおりです。何が欠けていますか。
select: function (event, data) { //here's where I need to load the children for that node, if it has them, so they can be set to checked
var node = data.node;
//alert(node.key);
if (node.isSelected()) {
if (node.isUndefined()) {
// Load and select all child nodes
node.load().done(function () {
node.visit(function (childNode) {
childNode.setSelected(true);
});
});
} else {
// Select all child nodes
node.visit(function (childNode) {
childNode.setSelected(true);
});
}
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
treeHash[node.data.treeItemType + node.key] = node.key;
});
}
参考までに、これが私の完全なJSです
if ($("entityTree") != null) {
$(function () {
// Create the tree inside the <div id="tree"> element.
$("#entityTree").fancytree({
source: { url: "/Home/GetTreeViewData", cache: true }
, checkbox: true
, icons: false
, cache: true
, lazyLoad: function (event, data) {
var node = data.node;
data.result = {
url: "/Home/GetTreeViewData/" + node.key.replace(node.data.idPrefix, "")
, data: { mode: "children", parent: node.key }
, cache: true
};
}
, renderNode: function (event, data) {
// Optionally tweak data.node.span
var node = data.node;
var $span = $(node.span);
if (node.key != "_statusNode") {
$span.find("> span.fancytree-expander").css({
borderLeft: node.data.customLeftBorder
//borderLeft: "1px solid orange"
});
}
}
, selectMode: 3
, select: function (event, data) { //here's where I need to load the children for that node, if it has them, so they can be set to checked
var node = data.node;
//alert(node.key);
if (node.isSelected()) {
if (node.isUndefined()) {
// Load and select all child nodes
node.load().done(function () {
node.visit(function (childNode) {
childNode.setSelected(true);
});
});
} else {
// Select all child nodes
node.visit(function (childNode) {
childNode.setSelected(true);
});
}
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
treeHash[node.data.treeItemType + node.key] = node.key;
});
}
else {
delete treeHash[node.data.treeItemType + node.key];
//alert("remove " + node.key);
}
for (var i in treeHash) {
alert(treeHash[i]);
}
}
, strings: {
loading: "Grabbing places and events…",
loadError: "Load error!"
},
})
});
}