Jquery树之jsTree----左右联动
2015-08-27 18:28
711 查看
前言
注:添加节点时其父节点一定要存在,否则将添加不上去。
添加删除
树加载
提交的时候选择所有就OK了~
不喜欢前台的我也需要研究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");
相关文章推荐
- Jquery 的遍历,祖先、后代、同胞以及其过滤
- jquery 获取元素文本信息
- jquery easyui combobox加载数量过多引起渲染页面缓慢问题
- jquery在ie11中的区别
- 一劳永逸的解决jquery的本地引入的方法
- Java Jsp 下拉框 联动 AJAX jquery
- jQuery下拉友情链接美化效果代码分享
- 26、Jquery 基础
- 11. jQuery - Chaining
- jquery在子级页面获取父级元素并赋值
- 10. jQuery Callback 函数
- jquery实现左右滑动菜单效果代码
- 9. jQuery 停止动画
- 8. jQuery 效果 - 动画
- jQuery添加元素节点
- jquery之getJSON
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- 7. jQuery 效果 - 滑动
- Flexslider - 响应式的 jQuery 内容滚动插件
- JS 中 和 JQuery 的 this 关键字