如何解决带有多个复选框的剑道树视图 - 选择子节点时限制选择父节点
HTML
<div id="userTree">
@Html.Hidden("UserHierarchyIds",Model.UserHierarchyIds)
@Html.HiddenFor(model => model.UserHierarchyIds)
<select id="multiselect" hidden="hidden"></select>
<div class="selectAll" hidden="hidden">
</div>
<input id="filterText" type="text" placeholder="Search Users" autocomplete="off" />
<div id="userTreeview" class="m-l m-r" hidden="hidden"></div>
</div>
脚本
$("#userTreeview").kendoTreeView({
loadondemand: false,dataSource: myDataSource,expand: onExpand,checkBoxes: {
checkChildren: true
},check: onCheck
});
function onCheck(e) {
//debugger;
$('.k-multiselect').removeClass('error');
var checkednodes = [];
var treeView = $("#userTreeview").data("kendoTreeView");
var checkedtreeView = $("#userTreeview").data("kendoTreeView");
var selectednode = checkedtreeView.dataItem(e.node);
CheckedChildNodes(treeView.dataSource.view(),selectednode.Id,selectednode.checked);
getCheckednodes(treeView.dataSource.view(),checkednodes);
populateMultiSelect(checkednodes);
}
function CheckedChildNodes(allnodes,checkednode,isChecked) {
//debugger;
var node;
for (var i = 0; i < allnodes.length; i++) {
if (allnodes[i].Id == checkednode) {
allnodes[i].set("checked",isChecked);
}
if (allnodes[i].hasChildren) {
CheckedChildNodes(allnodes[i].children.view(),isChecked);
}
}
}
function getCheckednodes(nodes,checkednodes) {
var node;
for (var i = 0; i < nodes.length; i++) {
node = nodes[i];
if (node.checked) {
checkednodes.push({ text: node.text,Id: node.Id });
}
if (node.hasChildren) {
getCheckednodes(node.children.view(),checkednodes);
}
}
}
function updatePMTreeview(selectedvalues) {
var nodes = $("#userTreeview").data("kendoTreeView").dataSource.view();
if (selectedvalues != null && selectedvalues != undefined) {
checkUncheckPMAllNodes(nodes,selectedvalues);
}
}
function checkUncheckPMAllNodes(nodes,selectedvalues) {
//debugger;
$("#userTreeview .k-checkBox-wrapper input").prop("checked",false).trigger("change");
for (var i = 0; i < nodes.length; i++) {
if (jQuery.inArray(nodes[i].Id,selectedvalues) !== -1) {
nodes[i].set("checked",true);
}
}
var checkednodes = [];
var treeView = $("#userTreeview").data("kendoTreeView");
getCheckednodes(treeView.dataSource.view(),checkednodes);
populateMultiSelect(checkednodes);
}
function populateMultiSelect(checkednodes) {
debugger;
$('#UserHierarchyIds').val('');
var multiSelect = $("#multiselect").data("kendoMultiSelect");
multiSelect.dataSource.data([]);
Userids = '';
var multiData = multiSelect.dataSource.data();
if (checkednodes.length > 0) {
var array = multiSelect.value().slice();
var split_str = [];
for (var i = 0; i < checkednodes.length; i++) {
multiData.push({ text: checkednodes[i].text,Id: checkednodes[i].Id });
array.push(checkednodes[i].Id.toString());
if (split_str.indexOf(checkednodes[i].Id.toString()) === -1) {
Userids = Userids + checkednodes[i].Id + ',';
}
split_str = Userids.split(",");
}
if (Userids.length > 0)
$('#UserHierarchyIds').val(Userids.slice(0,-1));
else
$('#UserHierarchyIds').val('');
$('.k-multiselect-wrap k-floatwrap').hide();
}
else {
$('#UserHierarchyIds').val('');
}
}
我们在项目中使用了剑道树视图,我们的要求是:
- 当点击父节点时,不应选择子节点 - 我们实现了。
- 当父节点有多个子节点时,如果选择了一个子节点,则不应选择父节点 - 我们实现了这一点。
- 当父节点有 1 个子节点时,如果选择了该子节点,则父节点不应选择 - 这是我们无法实现的
示例场景:
点击 Paul 时也需要点击子节点 Aamer,但是点击 Aamer 时只能选择 Aamer 而不是 Paul。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。