树视图，选中全部或取消选中全部在挖空.js

Tree view with check all or uncheck all in knockout.js

本文关键字：全部 js 取消 视图      更新时间：2023-09-26

我使用以下代码在挖空中制作了一棵树.js具有多级数据。 

<ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul>
<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <input type='checkbox'>
        <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }">
        </ul>
    </li>
</script>

但是现在我想以这种方式在淘汰赛中扩展它，如果我选中父级，那么它的所有子项都被选中，如果取消选中父子项，则取消选中。

Here is js fiddle link

http://jsfiddle.net/tEGUp/

我制作了一个不改变原始数据但使用 KO 映射的版本。

我还利用了操作来展示使用我的公约库编写的代码需要减少多少

MyApp.TreeViewModel = function(data) {
    var mapping = {
        items: {
            create: function(options) {
                return new MyApp.TreeViewModel(options.data);
            }
        }
    };
    this.checked = ko.observable(false); 
    this.checked.subscribe(this.onChecked, this);
    this.items = ko.observableArray();
    ko.mapping.fromJS(data, mapping, this);     
};
MyApp.TreeViewModel.prototype = {
    constructor: MyApp.TreeViewModel,
    onChecked: function(checked) {
        ko.utils.arrayForEach(this.items(), function(item) {
            item.checked(checked);
        });
    }
};
  • 用我的库 http://jsfiddle.net/u28CY/
  • 没有 http://jsfiddle.net/u28CY/1/
相关文章：