我使用 jsTree 显示与复选框的树。节点的每个级别使用 json_data 插件加载点播。
I'm using jsTree to show a tree with checkboxes. Each level of nodes is loaded on-demand using the json_data
plugin.
如果一个节点的后代被选中,那么这个节点应该在一个不确定状态(如ACME和美国)。
If a node's descendent is checked, then that node should be in an "undetermined state" (like ACME and USA).
现在的问题是,树上开出崩溃。 ACME看起来选中
,但应的是待定
。当我终于扩展到一个检查点,jsTree实现的祖先应该是未定
。
The problem is, the tree starts out collapsed. ACME looks unchecked
but should be undetermined
. When I finally expand to a checked node, jsTree realizes the ancestors should be undetermined
.
所以,我需要能够把一个复选框中的待定
状态,而不会加载它的孩子。
So I need to be able to put a checkbox in the undetermined
state without loading its children.
使用 jsTree
则可以$ P $添加 jstree-检查
类的P-检查框<李>
。我尝试添加了 jstree-未确定
类,但它不工作。它只是使他们处于选中状态。
With jsTree
you can pre-check a box by adding the jstree-checked
class to the <li>
. I tried adding the jstree-undetermined
class, but it doesn't work. It just puts them in a checked state.
下面是我的code:
$("#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;
}
}
}
})
如何设置一个节点到待定
状态?
How do I set a node to the undetermined
state?
我有同样的问题,我发现是解决这一个:
I had the same problem and the solution I found was this one:
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');
});
}
}
}
});
希望它可以帮助你!
Hope it helps you!