gpt4 book ai didi

javascript - 如何通过数组手动检查treeView复选框?

转载 作者:行者123 更新时间:2023-12-03 22:52:10 24 4
gpt4 key购买 nike

在下面的代码中,无法将复选框设置为选中。我想设置某些复选框checked=true。有什么办法可以解决 kendo-mvvm 中的问题,其中数据绑定(bind)将在 html 部分完成?

预期输出是

[ ]General
[X]Name
[ ]Device
[X]Status

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script>
$(function() {
$("#treeview").kendoTreeView({
dataSource: {
data: [{
id: 7,
parent_id: 0,
text: "Work Order assignment",
value: "Work Order assignment",
expanded: true,
items: [
{ id: 71, parent_id: 7, text: "Name", value: "woName" },
{ id: 72, parent_id: 7, text: "Device", value: "woDevice" },
{ id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
}]
},
checkboxes: true
});

var values = ["woName","woStatus"];

var setTreeViewValues = function(values) {
var tv = $("#treeview").data("kendoTreeView");

tv.dataItems().forEach(function(dataItem) {
if (values.indexOf(dataItem.text) > -1) {
dataItem.set("checked", true);
}
});
};

setTreeViewValues(values);
});
</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>

最佳答案

$("#treeview").data("kendoTreeView").dataItems()这个方法做不是 返回树中的所有项目。它返回第一级项目。因此,如果您想检查子节点,您可能需要递归地遍历节点。
indexOf(string)函数不适用于 javascript 数组。您需要在循环中获取值。
http://www.w3schools.com/jsref/jsref_indexof.asp

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script>
$(function() {
$("#treeview").kendoTreeView({
dataSource: {
data: [{
id: 7,
parent_id: 0,
text: "Work Order assignment",
value: "Work Order assignment",
expanded: true,
items: [
{ id: 71, parent_id: 7, text: "Name", value: "woName" },
{ id: 72, parent_id: 7, text: "Device", value: "woDevice" },
{ id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
}]
},
checkboxes: true
});

var dataItems = $("#treeview").data("kendoTreeView").dataItems();

setTreeViewValues(dataItems);
});

var values = ["woName","woStatus"];

function setTreeViewValues(dataItems){
dataItems.forEach(function(dataItem){
values.forEach(function(value){
if (value.indexOf(dataItem.text) > -1) {
dataItem.set("checked", true);
}
if(dataItem.hasChildren){
// checking child dataItems recursively
setTreeViewValues(dataItem.children.data());
}
});
});
}

</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>

关于javascript - 如何通过数组手动检查treeView复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40120616/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com