[英]jstree checkbox manipulation
I have a jstree with checkbox for every nodes. 我有一个jstree与每个节点的复选框。 I want to achieve the following.
我想实现以下目标。 Let me know which method or part of api helps us to do that.
让我知道api的哪种方法或部分可以帮助我们做到这一点。
I searched API docs but found nothing. 我搜索了API文档,却一无所获。
As of JSTree version 3.1.1 here is what I would do: 从JSTree版本3.1.1开始,这是我要做的:
$('#data').jstree({
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]},
{ "text" : "Root node 2", "children" : [
{ "text" : "Child node 1" },
]}
]
},
'checkbox': {
three_state: false,
cascade: 'up'
},
'plugins': ["checkbox"]
});
Note that the magic here happens with the checkbox parameters. 请注意,这里的魔术与复选框参数一起发生。
From the documentation: 从文档:
three_state : a boolean indicating if checkboxes should cascade down and have an undetermined state.
three_state :一个布尔值,指示复选框是否应该级联并具有未确定状态。 Defaults to
true
.默认为
true
。
cascade : This setting controls how cascading and undetermined nodes are applied.
级联 :此设置控制如何应用级联和未确定的节点。 If 'up' is in the string - cascading up is enabled, if 'down' is in the string - cascading down is enabled, if 'undetermined' is in the string - undetermined nodes will be used.
如果'up'在字符串中 - 启用了级联,如果字符串中的'down' - 启用了级联,如果字符串中存在'未确定',则将使用未确定的节点。 If
three_state
is set totrue
this setting is automatically set to 'up+down+undetermined'.如果
three_state
设置为true
此设置将自动设置为“up + down + undetermined”。 Defaults to ''.默认为''。
This documentation was found inside of the source code for v.3.1.1 该文档在v.3.1.1的源代码中找到
EDIT I just checked v3.3.0, and although the documentation changed for these attributes (in my opinion, for the worse), the code works just the same . 编辑我刚刚检查了v3.3.0,虽然文档已经针对这些属性进行了更改(在我看来,情况更糟),但代码的工作方式却相同 。 In the meantime though it looks like these attributes are listed in their API: three_state and cascade and as of writing this seem to have better documentation than the source code.
与此同时,虽然看起来这些属性在他们的API中列出: three_state和cascade ,但在撰写时,这似乎比源代码有更好的文档。
Keep in mind that if you have multiple child nodes underneath a parent, checking just one of the children will not check the parent. 请记住,如果父项下有多个子节点,则仅检查其中一个子节点将不会检查父节点。 All nodes must be checked to take effect on the parent.
必须检查所有节点才能在父节点上生效。
Hope this helps! 希望这可以帮助!
Take a look at the real_checkboxes options. 看一下real_checkboxes选项。 This might get you started:
这可能会让你开始:
$("#jstree").jstree({
"checkbox": {
real_checkboxes: true,
real_checkboxes_names: function (n) {
var nid = 0;
$(n).each(function (data) {
nid = $(this).attr("nodeid");
});
return (["check_" + nid, nid]);
},
two_state: true
},
"plugins": ["themes", "json_data", "ui", "checkbox"]
})
.bind('open_node.jstree', function (e, data) {
$('#jstree').jstree('check_node', 'li[selected=selected]');
})
You'll probably need to change the bind behaviour so that it checks the parent when a child is checked. 您可能需要更改绑定行为,以便在检查子项时检查父项。
I had similar requirement as per the question and tried @chris answer above but no success with suggested answer. 我根据问题有类似的要求,并尝试上面的@chris答案,但建议的答案没有成功。
here is what I did to make this working 这就是我做的工作
.bind('check_node.jstree', function (e, data) { //check all parent nodes
//var currentNode = data.rslt.obj.attr("id");
var parentNode = data.rslt.obj.attr("parent_id")
$('#demo').jstree('check_node', '#'+parentNode);
})
.bind('uncheck_node.jstree', function (e, data) {//uncheck all child nodes
var allChildNodes = data.inst._get_children(data.rslt.obj);
allChildNodes.each(function(idx, listItem) {
$('#demo').jstree('uncheck_node', '#'+$(listItem).attr("id"));
});
})
.jstree({
// List of active plugins
"checkbox": {
real_checkboxes: true,
two_state: true,
checked_parent_open: true,
override_ui:true
},
"plugins" : [
"themes","json_data","ui","cookies","dnd","search","types","hotkeys","contextmenu","crrm", "checkbox"
]
})
This is what I used. 这是我用的。 Not as terse as the other ones but works:
不像其他人那样简洁,但有效:
$('#jstree').jstree( {
"plugins" : ["checkbox"],
"checkbox": {
"three_state": false
}
}).on("select_node.jstree", function (e, data) {
var selectedNode;
if (data.selected.length == 1) {
lastSelected = data.selected.slice(0);
selectedNode = data.selected[0];
} else {
// Get the difference between lastselection and current selection
selectedNode = $.grep(data.selected, function(x) {return $.inArray(x, lastSelected) < 0});
lastSelected = data.selected.slice(0); // trick to copy array
}
// Select the parent
var parent = data.instance.get_node(selectedNode).parent;
data.instance.select_node(parent);
}).on("deselect_node.jstree", function (e, data) {
// Get the difference between lastselection and current selection
var deselectedNode = $.grep(lastSelected,function(x) {return $.inArray(x, data.selected) < 0})
, children = data.instance.get_children_dom(deselectedNode);
if (children.length) {
children.each(function(i, a) {
data.instance.deselect_node(a);
lastSelected = data.selected.slice(0);
});
} else {
lastSelected = data.selected.slice(0);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.