我正在使用Bootstrap-Treeview 。我需要一棵带有复选框的树。我想在按下按钮时将所有树以 treview 格式发送到服务器。但我不明白如何从 TreeView 中提取实际数据。
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="bootstrap-treeview.min.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-treeview.min.js"></script>
<script>
window.onload = function () {
var object = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
];
$('#tree').treeview({
data: object,
showCheckbox: true,
})
.on('nodeSelected', function (event, data) {
console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
console.log('object =' + JSON.stringify(object));
console.log('tree =' + JSON.stringify($('#tree').data('treeview')));
console.log('tree 2 =' + JSON.stringify($('#tree')));
console.log('tree 3 =' + JSON.stringify($('#tree').treeview(true)));
});
};
</script>
</head>
<body>
<div id="tree">twetwe</div>
</body>
</html>页面加载后，我选中任何复选框，然后单击任何项目，因此调用 console.log。但没有有关所有 TreeView 的实际状态的信息。我需要有关所有节点的信息:
{"text":"Child 2","nodeId":3,"parentId":0,"selectable":true,"state":{"checked":false,"disabled":false,"expanded":false,"selected":true}}
最佳答案
不可能获取树的所有节点，因为 TreeView 对象上没有可用的公共(public)方法来给出整个树(即所有节点)的当前状态。
但是，可以通过将treeview.getCollapsed() 和treeview.getExpanded() 方法的输出组合到单个对象中来间接提取该数据。
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="bootstrap-treeview.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="bootstrap-treeview.min.js"></script>
<script>
window.onload = function () {
var object = [
{text: "Parent 1",
nodes: [{text: "Child 1",
nodes: [{text: "Grandchild 1"}]
},
{text: "Child 2"}
]
},
{text: "Parent 2"} ];
$('#tree').treeview({
data: object,
showCheckbox: true,
}).on('nodeSelected', function (event, data) {
console.log( getAllNodes() );
console.log( JSON.stringify(getAllNodes() ));
console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
});
};
function getAllNodes(){
var treeViewObject = $('#tree').data('treeview'),
allCollapsedNodes = treeViewObject.getCollapsed(),
allExpandedNodes = treeViewObject.getExpanded(),
allNodes = allCollapsedNodes.concat(allExpandedNodes);
return allNodes;
}
</script>
</head>
<body>
<div id="tree">twetwe</div>`enter code here`
</body>
</html>
但是请注意，生成的对象在结构上与作为数据提供给 TreeView 的输入对象不相似。结果对象可以重新格式化以构造类似于输入对象的对象。
关于javascript - 从 Bootstrap-Treeview 获取当前数据(对象/json)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39139441/