jstree实现左右2棵树的联动

最新推荐文章于 2024-06-20 19:59:06 发布
最新推荐文章于 2024-06-20 19:59:06 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40039268/article/details/101362715
版权
先上效果图（样式有些low，主要看jstree的代码吧）

在这里插入图片描述

实现了2个tree的左右联动，自动排序等等！
<html>
<head>
	<meta name="decorator" content="ani"/>
	<link href="${ctxStatic}/plugin/jstree/jstree.min.css" rel="stylesheet" type="text/css"/>
	<script src="${ctxStatic}/plugin/jstree/jstree.min.js" type="text/javascript"></script>
	<script>
		var operData = [];//两个列表总信息
        var sumData = [];//所有的选中信息
        var idData = [];//上次选中的信息
        $(document).ready(function() {
            initUeAllOper('0');//加载指标列表
            initUeCheckedOper();//加载绑定指标列表
        })

		function initUeAllOper(type) {
            $('#ue_all_oper')
                .bind('loaded.jstree', function (e, data) {
                    data.instance.open_all();//打开所有的节点
                    data.instance.clear_state();//此句用来清除之前选中的数据不可以去掉
                })
                .jstree({
                    'core' : {
                        "themes" : {
                            "responsive": true,
                            "dots": false,//是否显示树连接线
                            "ellipsis": true,//节点名过长时是否显示省略号
                            "icons": false
                        },
                        "check_callback" : true,
                        'data' : function (obj, callback) {
                            var jsonstrAll="[]";
                            var jsonarrayAll = eval('('+jsonstrAll+')');
                            $.ajax({
                                type: "POST",
                                url:"${ctx}/paevaluationindex/paEvaluationIndex/datatree1?indicatorType=${indicatorType}&paAnnualMissionId=${id}&type=" + type,
                                dataType:"json",
                                async: false,
                                success:function(result) {
                                    var arrays= result;
                                    for(var i=0 ; i<arrays.length; i++){
                                        var name = arrays[i].indicator == '0'?arrays[i].name + '▲':arrays[i].indicator == '1'?arrays[i].name + '★':arrays[i].name
                                        var arr = {
                                            "id":arrays[i].id,
                                            "parent":arrays[i].parentId == '0'?"#":arrays[i].parentId,
                                            "text":name
                                        }
                                        jsonarrayAll.push(arr);
                                    }
                                    operData = operData.concat(jsonarrayAll);
                                }
                            });
                            callback.call(this, jsonarrayAll);
                        }
                    },
                    "checkbox" : {
                        "keep_selected_style" : false,
                    },
                    "plugins" : [ "state",'checkbox','types','themes','contextmenu' ],
                    'state': {
                        "opened":true
                    }
                });
        }

        function initUeCheckedOper() {
            $("#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({
                    'core' : {
                        "themes" : {
                            "responsive": true,
                            "dots": false,//是否显示树连接线
                            "ellipsis": true,//节点名过长时是否显示省略号
                            "icons": false
                        },
                        "check_callback" : true,
                        'data' : function (obj, callback) {
                            var jsonstr="[]";
                            var jsonarray = eval('('+jsonstr+')');
                            $.ajax({
                                type: "POST",
                                url:"${ctx}/paevaluationindex/paEvaluationIndex/datatree2?paAnnualMissionId=${id}",
                                dataType:"json",
                                async: false,
                                success:function(result) {
                                    var arrays= result;
                                    for(var i=0 ; i<arrays.length; i++){
                                        var name = arrays[i].indicator == '0'?arrays[i].name + '▲':arrays[i].indicator == '1'?arrays[i].name + '★':arrays[i].name
                                        var arr = {
                                            "id":arrays[i].id,
                                            "parent":arrays[i].parentId == '0'?"#":arrays[i].parentId,
                                            "text":name
                                        }
                                        jsonarray.push(arr);
                                        idData.unshift({'par': arrays[i].parentId == '0'?"#":arrays[i].parentId,'data':{ 'id' :  arrays[i].id ,'text' :  arrays[i].name},'sort': arrays[i].id });
                                    }
                                    operData = operData.concat(jsonarray);
                                }
                            });
                            callback.call(this, jsonarray);
                        }
                    },
                    "checkbox" : {
                        "keep_selected_style" : false,
                    },
                    "plugins" : [ "state",'types','themes','contextmenu' ],
                    'state': {
                        "opened":true,
                    }
                });
        }

        //树左右联动
        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]);
                //父id
                var parent = ref.get_parent(obj);
                //选择节点的所有父text
                var path = ref.get_path(sel[i]);
                var node = obj;
                addData.unshift({'par': parent,'data':{ 'id' :  obj.id ,'text' :  obj.text},'sort': obj.id});
                //获取所选节点全路径节点
                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},'sort': nodeJson.id});
                }
            }
            //加入右侧前一次的信息
            sumData = sumData.concat(idData);
            //加入左侧选择信息
            sumData = sumData.concat(addData);
            //排序
            sumData.sort(function(a,b) {
                return a.sort - b.sort
            })
			//删除所有节点重新排序渲染
            $('#'+treeTo).jstree(true).delete_node(operData);
            //添加被选择的节点及其父节点
            for(var i = 0 ; i < sumData.length;i++){
                addOper(treeTo,sumData[i].par,sumData[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;
            }
            ref.create_node(parent, data,"last");
        };
        //清空
		function clearOper() {
		    //清空
            sumData = [];
            idData = [];
            //销毁
            $.jstree.destroy ();
			//再次渲染
            initUeAllOper('1');
            //再次渲染一个空的绑定指标树
            $("#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({
                    'core' : {
                        "themes" : {
                            "responsive": true,
                            "dots": false,//是否显示树连接线
                            "ellipsis": true,//节点名过长时是否显示省略号
                            "icons": false
                        },
                        "check_callback" : true,
                        'data' : function (obj, callback) {
                            var jsonstr="[]";
                            var jsonarray = eval('('+jsonstr+')');
                            callback.call(this, jsonarray);
                        }
                    },
                    "checkbox" : {
                        "keep_selected_style" : false,
                    },
                    "plugins" : [ "state",'types','themes','contextmenu' ],
                    'state': {
                        "opened":true,
                    }
                });
        }
        //设置指标
        function bindIndex(){
            var indexIds = '';
            if(!sumData.length) {
                jp.error("请设置指标！")
                return false;
            }
            var obj = {};
            var objData = sumData.reduce(function(item, next) {
				obj[next.data.id] ? '' : obj[next.data.id] = true && item.push(next);
				return item;
			},[])
            for(var i in objData) {
                indexIds += objData[i].data.id + ',';
            }
            $.ajax({
                url:"${ctx}/paevaluationindex/paEvaluationIndex/insertEvaluation?paAnnualMissionId=${id}&indexIds="+indexIds+"&indicatorType=${indicatorType}",
                method:"get",
                contentType: "application/json;charset-UTF-8",
                dataType:"json",
                success:function(data,textStatus,jqXHR) {
                    if(data.success) {
                        jp.getParent().refresh();
                        jp.success(data.msg);
                        var dialogIndex = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                        parent.layer.close(dialogIndex);
                    }
                }
            })
        }

	</script>
