您的位置:首页 > Web前端 > JQuery

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

2015-08-27 18:28 711 查看
前言

不喜欢前台的我也需要研究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");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: