87,910
社区成员
发帖
与我相关
我的任务
分享konockout foreach有无限树型子级的数据，请问有什么好方法？
数据如下，parentID是树型父级ID，父级显示之后要显示子级，子级有不确定条数，子级下边也可能存在子级。
var data = [{
id: 1,
t: "级别1",
parentID: 0
}, {
id: 2,
t: "级别11",
parentID: 1
}, {
id: 3,
t: "级别12",
parentID: 1
}, {
id: 4,
t: "级别2",
parentID: 0
}, {
id: 5,
t: "级别21",
parentID: 4
}
];
...全文
请发表友善的回复…
发表回复
Hello World, 2018-12-24
- 打赏
- 举报
给个参考，没有样式，带展开折叠功能
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree test.</title>
<style>
.item {
cursor: default;
}
</style>
</head>
<body>
<div class="component-div" data-bind="template: { name: 'ko-temp', foreach: ko_vue_data() }"></div>
</body>
</html>
<script src="../../Script/knockout/knockout3.4.0.min.js"></script>
<script type="text/html" id="ko-temp">
<div class="item" data-bind="event: { click: $root.toggleClick }"><i data-bind=" style: { 'visibility': number != 0 ? 'visible' : 'hidden', 'padding-left': level * 20 + 'px' }, text: number"></i> <span data-bind=" text: name"></span></div>
<!--ko if:isFolder-->
<div class="tem-c" data-bind="template: { name: 'ko-temp', foreach: child }"></div>
<!--/ko-->
</script>
<script>
var ko_vue_data = [{
name: "总能耗",
number: "0",
child: [
{
name: "租户电耗",
number: "1",
child: [{
name: '张三',
number: '1.1'
}, {
name: '李四',
number: '1.2'
}]
},
{
name: "公共用电",
number: "2",
child: [
{
name: "暖通空调",
number: "2.1",
child: [
{
name: "冷站",
number: "2.1.1",
child: [
{
name: "冷水机组",
number: "2.1.1.1",
child: []
}
]
},
{
name: "热力站",
number: "2.1.2",
child: []
}
]
}
]
}
]
}];
function addAttribute(dst, level) {
for (var i = 0; i < dst.length; i++) {
var temp = dst[i];
temp.level = level;
if (!temp.child)
temp.child = [];
temp.isFolder = ko.observable(true);//默认展开
for (var j = 0; j < temp.child.length; j++) {
addAttribute(temp.child, 1 + level);
}
}
}
addAttribute(ko_vue_data, 0);
/*视图模型*/
function viewModel() {
var self = this;
self.ko_vue_data = ko.observableArray(ko_vue_data);
self.toggleClick = function (event) {//展开折叠效果
window.event ? window.event.cancelBubble = true : event.stopPropagation();
var isFolder = event.isFolder();
if (isFolder) {
event.isFolder(false);
} else {
event.isFolder(true);
}
}
}
ko.applyBindings(new viewModel());
</script>
