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

来源：互联网发布：芒果tv网络电视会员编辑：程序博客网时间：2024/05/17 22:04

前言

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

0 0