</head>
<body style="background-color: #ffffff;">
<style>
    .contain {margin: 25px 25px 25px 25px;}
    .index {border: 1px solid #ddd;overflow-y:auto;border-radius: 4px;width: 375px;height: 575px;}
    .index-left {float: left}
    .index-right {float: right}
    .index-text {font-size: 15px;margin: 7px 0px 7px 7px;}
    .index-text-a {font-size: 13px;text-decoration:underline;float: right;margin-right: 5px;margin-top: 2px;}
    .index-border {border-top: 1px solid #ddd;}
    .index-add {width: 110px;height: 440px;display: inline-block}
    .index-add-btn {margin: 271px 0px 271px 24px}
    .index-tree {margin:10px 0px 0px 10px;}
</style>
<div class="contain">
	<div class="index index-left">
		<div class="index-text">请选择指标</div>
		<div class="index-border">
            <div class="demo-transfer index-tree" id="ue_all_oper"></div>
        </div>
	</div>
	<div class="index-add">
        <span class="btn btn-default index-add-btn" onclick="removeOper('ue_all_oper','ue_checked_oper')">添加>></span>
	</div>
	<div class="index index-right">
		<div class="index-text">已选指标
			<a class="index-text-a" onclick="clearOper('ue_all_oper')">全部清空</a>
		</div>
		<div class="index-border">
            <div class="demo-transfer index-tree" id="ue_checked_oper"></div>
        </div>
	</div>
</div>
</body>
</html>
小代码大作家
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue开发实战二十四：左侧树与右侧列表勾选关联的实现
博主逸尘
09-23 2334
Vue中el-tree与el-table勾选关联的实现
在一个页面实现两个zTree联动的方法
11-28
简介 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标（依靠css） 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 引言 今天开发的时候，因为需求需要实现同一个页面左右两棵树，如果选中某一棵树的某一
vue2 实现树形选择器（el-tree/el-select）绝对有效！！！
最新发布
weixin_56075623的博客
06-20 906
说明:必须要有两个opitons，选择器组件内部没有options，会导致无法渲染内容。第一个options的作用是因为，当selectArr为空数组的时候，option节点在html中没有生成，会导致下拉框会显示无。
用客户端JS实现微软TreeView控件父子节点联选!
12-31 94
说明 TreeView控件应该说是比较常用的一个东东了.别人提供的JSTree实现(如Yahoo UI lIb) 都有这样或那样的问题而微软的TreeView控件虽然用起来方便,可是一直感觉也不是很理想.比如,无实通过属性设定为是否父子节点联选(既,选中父节点就选中所有子节点或孙节点,反之,全部取消选择了子节点父节点也要被取消选择).以前1.1的时候,可以用更改Ht...
element ui 两棵树tree 关联公共部分
m0_37343874的博客
07-13 676
如图所示：红框内的是公共数据，我们想要实现的是，左边树的节点被选择，右边也会选择上，选择右边，左边也会被选择。 思路：element ui 文档中没有找到实现这种效果的方法，我们可以把两边的tree分别拆分成两棵树----左边的tree=commonTree+自己独有部分；右边tree=commonTree+自己独有部分。实现： 左边： 右边：.........
elementui-树形控件实现 两棵树的联动，两棵树有相同的id节点时节点的状态保持一致
ating_ing的博客
01-11 893
elementui-树形控件实现 两棵树的联动，两棵树有相同的id节点时节点的状态保持一致
element ui两棵树互相关联公共部分
m0_37343874的博客
06-29 464
element ui中两棵树关联公共部分，点击一棵树的公共部分的数据，另一棵树也会被选上，取消后 另一棵树也会被取消，如下图所示 实现代码： html部分： js部分：
JS 两树交集
码小余の博客
07-12 497
求两个树形结构的交集思路是遍历递归第一棵树，在遍历内部再次遍历递归第二棵树，添加层级，用层级和id进行比较，如果相等就添加不用删除的标记然后在下面在遍历递归tree2，删除没有exist的节点，完成 emm，不会写，就写成这样了，有大佬会写的帮忙看看有没有其他的写法~...
使用jstree自定义下拉菜单树组件
热门推荐
走过路过
08-14 2万+
开发背景：         每次都很啰嗦，要先陈述一下开发背景。不过，这样做的目的一来是让自己能够快速回忆起自己的实战背景，二来是类似引子，能够阐述这样处理的实际用途，不仅仅是用于理论学习。         今天记录下的是前几天开发的一个下拉框组件，该组件内容是一棵菜单树。本来系统开发的时候使用的是BUI，BUI本身也有下拉树组件。只是因为我们使用的BUI版本比较早，今年的版本和去年的在某些方...
精通JS脚本之ExtJS框架.part2.rar
03-02
10.1.1 创建一棵树 10.1.2 为树生枝展叶 10.1.3 树形的配置 10.1.4 使用TreeLoader获得数据 10.1.5 读取本地JSON数据 10.2 树的事件 10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 ...
Cat-Tree-Select 基于Vue+Element的树选择器
究极死胖兽的博客
08-20 1024
Cat-Tree-Select 基于Vue+Element的树选择器 基于 Element 的Vue 组件(Vue.js 2.x) cat-tree-select Github 地址 前言 本人在最近的开发工作中常需要用到树选择器 目前最好用的基于 Vue 的树选择器应该是 VueTreeselect ，但是由于个人倾向基于 Element 进行开发，而 VueTreeselect 的风格样式与 Element 不一致，且不能与 ElForm 和 ElFormItem 联动。所以本人参考了其他 E
JS实现树型级联选择
08-04
用JS实现树型结构的级联选择..类似XP的资源管理器.
jquery三级联动树
05-20
用jquery做的三级联动的树，里面详细写了一个实际的省市县的三级联动。比较简单的内容哦。
Tree View树形图多级联动
01-08
树状图TreeView多级联动，点击展开收起，使用反射机制。
精通JS脚本之ExtJS框架.part1.rar
03-02
10.1.1 创建一棵树 10.1.2 为树生枝展叶 10.1.3 树形的配置 10.1.4 使用TreeLoader获得数据 10.1.5 读取本地JSON数据 10.2 树的事件 10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 ...
关于element中的el-tree和el-tag之间的联动
qq_32154641的博客
06-16 988
关于element中的el-tree和el-tag之间的联动
＜ 在element-ui中： 使用el-tree + el-table组件，联动请求用户数据表格组件 （基础版，后续可能更新） ＞
一个平平无奇的技术宅
12-13 3418
在 Vue + elementUi 开发中，实现通过树状组织机构，点击查询用户信息联动效果！ 组件较为简单，可以直接嵌入到需要使用的位置，具体操作还得看各位大佬如何使用！ 纯记录！话不多说，先上效果图！ 白嫖万岁！当然，如果有帮助，希望不要吝啬你的点赞呀！ 通过组合element-ui 中的 tree 和 table组件，实现联动效果，单选（有需要可以自己改成多选）用户信息，传出到父组件中，通过触发方法接收。
JavaScript：实现合并两棵二叉树算法(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
09-12 122
JavaScript：实现合并两棵二叉树算法(附完整源码)
element-ui中tree连动
waillyer的博客
01-29 1037
需求： 1、公共选人组件，支持坐席、组织机构等选择 2、选择部门后，自动选中部门下的所有成员 3、父节点和子节点联动，形成全选和半选状态 4、父节点（部门）未展开，不可选中 5、展开后可选，收缩后不可选（主要是未了加载请求数据） 效果 第一步 作为一个公共组件 写个组件 <div v-if="showIntercomGroup"> <el-dialog title="选择 " id="showIntercomGroupId" class="el-dialogStyle" :visibl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值