Ztree多选

最新推荐文章于 2024-05-24 16:59:14 发布

好诡异

最新推荐文章于 2024-05-24 16:59:14 发布

阅读量1k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/lovely960823/article/details/102683115

版权

记录一下Ztree的实现
效果图
在这里插入图片描述
上代码

<link rel="stylesheet" href="/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script src="/static/ztree/js/jquery.ztree.core.js"></script>
	<script src="/static/ztree/js/jquery.ztree.excheck.js"></script><!--可设置复选框-->
	<!-- layui  查看 https://www.layui.com/alone.html 即可 -->
	<script src="/static/layui/layer-v3.1.1/layer/layer.js" type="text/javascript" ></script>
		<script type="text/javascript">
		var arrNode=${arrNode}//树回显需要用到的数据
		var userId='${userId}';//被操作人当前id
			function createTree(url, treeId) {
				var zTree; //用于保存创建的树节点
				var setting = { //设置
					check : {//设置为复选框所需要的
						enable : true,
					},
					view : {
						showLine : true, //显示辅助线
						dblClickExpand : true,
					},
					data : {
						simpleData : {
							enable : true,
							idKey : "id",
							pIdKey : "parentId",  //指定字段
							rootPId : 0
						},
						key: {
						    name: 'name'  //指定名称
						}
					}
				};
				//拿到封装好的额数据
				$.ajax({
					url : "/back/xtgl/noteData",
					data : {},
					type : "POST",
					success : function(data) {
						zTree = $.fn.zTree.init($(treeId), setting, data); //创建树
						//树回显判断  
						if(arrNode.length>0){
							for(var x=0;x<arrNode.length;x++){
								var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
								var _node = treeObj.getNodes();    //获取根节点
								var _nodes = treeObj.transformToArray(_node);   //获取所有节点
								//_nodes==data  数据格式一致，但是内容前后不一致，需要重新判断
								for(var n=0;n<_nodes.length;n++){
									if(arrNode[x]==_nodes[n].id){//找到存在的设置选择状态
							        	_nodes[n].checked=true;
							        	treeObj.updateNode(_nodes[n]);  
									}
						        }
							}
						}
					},
					error : function() {
						alert("服务器忙");
					},
					dataType : "json"
				});
			}
			
			//js调用代码获取选中的值
			$(document).ready(function() {
			    createTree("jsonData.json", "#treeDemo"); //创建
			    $("#myButton").click(function() {
			        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			        var nodes = treeObj.getCheckedNodes(true);
			        if(0 === nodes.length) {
			        	layer.alert("请选择!");
			            return;
			        }
			        var nodeNames = "";
			        var nodeIds="";
			        for(var i = 0; i < nodes.length; i++) {
			        	nodeNames += nodes[i].name + ",";
			        	nodeIds+= nodes[i].id + ",";
			        }
			        //把选中的值显示到input输入框里面
			        $('#myDataNames').val(nodeNames);
			        var nodeIds=nodeIds.substring(0,nodeIds.length-1);
			        $('#myDataIds').val(nodeIds);
			        //后台授权操作第一步，给role_user表添加数据
			        $.ajax({
						url : "/back/xtgl/grantFirst",
						data : {"userId":userId},
						type : "POST",
						success : function(data) {
							if(data>0){
								grantSecond(data);//后台授权操作第2步，给role表添加数据
							}else{
								layer.alert("服务器忙");
							}
						},
						error : function() {
							layer.alert("服务器忙");
						},
						dataType : "json"
					});
			    });
			});
			
			
			function grantSecond(ruid){
				var nodeIds=$('#myDataIds').val();
				$.ajax({
					url : "/back/xtgl/grantSecond",
					data : {"userId":userId,"nodeIds":nodeIds,"ruid":ruid},
					type : "POST",
					success : function(data) {
						if(data>0){
							layer.alert("授权成功", {
		                           icon : 1
		                           }, function() {
		                               // 可以对父窗口进行刷新 
		                               window.location.reload();
		                           });
						}
					},
					error : function() {
						layer.alert("服务器忙");
					},
					dataType : "json"
				});
			}
			
		</script>

	</head>
	<body>
	<div style="margin-left: 50px; margin-top: 10px;">
		我的选择:<input id="myDataNames" type="text" placeholder="选中的内容"  class="form-control" />
		<input id="myDataIds" type="text" placeholder="选中的内容"  class="form-control" />
		<button id="myButton" style="margin-top: 10px;">确定授权</button>
		<ul id="treeDemo" class="ztree"
			style="margin-top: 10px; width: 200px; height: 150px;">
		</ul>
	</div>

</body>
</html>

数据格式如下：

var zNodes =[
					{ id:1, pId:0, name:"河北", open:true,url:"jyy"},
					{ id:11, pId:1, name:"石家庄"},
					{ id:111, pId:11, name:"衡水"},
					{ id:112, pId:11, name:"邢台"},
					{ id:113, pId:11, name:"承德"},
					{ id:114, pId:11, name:"保定"},
					{ id:12, pId:1, name:"河南"},
					{ id:121, pId:12, name:"郑州"},
					{ id:122, pId:12, name:"郑州1"},
					{ id:123, pId:12, name:"郑州2"},
					{ id:124, pId:12, name:"郑州3"},
					{ id:13, pId:1, name:"武汉", isParent:true},
					{ id:2, pId:0, name:"四川"},
					{ id:21, pId:2, name:"成都", open:true},
					{ id:211, pId:21, name:"成都1"},
					{ id:212, pId:21, name:"成都2"},
					{ id:213, pId:21, name:"成都3"},
					{ id:214, pId:21, name:"成都4"},
					{ id:22, pId:2, name:"贵州"},
					{ id:221, pId:22, name:"云南白药"},
					{ id:222, pId:22, name:"云南白药1"},
					{ id:223, pId:22, name:"云南白药2"},
					{ id:224, pId:22, name:"云南白药3"},
					{ id:23, pId:2, name:"云南"},
					{ id:231, pId:23, name:"昆明"},
					{ id:232, pId:23, name:"弥勒"},
					{ id:233, pId:23, name:"西双版纳"},
					{ id:234, pId:23, name:"云南白药"},
					{ id:3, pId:0, name:"深圳", isParent:true}
				];

真实可用
附上测试专用网址 http://jsrun.net/iibKp/edit

好诡异

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ztree多选

记录一下Ztree的实现效果图上代码<link rel="stylesheet" href="/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script src="/static/ztree/js/jquery.ztree.core.js"></script> <s...
复制链接

扫一扫