jstree基於提交的選定複選框創建新樹

Question

我想根據複選框選擇創建一個新的複選框樹。 當我在我的選擇後點擊提交時，只會顯示選定的複選框和不確定的父母樹。

code in jsfiddle 

https://jsfiddle.net/chakrihacker/d2xztqok/1/

Answer 1

您只需使用你的數據創建#selected樹，然後調用select_node上#selected樹從#tree這樣傳遞get_checked數據：

//button submit output 
$('#submit').click(function() { 
    var selectedData = $("#tree").jstree("get_selected"); 
    //document.getElementById('selected').innerHTML = selectedData; 
    //console.log(selectedData); 

    $("#selected").jstree({ 
     "checkbox": { 
      "keep_selected_style": false 
     }, 
     "plugins": ["checkbox", "json_data"], 
     "core": { 
      "themes": { 
       "icons": false 
      }, 
      "data": myData 
     }, 
    }); 

    $('#selected').on({ 
     'loaded.jstree': function treeLoaded(event, data) { 
      data.instance.select_node($("#tree").jstree().get_checked()); 
     }, 
     'ready.jstree': function() { 
      $(this).jstree("open_all"); 
     } 
    }); 

}); 

見我的完整工作示例：http://zikro.gr/dbg/html/jstree/

UPDATE

要通過選定的數據生成一棵新樹，您必須遍歷所有數據並保留所選節點。我用get_node通過id和2個數組來獲得節點;一個用於存儲樹創建的新選定節點，另一個用於保存已添加的ID以便不再添加它們。

//button submit output 
$('#submit').click(function() { 

    var tree = $("#tree").jstree(); 
    var selectedData = tree.get_selected(true); 
    var newTreeData = [], 
     nodesAdded = [], 
     checking; 

    for (var i = 0; i < selectedData.length; i++) { 
     checking = selectedData[i]; 
     do { 
      if (nodesAdded.indexOf(checking.id) == -1) { 
       newTreeData.push({ 
        id: checking.id, 
        parent: checking.parent, 
        text: checking.text 
       }); 
       nodesAdded.push(checking.id); 
       checking = tree.get_node(checking.parent); 
      } else { 
       break; 
      } 
     } while (checking.id != '#') 
    } 

    $("#selected").jstree({ 
     "checkbox": { 
      "keep_selected_style": false 
     }, 
     "plugins": ["checkbox", "json_data"], 
     "core": { 
      "themes": { 
       "icons": false 
      }, 
      "data": newTreeData 
     }, 
    }); 

    $('#selected').on({ 
     'ready.jstree': function() { 
      $(this).jstree("open_all"); 
     } 
    }); 
}); 

看到這裏的工作示例：http://zikro.gr/dbg/html/jstree/index-copy.html