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
}
];

解决方案 »

  1.   

    给个参考，没有样式，带展开折叠功能<!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>&nbsp;<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>