Thao tác hộp kiểm jstree

Question

Tôi có một hộp kiểm với tất cả các nút. Tôi muốn đạt được những điều sau đây. Hãy cho tôi biết phương pháp hoặc một phần của api giúp chúng tôi làm điều đó.

1. Tôi không muốn kiểm tra bất kỳ nút con nào khi nút chính được chọn. Hiện tại tất cả trẻ em đều được chọn.
2. Nếu bất kỳ nút con nào được chọn, hãy kiểm tra tất cả các nút cha của nó. Hiện tại các nút cha được kiểm tra một phần (hình vuông). Tôi muốn loại bỏ hoàn toàn một phần lựa chọn. Đó là tôi muốn hoàn toàn thay đổi hành vi của các hộp kiểm jstree.

Tôi đã tìm kiếm tài liệu API nhưng không tìm thấy gì.

Answer 1

Hãy xem các tùy chọn real_checkboxes. Điều này có thể giúp bạn bắt đầu:

 $("#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]'); 
     }) 

Có thể bạn sẽ cần phải thay đổi hành vi ràng buộc để kiểm tra cha mẹ khi trẻ được chọn.

Answer 2

Tôi có yêu cầu tương tự như câu hỏi và đã thử @chris câu trả lời ở trên nhưng không thành công với câu trả lời được đề xuất.

đây là những gì tôi đã làm để làm việc

.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

này Đây là những gì tôi đã sử dụng. Không phải là ngắn gọn như những người khác nhưng hoạt động:

$('#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

Tính đến JSTree phiên bản 3.1.1 ở đây là những gì tôi sẽ làm gì:

$('#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

Lưu ý rằng sự kỳ diệu ở đây xảy ra với thông số hộp kiểm.

Từ các tài liệu:

three_state: a boolean chỉ ra nếu hộp kiểm nên thác xuống và có một trạng thái không xác định. Mặc định là true.

---

thác: Thiết lập này điều khiển tầng và các nút không xác định được áp dụng như thế nào. Nếu 'lên' nằm trong chuỗi - tầng lên được kích hoạt, nếu 'xuống' nằm trong chuỗi - tầng xuống được bật, nếu 'chưa xác định' nằm trong chuỗi - các nút chưa được xác định sẽ được sử dụng. Nếu three_state được đặt thành true, cài đặt này sẽ tự động được đặt thành 'lên + xuống + chưa được xác định'. Mặc định là ''.

Tài liệu này đã được tìm thấy bên trong mã nguồn cho v.3.1.1

EDIT tôi chỉ kiểm tra v3.3.0, và mặc dù tài liệu đã thay đổi cho các thuộc tính này (theo ý kiến ​​của tôi, cho tồi tệ hơn), code works just the same. Trong khi chờ đợi, có vẻ như các thuộc tính này được liệt kê trong API của chúng: three_state và cascade và bằng văn bản này dường như có tài liệu tốt hơn so với mã nguồn.

Hãy nhớ rằng nếu bạn có nhiều nút con bên dưới bố mẹ, hãy kiểm tra chỉ một trong các trẻ em sẽ không kiểm tra cha mẹ. Tất cả các nút phải được kiểm tra để có hiệu lực trên phụ huynh.

Hy vọng điều này sẽ hữu ích!