jstree複選框操作

Question

我對每個節點都有一個帶有複選框的jstree。我想實現以下。讓我知道哪種方法或API的一部分可以幫助我們做到這一點。

1. 我不想在選擇父節點時檢查任何子節點。目前所有的孩子都被選中。
2. 如果有任何子節點被選中，那麼檢查它的所有父節點。當前父節點被部分檢查（正方形）。我想完全刪除部分選擇。那是我想徹底改變jstree複選框的行爲。

我搜索了API文檔，但什麼也沒找到。

Answer 1

看看real_checkboxes選項。這可能讓你開始：

 $("#jstree").jstree({ 
      "checkbox": { 
       real_checkboxes: true, 
       real_checkboxes_names: function (n) { 
       var nid = 0; 
       $(n).each(function (data) { 
        nid = $(this).attr("nodeid"); 
       }); 
       return (["check_" + nid, nid]); 
       }, 
       two_state: true 
      }, 
      "plugins": ["themes", "json_data", "ui", "checkbox"] 
     }) 
     .bind('open_node.jstree', function (e, data) { 
      $('#jstree').jstree('check_node', 'li[selected=selected]'); 
     }) 

你可能需要更改綁定的行爲，以便它檢查的家長當孩子被選中。

Answer 2

我有類似的要求，每個問題和以上嘗試@chris答案，但建議的答案沒有成功。

這裏是我做過什麼，使這個工作

.bind('check_node.jstree', function (e, data) { //check all parent nodes 
    //var currentNode = data.rslt.obj.attr("id"); 
     var parentNode = data.rslt.obj.attr("parent_id") 
     $('#demo').jstree('check_node', '#'+parentNode); 
}) 
.bind('uncheck_node.jstree', function (e, data) {//uncheck all child nodes 
    var allChildNodes = data.inst._get_children(data.rslt.obj); 
     allChildNodes.each(function(idx, listItem) { 
      $('#demo').jstree('uncheck_node', '#'+$(listItem).attr("id")); 
     }); 
}) 
.jstree({ 
// List of active plugins 
    "checkbox": { 
     real_checkboxes: true, 
      two_state: true, 
      checked_parent_open: true, 
      override_ui:true 
    }, 
    "plugins" : [ 
     "themes","json_data","ui","cookies","dnd","search","types","hotkeys","contextmenu","crrm", "checkbox" 
    ] 
}) 

Answer 3

這是我用過的東西。還不如簡潔爲其他的，但工程：

$('#jstree').jstree({ 
    "plugins" : ["checkbox"], 
    "checkbox": { 
    "three_state": false 
    } 
}).on("select_node.jstree", function (e, data) { 
    var selectedNode; 
    if (data.selected.length == 1) { 
    lastSelected = data.selected.slice(0); 
    selectedNode = data.selected[0]; 
    } else { 
    // Get the difference between lastselection and current selection 
    selectedNode = $.grep(data.selected, function(x) {return $.inArray(x, lastSelected) < 0}); 
    lastSelected = data.selected.slice(0); // trick to copy array 
    } 
    // Select the parent 
    var parent = data.instance.get_node(selectedNode).parent; 
    data.instance.select_node(parent); 
}).on("deselect_node.jstree", function (e, data) { 
    // Get the difference between lastselection and current selection 
    var deselectedNode = $.grep(lastSelected,function(x) {return $.inArray(x, data.selected) < 0}) 
    , children = data.instance.get_children_dom(deselectedNode); 
    if (children.length) { 
    children.each(function(i, a) { 
     data.instance.deselect_node(a); 
     lastSelected = data.selected.slice(0); 
    }); 
    } else { 
    lastSelected = data.selected.slice(0); 
    } 
}); 

Answer 4

由於JSTree版本3.1.1這裏是我會做：

$('#data').jstree({ 
    'core' : { 
     'data' : [ 
      { "text" : "Root node", "children" : [ 
        { "text" : "Child node 1" }, 
        { "text" : "Child node 2" } 
      ]}, 
      { "text" : "Root node 2", "children" : [ 
        { "text" : "Child node 1" }, 
      ]} 
     ] 
    }, 
    'checkbox': { 
     three_state: false, 
     cascade: 'up' 
    }, 
    'plugins': ["checkbox"] 
}); 

JSFiddle Demo

注意，魔術這裏發生複選框參數。

從文檔：

three_state：一個boolean值，指示覆選框都應該向下級聯 和具有不確定的狀態。默認爲true。

---

級聯：此設置控制如何級聯和不確定的節點 應用。如果'up'在字符串中 - 級聯處於啓用狀態，如果 'down'在字符串中 - 則啓用級聯關閉，如果'undetermined' 位於字符串中 - 將使用未確定的節點。如果three_state 設置爲true此設置自動設置爲 '上+下+未確定'。默認爲''。

本文檔中發現的源代碼內的v.3.1.1

編輯我只是檢查V3.3。0，儘管這些屬性的文檔已更改（在我看來，更糟糕的情況下）是code works just the same。與此同時，儘管看起來這些屬性在其API中列出：three_state和cascade，並且在編寫此文件時似乎比源代碼具有更好的文檔。

請記住，如果您在父級下方有多個子節點，只檢查其中一個子女將而不是檢查父級。必須檢查所有節點才能在父級上生效。

希望這會有所幫助！