我正在使用jsTree来显示带有复选框的树。使用json_data
插件按需加载每个级别的节点。
如果检查了节点的后代,那么该节点应处于“未确定状态”(如ACME和USA)。
问题是,树开始崩溃。 ACME看起来unchecked
但应 undetermined
。当我最终扩展到一个已检查的节点时,jsTree意识到祖先应该是undetermined
。
所以我需要能够在undetermined
状态下放置一个复选框而不加载其子项。
使用jsTree
,您可以通过将jstree-checked
课程添加到<li>
来预先检查一个方框。我尝试添加jstree-undetermined
类,但它不起作用。它只是将它们置于检查状态。
这是我的代码:
$("#tree").jstree({
plugins: ["json_data", "checkbox"],
json_data: {
ajax: {
url: '/api/group/node',
success: function (groups) {
var nodes = [];
for (var i=0; i<groups.length; i++) {
var group = groups[i];
var cssClass = "";
if(group.isSelected)
cssClass = "jstree-checked";
else if(group.isDecendantSelected)
cssClass = "jstree-undetermined";
nodes.push({
data: group.name,
attr: { 'class': cssClass }
});
}
return nodes;
}
}
}
})
如何将节点设置为undetermined
状态?
答案 0 :(得分:3)
我遇到了同样的问题,我找到的解决方案就是这个问题:
var tree = $("#tree").jstree({
plugins: ["json_data", "checkbox"],
json_data: {
ajax: {
url: '/api/group/node',
success: function(groups) {
var nodes = [];
for (var i = 0; i < groups.length; i++) {
var group = groups[i];
var checkedState = "false";
if (group.isSelected)
checkedState = "true";
else if (group.isDecendantSelected)
checkedState = "undetermined";
nodes.push({
data: group.name,
attr: { 'checkedNode': checkedState }
});
}
return nodes;
},
complete: function () {
$('li[checkedNode="undetermined"]', tree).each(function () {
$(this).removeClass('jstree-unchecked').removeClass('jstree-checked').addClass('jstree-undetermined');
});
$('li[checkedNode="true"]', tree).each(function () {
$(this).removeClass('jstree-unchecked').removeClass('jstree-undetermined').addClass('jstree-checked');
});
$('li[checkedNode="false"]', tree).each(function () {
$(this).removeClass('jstree-checked').removeClass('jstree-undetermined').addClass('jstree-unchecked');
});
}
}
}
});
希望它可以帮到你!
答案 1 :(得分:2)
也许这在同时改变了......
但是现在(版本3.0.0)真正简单的解决方案有效:
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
undetermined : boolean // is the node undetermined <<==== HERE: JUST SET THIS
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}