我可以将 jstree 复选框限制为仅 parents 和 children 吗?
Can I limit jstree check box to only parents with children?
我想知道是否可以只在 parent 上提供一个复选框,其中 children 没有 children。
像这样。我可以 select 一个 child,或者 child 的直接 parent select 所有 children。
parent01
parent02
parent03[]
child01[]
child02[]
child03[]
parent04[]
child04[]
parent05[]
child05[]
parent06
parent07
parent08[]
child06[]
child07[]
一个工作的例子在这个网站上演示:
然而,此示例不会将复选框限制为仅 parents 和 children
这是一个遵循我之前回答的想法的工作示例 - 将具有 children 和 children 的 parent 的可见性设置为隐藏。
为了防止通过单击节点来选中隐藏的复选框,
复选框插件属性 whole_node 和 tie_selection 应设置为 false。
下面的代码读取树数据并检查每个树节点,如果 parent 节点有一个 parent 节点——我们称它为 grandparent 节点。
如果是这样,grandparent 节点的复选框的 css 可见性 属性 设置为 hidden.
var to_hide = []; // ids of nodes that won't have checkboxes
/* get the tree data and find the nodes that have
children with children
*/
function getGrandparents() {
// tree data
var item = $('#data').jstree(true).get_json('#', {flat:true});
console.log(JSON.stringify(item, undefined, 2));
var parent, grandparent;
// var nodeIds = item.map(x => x.id); // ids of nodes in object item
var nodeIds = item.map(function(x){return x.id;}); // ids of nodes in object item
for (var i = 0; i < item.length; i += 1) {
if (has_parent(item[i])) {
parent = item[nodeIds.indexOf(item[i].parent)];
if (has_parent(parent)) {
grandparent = parent.parent + '_anchor'; // node with id grandparent is parent of parent
// and therefore shouldn't have a checkbox
if (to_hide.indexOf(grandparent) < 0) {
to_hide[to_hide.length] = grandparent; // load id into array of checkboxes that will
// be hidden
}
}
}
}
function has_parent(who) {
return ((typeof who.parent !== 'undefined') && (who.parent !== '#'));
}
}
function hideGrandparents() {
var gpa;
// set visibility of checkbox nodes in to_hide to hidden
for (var n = 0; n < to_hide.length; n += 1) {
gpa = document.getElementById(to_hide[n]);
if (gpa != null ) {
gpa.getElementsByClassName('jstree-checkbox')[0].style.visibility = 'hidden';
}
}
}
$('#data').jstree({
'core' : {
'data' : [
{ "text" : "Root node",
"children" : [
{ "text" : "Child node 1 1",
"children" : [
{ "text" : "Child node 1 1 1" },
{ "text" : "Child node 1 1 2" }
]
},
{ "text" : "Child node 1 2",
"children" : [
{ "text" : "Child node 1 2 1",
"children" : [
{ "text" : "Child node 1 2 1 1" },
{ "text" : "Child node 1 2 1 2" }
]
},
{ "text" : "Child node 1 2 2" }
]
}
]
},
{ "text" : "Root node 2",
"children" : [
{ "text" : "Child node 2 1" },
]
}
]
},
'checkbox': {
three_state: false,
whole_node: false, // should be set to false. otherwise checking the hidden checkbox
// could be possible by clicking the node
tie_selection: false, // necessary for whole_node to work
cascade: 'up down'
},
'plugins': ["checkbox"]
}).on("ready.jstree", function() {
getGrandparents();
hideGrandparents(); // hide checkboxes of root nodes that have children with children
}).on("open_node.jstree", hideGrandparents);
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>
<div id="data"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
我想知道是否可以只在 parent 上提供一个复选框,其中 children 没有 children。
像这样。我可以 select 一个 child,或者 child 的直接 parent select 所有 children。
parent01
parent02
parent03[]
child01[]
child02[]
child03[]
parent04[]
child04[]
parent05[]
child05[]
parent06
parent07
parent08[]
child06[]
child07[]
一个工作的例子在这个网站上演示:
然而,此示例不会将复选框限制为仅 parents 和 children
这是一个遵循我之前回答的想法的工作示例 - 将具有 children 和 children 的 parent 的可见性设置为隐藏。
为了防止通过单击节点来选中隐藏的复选框, 复选框插件属性 whole_node 和 tie_selection 应设置为 false。
下面的代码读取树数据并检查每个树节点,如果 parent 节点有一个 parent 节点——我们称它为 grandparent 节点。 如果是这样,grandparent 节点的复选框的 css 可见性 属性 设置为 hidden.
var to_hide = []; // ids of nodes that won't have checkboxes
/* get the tree data and find the nodes that have
children with children
*/
function getGrandparents() {
// tree data
var item = $('#data').jstree(true).get_json('#', {flat:true});
console.log(JSON.stringify(item, undefined, 2));
var parent, grandparent;
// var nodeIds = item.map(x => x.id); // ids of nodes in object item
var nodeIds = item.map(function(x){return x.id;}); // ids of nodes in object item
for (var i = 0; i < item.length; i += 1) {
if (has_parent(item[i])) {
parent = item[nodeIds.indexOf(item[i].parent)];
if (has_parent(parent)) {
grandparent = parent.parent + '_anchor'; // node with id grandparent is parent of parent
// and therefore shouldn't have a checkbox
if (to_hide.indexOf(grandparent) < 0) {
to_hide[to_hide.length] = grandparent; // load id into array of checkboxes that will
// be hidden
}
}
}
}
function has_parent(who) {
return ((typeof who.parent !== 'undefined') && (who.parent !== '#'));
}
}
function hideGrandparents() {
var gpa;
// set visibility of checkbox nodes in to_hide to hidden
for (var n = 0; n < to_hide.length; n += 1) {
gpa = document.getElementById(to_hide[n]);
if (gpa != null ) {
gpa.getElementsByClassName('jstree-checkbox')[0].style.visibility = 'hidden';
}
}
}
$('#data').jstree({
'core' : {
'data' : [
{ "text" : "Root node",
"children" : [
{ "text" : "Child node 1 1",
"children" : [
{ "text" : "Child node 1 1 1" },
{ "text" : "Child node 1 1 2" }
]
},
{ "text" : "Child node 1 2",
"children" : [
{ "text" : "Child node 1 2 1",
"children" : [
{ "text" : "Child node 1 2 1 1" },
{ "text" : "Child node 1 2 1 2" }
]
},
{ "text" : "Child node 1 2 2" }
]
}
]
},
{ "text" : "Root node 2",
"children" : [
{ "text" : "Child node 2 1" },
]
}
]
},
'checkbox': {
three_state: false,
whole_node: false, // should be set to false. otherwise checking the hidden checkbox
// could be possible by clicking the node
tie_selection: false, // necessary for whole_node to work
cascade: 'up down'
},
'plugins': ["checkbox"]
}).on("ready.jstree", function() {
getGrandparents();
hideGrandparents(); // hide checkboxes of root nodes that have children with children
}).on("open_node.jstree", hideGrandparents);
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>
<div id="data"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>