Jquery树之jsTree----左右联动

• 前言

  不喜欢前台的我也需要研究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");