layui中tree简单应用

最新推荐文章于 2024-03-30 08:54:16 发布

yjm2017

最新推荐文章于 2024-03-30 08:54:16 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： layui-tree 树形结构

本文链接：https://blog.csdn.net/sxl2017/article/details/103692658

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、项目需求：做一个组织架构一级为总队二级为中队各个中队下又分出各个小队，各小队下分支为志愿者人员--

二、直接上代码 (jsp)

PS：由于我的一级大队是确定的所以就直接写到了js中

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<% response.addHeader("x-frame-options","SAMEORIGIN");%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    
    
    <title>组织架构</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	
	<script type="text/javascript" src="<%=path %>/skin/jquery.js"></script>
	  <script type="text/javascript" src="skin/layer/layer.js"></script>
      <!--    <link rel="stylesheet" href="<%=path %>/skin/js/bootstrap.min.css" type="text/css">-->
	
	<script type="text/javascript" src="<%=path %>/skin/js/index.js"></script>
	<link rel="stylesheet" href="<%=path %>/skin/css/index.css" type="text/css">
	
	<link rel="stylesheet" href="<%=path %>/skin/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="<%=path %>/skin/layui/layui.js" charset="utf-8"></script>
	
<script type="text/javascript">	var context="<%=request.getContextPath()%>";
var gettoken = "<%=request.getSession(false).getAttribute("_token")%>"</script>
<script type="text/javascript">
$(function(){
    getdata();//获取树形
})
	

function  getdata(){
		var re=[];
		$.ajax({
		   	  //几个参数需要注意一下
		       type: "post",//方法类型
		       dataType: "json",//预期服务器返回的数据类型
		       url: context+"/zyfw/getZuzhi" ,//url
		       contentType: false,  
		       processData: false, 
		       success: function (result) {
		    	   //console.log(result);
		    	     re=result;
		       },
		       error : function(e) {
		           alert("发生未知错误！");
		       }
		   });
		
		layui.use(['tree', 'util'], function(){
			  var tree = layui.tree
			  ,layer = layui.layer
			  ,util = layui.util
			  //模拟数据1
			  ,data1 = [{ title: '滨城区科普志愿服务大队'
				        ,id: 100001
				        ,children:re
				        	}]
			//仅节点左侧图标控制收缩
			  tree.render({
			    elem: '#test2'
			    ,data: data1
			    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
			    /*,click: function(obj){
			      layer.msg(JSON.stringify(obj.data));
			    }*/
			  });
			 
			  });
	}


</script>

  </head>
  <body>
  <div class="kjjbox">
  	  <!-- 引入公共头部和左侧菜单 -->
	  <%@ include file="commentop.jsp" %>
  
  
  <!-- 右侧列表信息 -->
  <div class="rightList">
  	<div class="rightList_dqwz">当前位置：首页</div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
  				<legend style="font-size: 16px;">科普志愿者组织架构</legend>
		</fieldset>
		<div id="test2" class="demo-tree"></div>
</div>

 </div>
 </body>
</html>

<style>



.layui-tree-txt{
	text-decoration: none !important;
}



#test2{
	width:50%;
	margin:0 auto;
	margin-top:35px;
}
.jiagou{
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
	font-size: 16px;

}
.commen_zzjg{
	float:left;
	width:25%;
	font-size: 14px;
	text-align:center;
	overflow:auto;
	height:580px;
}
#dadui{
cursor: pointer;
line-height:562px;
}

#zdui,#xdui,#reny{
cursor: pointer;
}

option{
	margin-bottom:15px;
}
#zdui option:hover{
color:#0d61a1;
}
.bk{
	border:1px solid #ccc;
	padding:10px 20px;
}
.zdmc{
	border:1px solid #ccc;
	padding:10px 20px;
}
.xdmc{
	border:1px solid #ccc;
	padding:10px 20px;
	width: 90%;
    margin-left: 5%;
}
.zyzxm{
	border:1px solid #ccc;
	padding:10px 20px;
	
}
</style>

三、java后台

  /**
         * 获取组织架构
         * @param request
         * @return
        */ 
      @SuppressWarnings("unlikely-arg-type")
	  @RequestMapping(value="/getZuzhi")
      @ResponseBody
	  public List<zuzhi> getZuzhi(HttpServletRequest request) {
    	     Map  map = new HashMap();
    	     Jifen jifen = new Jifen();
    	    // List<zuzhi> resultParent = new ArrayList<zuzhi>();
    	     List<zuzhi> result = new ArrayList<zuzhi>();
      	     List<Map> zdList = zyfwService.getZhongdui(jifen);
      	    
      	     for (int i = 0; i < zdList.size(); i++) {//一级
      	    	zuzhi re =new zuzhi();
      	    	re.setId((String)zdList.get(i).get("keyName"));
      	    	re.setTitle((String)zdList.get(i).get("valueName"));
      	    	result.add(re);
			 }
      	     
      	     for (int i = 0; i < result.size(); i++) {//二级
      	    	Jifen jifen2 = new Jifen();
      	    	jifen2.setZhongdui(result.get(i).getId());
      	    	List<Map> xdList = zyfwService.hqXdListByZd(jifen2);
      	    	 List<zuzhi> result2 = new ArrayList<zuzhi>();
      	    	for (int j = 0; j < xdList.size(); j++) {
      	    		zuzhi re2 =new zuzhi();
      	    		re2.setId((String)xdList.get(j).get("xiaodui"));
      	    		re2.setTitle((String)xdList.get(j).get("xiaoduiStr"));
      	    		result2.add(re2);
				}
      	    	result.get(i).setChildren(result2);
			}
      	     
      	 for (int i = 0;i < result.size(); i++) {//i=1
      		System.out.println(result.get(i).getId());
      		if(result.get(i).getChildren() != null && 
               !"".equals(result.get(i).getChildren())) {
      			for (int j = 0; j < result.get(i).getChildren().size(); j++) {
          	    	Jifen jifen3 = new Jifen();
          	    	jifen3.setXiaodui(result.get(i).getChildren().get(j).getId());
          	    	List<Map> ryList = zyfwService.getRyByxd(jifen3);
          	    	List<zuzhi> result3 = new ArrayList<zuzhi>();
          	    	for (int k = 0; k < ryList.size(); k++) {
          	    		zuzhi re3 =new zuzhi();
          	    		re3.setId(k+"_"+(String)ryList.get(k).get("xiaodui"));
          	    		re3.setTitle((String)ryList.get(k).get("xm"));
          	    		result3.add(re3);
          	    		result.get(i).getChildren().get(j).setChildren(result3);
    				}
    			}
      		}
      		
        }  
      
      	     
	  return result;
    }

四、还有一个实体类辅助

package com.ssm.bean;

import java.util.*;
/**
 * 组织架构
 * @author Administrator
 *
 */
public class zuzhi {
	private String title;
	private String id;
	private List<zuzhi> children;
	
	
	public List<zuzhi> getChildren() {
		return children;
	}
	public void setChildren(List<zuzhi> children) {
		this.children = children;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	
	
}

五、效果

希望能对小伙伴们有所帮助QAQ

yjm2017

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui中tree简单应用

一、项目需求：做一个组织架构一级为总队二级为中队各个中队下又分出各个小队，各小队下分支为志愿者人员--二、直接上代码 (jsp)PS：由于我的一级大队是确定的所以就直接写到了js中<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request....
复制链接

扫一扫