2016-02-19 130 views
5

我有這個JsTreeJsTree複選框 - 檢查事件

enter image description here

與此代碼:

var Tree = $("#MyTree"); 

     Tree.jstree({ 
      "core": { 
       "themes": { 
        "responsive": false, 
        "multiple" : false, 
       }, 
       "data": dataTree 
      }, 
      "types": { 
       "default": { 
        "icon": "icon-lg" 
       }, 
       "file": { 
        "icon": "icon-lg" 
       } 
      }, 
      "ui": { 
       "select_limit": 1, 
      }, 
      "plugins": ["wholerow", "types", "checkbox", "ui", "crrm", "sort"], 
      "checkbox": { 
       "three_state": false, 
       "real_checkboxes": false 
      } 
     }); 

我需要單獨選擇和檢查行動,用戶必須檢查所有節點,他想要但只選擇一行的時間。 現在當我點擊行中的所有地方時,它會選擇該行並檢查該節點,只有當用戶點擊它時,我需要選中該複選框。

我嘗試了這麼多事件,但唯一的工作是:

Tree.on("changed.jstree", function (e, data) { }); 

是趕上選擇的應對行動和檢查。

有什麼建議嗎?

回答

13

這個答案是關於jstree的第3版 - 這是你應該在2016年使用的。不幸的是你的示例代碼,似乎使用jstree rel 1,我無法幫助你。

3版

首先,解開選擇和檢查狀態(checkbox.tie_selection:假) - 見the docs

然後,使用check_node.jstree事件

工作示例

var data1 = [{ 
 
     "id": "W", 
 
     "text": "World", 
 
     "state": { "opened": true }, 
 
     "children": [{"text": "Asia"}, 
 
        {"text": "Africa"}, 
 
        {"text": "Europe", 
 
        "state": { "opened": false }, 
 
        "children": [ "France","Germany","UK" ] 
 
     }] 
 
    }]; 
 

 
$('#Tree').jstree({ 
 
    core: { 
 
     data: data1, 
 
     check_callback: false 
 
    }, 
 
    checkbox: {  
 
     three_state : false, // to avoid that fact that checking a node also check others 
 
     whole_node : false, // to avoid checking the box just clicking the node 
 
     tie_selection : false // for checking without selecting and selecting without checking 
 
    }, 
 
    plugins: ['checkbox'] 
 
}) 
 
.on("check_node.jstree uncheck_node.jstree", function(e, data) { 
 
    alert(data.node.id + ' ' + data.node.text + 
 
     (data.node.state.checked ? ' CHECKED': ' NOT CHECKED')) 
 
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> 
 
    <div id="Tree"></div>

+0

@LorenzoGrossi我加了一個工作片斷 – edc65

+0

我下載jstree 3.2.1,該片段正是我所要做的,但它並不在我的解決方案工作... 在我的解決方案沒有關係當我點擊框時添加支票,但添加它時,我選擇行 –

+0

@LorenzoGrossi審查您的創建參數。特別是「複選框」部分。 – edc65