• 前言

  不喜歡前臺的我也需要研究js了，公司開發的左右聯動樹，因此需要研究一下jsTree了，下面就是我研究最初版後做的左右聯動樹demo，由於本次使用jstree載入json資料，資料載入不再多做說明。
  

  注：新增節點時其父節點一定要存在，否則將新增不上去。

• 新增刪除

//樹左右聯動
function removeOper(treeFrom,treeTo) {
    var ref = $('#'+treeFrom).jstree(true),
        sel = ref.get_selected();
    if(!sel.length) { return false; }
    var
 
 data = [];
    var addData = [];
    for(var i = 0;i<sel.length;i++){
        //選擇節點
        var obj = ref.get_json(sel[i]);
        var parent = ref.get_parent(obj);
        var path = ref.get_path(sel[i]);
        var node = obj;
        addData.unshift({'par': parent,'data':{ 'id' :  obj.id ,'text'
 
 :  obj.text}});
        //獲取所選節點全路徑節點
        for(var j = 0 ; j < path.length-1;j++){
            var nodeId = ref.get_parent(node);
            node = ref.get_node(nodeId);
            var nodeJson = ref.get_json(node);
            var upParent = ref.get_parent(node);
            addData.unshift({'par'
 
: upParent,'data':{ 'id' :  nodeJson.id ,'text' :  nodeJson.text}});
        }
    }

    //新增被選擇的節點及其父節點
    for(var i = 0 ; i < addData.length;i++){
        addOper(treeTo,addData[i].par,addData[i].data);
    }
    //刪除節點
    ref.delete_node(sel);
};

function addOper(treeTo,parent,data) {
    var ref = $('#'+treeTo).jstree(true);
    var id = ref.get_node(data.id);
    if(id){
        return;
    }
    sel = ref.create_node(parent, data,"last");
};

• 樹載入

$('#ue_all_oper')
    .jstree({
            'core' : {
                    "check_callback" : true,
                    'data' : { 
                    'url' :   'aaa.action'}
                },
             "checkbox" : {
                    "keep_selected_style" : false,
             }, 
                 "plugins" : [ "checkbox" ]
            });   

$("#ue_checked_oper")
    .bind('loaded.jstree', function (e, data) {
        data.instance.open_all();
    })
    .bind("create_node.jstree", function(e, data) {
        data.instance.open_all();
    })
    .jstree({
        'plugins':["checkbox"],
        "checkbox" : {
            "keep_selected_style" : false,
         }, 

        "core" : { 
            "check_callback" : true,
            'data' : { 'url' :   'bbb.action}
        }
    });

• 提交的時候選擇所有就OK了~

$("#ue_checked_oper").jstree("check_all");