我正在使用fancytree，但我有一些自定义设置。树正在使用延迟加载和基于ajax请求的加载。但是，如果要检查父节点，则会加载所有子节点（就像您展开它一样）并选择它们。
我遇到的问题是，只要选中或取消选中某个节点，我就需要获取所有选定的子节点。
我知道我可以获得这样的选定节点列表
var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
alert(node.key);
});
但是，我需要做的是在选择或未选择节点的某些事件上触发。尝试在我的select函数中执行此操作会导致问题，因为我加载节点的方式，我不止一次检查id。
, 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;
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) {
alert(node.key);
});
}
}
那么，是否有某种事件就像是一场花哨的变化事件？或者我将如何添加一些基本上在花式树被更改时触发的东西，但在检查或取消选中所有内容之后？这是我的完整代码，仅供参考，以及它绑定的一些有效的json数据。
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
, 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;
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) {
alert(node.key);
});
}
}
, strings: {
loading: "Grabbing places and events…",
loadError: "Load error!"
},
})
});
}
function logEvent(event, data, msg) {
// var args = $.isArray(args) ? args.join(", ") :
msg = msg ? ": " + msg : "";
$.ui.fancytree.info("Event('" + event.type + "', node=" + data.node + ")" + msg);
}
这是基础json数据
[{"key":1,"title":"Accommodations","lazy":true,"parentId":null,"treeItemType":"category","customLeftBorder":"1px solid #330000","lat":null,"lon":null,"desc":"some desc"},{"key":5,"title":"Attractions","lazy":false,"parentId":null,"treeItemType":"category","customLeftBorder":"1px solid #fff","lat":null,"lon":null,"desc":"some desc"},{"key":6,"title":"Dining","lazy":false,"parentId":null,"treeItemType":"category","customLeftBorder":"1px solid #fff","lat":null,"lon":null,"desc":"some desc"},{"key":7,"title":"Entertainment","lazy":false,"parentId":null,"treeItemType":"category","customLeftBorder":"1px solid #fff","lat":null,"lon":null,"desc":"some desc"},{"key":18,"title":"1","lazy":true,"parentId":null,"treeItemType":"category","customLeftBorder":"1px solid orange","lat":null,"lon":null,"desc":"some desc"},{"key":23,"title":"2","lazy":true,"parentId":null,"treeItemType":"category","customLeftBorder":"1px solid 00cc00","lat":null,"lon":null,"desc":"some desc"}]
如果您点击第一个节点
，这里会返回数据[{"key":2,"title":"Hotels","lazy":false,"parentId":1,"treeItemType":"category","customLeftBorder":"1px solid #00ff99","lat":null,"lon":null,"desc":"some desc"},{"key":3,"title":"Bed \u0026 Breakfast","lazy":false,"parentId":1,"treeItemType":"category","customLeftBorder":"1px solid #999","lat":null,"lon":null,"desc":"some desc"}]