樹視圖與全選或全部取消選中knockout.js

我使用以下代碼在具有多級數據的knockout.js中生成一棵樹。樹視圖與全選或全部取消選中knockout.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/

來源

2013-09-28 rahularyansharma

你的複選框AREN多少更少的代碼」數據綁定到任何東西。你試圖只顯示一個支票，或者實際上是否有一個檢查過的財產？ –

我的複選框用於在db中激活和停用該節點，我的意思是它們是數據綁定。 – rahularyansharma

@rahularyansharma所以在現實中你的複選框看起來像''並且每個項目上有'ko.observable'屬性的'isChecked'？ – nemesv

我做的，不改變原單數據，而且使用KO映射一個版本。

我還拿了opertunity顯示你需要我的公約庫來編寫

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

用我的lib http://jsfiddle.net/u28CY/
沒有http://jsfiddle.net/u28CY/1/

來源

2013-09-28 15:16:03 Anders

我剛剛發現一個問題，如果我檢查變形，然後刪除檢查從5天然後，變形也應該取消檢查 – rahularyansharma

你可以使用options.parent創建函數添加父母給孩子，取消選中孩子時，取消選中父母 – Anders

是否可以編輯你的代碼，因爲我是新來的knockout.js – rahularyansharma

樹視圖與全選或全部取消選中knockout.js

回答

相關問題