dtree-穿梭框的使用

最新推荐文章于 2021-01-12 01:45:11 发布

野生猿

最新推荐文章于 2021-01-12 01:45:11 发布

阅读量691

点赞数

分类专栏：随笔文章标签： dtree 穿梭框 jsp中使用dtree

本文链接：https://blog.csdn.net/weixin_42113164/article/details/102581270

版权

随笔专栏收录该内容

14 篇文章 0 订阅

订阅专栏

可直接复制到jsp使用，需要引入自己目录下的layui、dtree和js，
修改 dtree.render()中的url ，url为后端方法的路径和ajax的url一样

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.alibaba.fastjson.JSONArray"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/jquery.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="/layui_ext/dtree/font/dtreefont.css">

<script type="text/javascript">

 layui.extend({
    dtree: '/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
  }).use(['dtree','layer','jquery'], function(){
    var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
    // 初始化树
    dtree.render({
	   elem: "#cskTree1",
	   url: "td/department", 
	   checkbar: true,  
	   checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only,
	   async: false,
	   load:false
	});
    
    
 // 绑定节点点击
    dtree.on("node('cskTree1')" ,function(obj){
      layer.msg(JSON.stringify(obj.param));
    });
 
   
    
    var response = {
      		/*   statusName: "code", 	//返回标识（必填）
      		  statusCode: 200, 			//返回码（必填）
      		  message: "message", 		//返回信息（必填）
      		  rootName: "data", 		//根节点名称（必填） */
      		  treeId: "nodeId", 		//节点ID（必填）
      		  //parentId: "parentId",	//父节点ID（必填）
      		  title: "context", 		//节点名称（必填）
      		  //childName: "children", 	//子节点名称（默认数据格式必填）
      		  //level: "level", 		//层级（v2.4.5_finally_beta版本之后，该属性移除）
      		  //spread: "spread", 		//节点展开状态（v2.4.5_finally_beta版本新增。true：展开，false：不展开，布尔值，非必填）
      		  //checkArr: "checkArr", 	//复选框列表（开启复选框必填，默认是json数组。）
     		  //checked: "checked", 	//是否选中（开启复选框，0-未选中，1-选中，2-半选。非必填）
      		  //type: "type", 			//复选框标记（开启复选框，从0开始。非必填）
      		};
	dtree.render({
		elem: "#cskTree2",
		data: [],
		response:response,
	});
	
	$("#csk_btn").click(function(){
		var param = dtree.getCheckbarNodesParam("cskTree1");  // 获取选中数据
		//layer.msg(JSON.stringify(param));
		if(param.length == 0) {
		  layer.msg("请选择一个节点");
		}
		var i = param.length;
			 while(i--){
			 if(param[i].basicData==1){
				 param.splice(i,1);
			 }
		 }
 		dtree.reload("cskTree2",{data:param});
 		
	});
	
	dtree.on("node('cskTree2')" ,function(obj){
	      layer.msg(JSON.stringify(obj.param));
	});
  })
  
 
</script>

 </head>
 
	<body >
		<div class="layui-fluid layui-container" >
			<div class="layui-field-box" >
				<div class="layui-row layui-col-space1" >
			  		<div class="layui-col-sm5" >
					    <div class="layui-card">
					      <div class="layui-card-header" >左边的树</div>
					      <div class="layui-card-body" >
					        <div class = "body" >
					        	<ul id="cskTree1" class="dtree" data-id="0" >din</ul>
					        </div>
					      </div>
					    </div>
				  	</div>
				  	<div class="layui-col-sm2" >
				    	<div class = "body" >
				      		<button class="layui-btn layui-btn-normal my-btn" id="csk_btn">
					    	转移到右边
					    	</button>
				    	</div>
				  	</div>
				  	<div class="layui-col-sm5" >
				    	<div class="layui-card">
				      		<div class="layui-card-header" >右边的树</div>
				      		<div class="layui-card-body" >
						        <div class="body"  >
						        	<ul id="cskTree2" class="dtree" data-id="-1" ></ul>
						        </div>
					      	</div>
					    </div>
				  	</div>
				</div>
			</div>
		</div>
	
	</body>

</html>