我使用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
状态?
3条答案
按热度按时间7kqas0il1#
我遇到了同样的问题,我找到的解决方案是这样的:
希望对你有帮助!
kcrjzv8t2#
也许这段时间改变了。
但现在(版本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 }
直接从源代码中学习,网址为:https://github.com/vakata/jstree/blob/6507d5d71272bc754eb1d198e4a0317725d771af/src/jstree.checkbox.js#L318
dwthyt8l3#
谢谢你们,我发现了一个额外的技巧,它可以让生活变得更好,但是它需要在jstree.js中进行代码更改。看起来像是一个疏忽:
查看get_undetermined函数,并搜索关键字 break。该 break 应该是continue。
如果你做了一个改变,那么你所需要做的就是提供状态(主对象及其子对象),jstree将自动处理向上级联的未确定状态。它很早就从脚本中退出,无法正确地捕获所有未确定的节点,需要上面丑陋的变通方法来进行样式等。
下面是我使用 AJAX 的配置(不需要特殊的属性或complete()函数):