layui结合zTree写树状图

转载请注明出处：https://mp.csdn.net/postedit/88244560

树状图功能：最开始加载父级，在点击某个父节点时异步加载对应的子节点

在要求页面兼容ie8的情况下我选择的layui作为我的后台管理页面框架，但是layui对树状图的支持并不算太好，这里引入zTree作为补充。下面用到的一些js和css请到对应的官网下载首先看前端jsp的页面：

org.jsp:页面用了表格，引入了一个单独的树状图页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!--在ie8浏览器里面有些样式会乱，引用谷歌的一个插件--><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>机构管理</title><link rel="stylesheet" href="../statics/layui/css/layui.css" media="all"><script src="../statics/layui/layui.js"></script><style>body{margin: 10px;}.demo-carousel{height: 200px; line-height: 200px; text-align: center;}</style>
</head>
<body>
<!-- 兼容ie8，加在body里面--><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><div class="layui-row"><div class="layui-col-md3"><%@include file="orgTree.jsp"  %> </div><div class="layui-col-md9"><table class="layui-hide" id="demo" lay-filter="test"></table></div></div>
<script src="../statics/js/organization.js"></script>
</body>
</html>

organization.js:


layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){var laydate = layui.laydate //日期,laypage = layui.laypage //分页,layer = layui.layer //弹层,table = layui.table //表格,carousel = layui.carousel //轮播,upload = layui.upload //上传,element = layui.element //元素操作,slider = layui.slider //滑块,$ = layui.jquery//监听Tab切换element.on('tab(demo)', function(data){layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {tips: 1});});//执行一个 table 实例table.render({elem: '#demo',height: 420,url: '/mvc-demo/org/findorglist' //数据接口,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,title: '机构表',page: true //开启分页//,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档,totalRow: false //开启合计行,cols: [[ //表头{type: 'checkbox', fixed: 'left'},{field: 'id', title: 'ID', sort: true, fixed: 'left', totalRowText: '合计：'},{field: 'orgId', title: '机构号', },{field: 'orgName', title: '机构',sort: true},{field: 'regional', title: '所属地区', sort: true},{field: 'superior', title: '上级机构', sort: true, totalRow: true},{field: 'city', title: '城市'} /*  ,{field: 'sign', title: '待定', width: 200},{field: 'classify', title: '待定', width: 100},{field: 'wealth', title: '待定', width: 135, sort: true, totalRow: true} *//* ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}*/]]});//监听头工具栏事件table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data; //获取选中的数据switch(obj.event){case 'add':layer.msg('添加');var data = checkStatus.data;
//      location.href = '../ui/people/addPeople.jsp';layer.open({type : 2,title: "增加机构",area: [ '600px', '500px'],content : '../ui/addOrg.jsp',shade : '0',});break;case 'update':if(data.length === 0){layer.msg('请选择一行');} else if(data.length > 1){layer.msg('只能同时编辑一个');} else {layer.alert('编辑 [id]：'+ checkStatus.data[0].id);layer.open({type: 2,title:"修改机构",area: ['60%','80%'],content: '../ui/modifyOrg.jsp',shade : '0',success: function(layero,index){var idInput = $("#peopleId",layero.find("iframe")[0].contentWindow.cocument);idInput.attr("value",id);alert($("#peopleId").val());},});}break;case 'delete':if(data.length === 0){layer.msg('请选择一行');} else {layer.msg('删除');}break;};});//监听行工具事件table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data //获得当前行数据,layEvent = obj.event; //获得 lay-event 对应的值if(layEvent === 'detail'){layer.msg('查看操作');} else if(layEvent === 'del'){layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构layer.close(index);//向服务端发送删除指令});} else if(layEvent === 'edit'){layer.msg('编辑操作');}});});

orgTree.jsp：树状图页面

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<script type="text/javascript" src="../statics/zTree/js/jquery-1.4.4.min.js"></script>
<link rel="stylesheet" href="../statics/zTree/css/demo.css" type="text/css">
<link rel="stylesheet" href="../statics/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../statics/zTree/js/jquery.ztree.all.min.js"></script>
<div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul>
</div>
<script type="text/javascript" src="../statics/js/orgTree.js"></script>

orgTree.js:树状图js


layui.use(['layer','tree'], function(){tree = layui.tree    //树状图,layer = layui.layer //弹层var setting = {async: {enable: true,//初始化树状图的urlurl:"/mvc-demo/org/tree",//异步加载时需要自动提交父节点属性的参数//autoParam:["id", "name=n", "level=lv"],       autoParam:["id"]},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}}};$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting);});});

后台控制器：表格的数据写死了，树状图根据传进来的id作为父类id查找集合

package com.mvc.demo.controller;import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import com.alibaba.fastjson.JSONArray;
import com.mvc.demo.pojo.Organization;
import com.mvc.demo.pojo.Tree;
import com.mvc.demo.service.ITreeService;@Controller
@RequestMapping("/org")
public class OrgController {@Autowiredprivate ITreeService treeService;@RequestMapping(value = "/findorglist")@ResponseBodypublic Object findOrgs(@RequestParam int page, @RequestParam int limit) {HashMap<String, Object> map = new HashMap<String, Object>();List<Organization> orgList = new ArrayList<Organization>();Organization org = null;for (int i = 1; i <= 100; i++) {org = new Organization();org.setId(i);org.setOrgId("orgID" + i);org.setOrgName("机构名" + i);org.setRegional("广东" + i);org.setSuperior("上级机构" + i);org.setCity("深圳" + i);orgList.add(org);}List<Organization> pageList = new ArrayList<Organization>();int index = ((page - 1) * limit);int end = page * limit - 1;for (int i = index; i <= end; i++) {org = orgList.get(i);pageList.add(org);}map.put("code", "0");map.put("msg", "");map.put("count", orgList.size());map.put("data", pageList);return map;}@RequestMapping( value = "/tree", produces = {"text/json;charset=UTF-8"})@ResponseBodypublic  String getTree(Integer id) throws SQLException {List<Tree> list=new ArrayList<Tree>();list = treeService.findListByPid(id);return JSONArray.toJSONString(list);}}

后台数据：isParent表示是否是父节点，设置为true页面会显示成文件夹

USE [test]
GO
/****** Object:  Table [dbo].[tree]    Script Date: 2019/3/6 11:27:49 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[tree]([id] [int] NULL,[pid] [int] NULL,[NAME] [varchar](100) NULL,[isParent] [varchar](100) NULL
) ON [PRIMARY]GO
SET ANSI_PADDING OFF
GO
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (1, 0, N'清华大学', N'true')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (2, 1, N'软件工程学院', N'true')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (3, 1, N'国际贸易学院', N'true')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (4, 1, N'土木工程学院', N'false')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (5, 1, N'机电学院', N'false')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (6, 2, N'软件测试专业', N'true')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (7, 2, N'游戏开发专业', N'false')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (8, 6, N'C001班', N'false')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (9, 6, N'C002班', N'false')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (10, 3, N'对外贸易专业', N'true')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (11, 10, N'D001班', N'false')
INSERT [dbo].[tree] ([id], [pid], [NAME], [isParent]) VALUES (12, 10, N'D002班', N'false')

layui结合zTree写树状图相关推荐

ztree插件树状图
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年6月27日树状图不知道大家有没有做过,要不是做项目,项目中有这个需求,我也没有那么快能接触到这过功能,刚开始的时候对这个功能真的一脸懵 ...
树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
zTree（二）树状图下拉框
需求添加.修改终端需要选择组织,组织是多级架构(树状图显示). 思路 1.因为下拉框需要树状图显示,所以排除使用select做下拉框,改用input 模拟下拉框 2.树状图采用zTree插件开工 ...
Tree树状图的动态增删查改（上）生成树状图
一.刚学习项目里就有使用到树状图这个功能,树状图这个功能是要用到插件才能做的,我目前发现有两个插件的样式是比较好看的,一个是Layui里面自带的树组件,不过它的文档写的挺少的,而且看不懂:另一个是jq ...
计算机硬件结构中负责识别,计算机硬件基本结构树状图
<计算机硬件基本结构树状图>由会员分享,可在线阅读,更多相关<计算机硬件基本结构树状图(2页珍藏版)>请在人人文库网上搜索. 1.计算机硬件基本结构计算机的5个基本组成部分:运 ...
linux 树状结构图,linux下tree指令的用法, 树状图列出目录, 树状图逐级列出目录...
tree命令,主要功能是创建文件列表,将所有文件以树的形式列出来 linux下的tree就比较强大了,但一般系统并不自带这个命令,需要手动下载安装, 安装 sudo apt install tree ...
linux 树状目录代码,Linux tree - 以树状图列出目录的内容
用途说明 tree命令以树状图列出目录的内容(list contents of directories in a tree-like format.).通常在写文档时需要列一下文件目录结构,这个时候t ...
如何在 LaTeX 中画一个树状图（使用tikz和tikz-qtree包中的宏绘制树、森林、二叉树）
简单介绍在计算机相关的文章中,树状图是最常见的几种图之一.树状图经常被用来用来演示结构.层次.算法等内容.而二叉树是最基础的树状图之一,掌握二叉树的画法就可以用图像展示一些算法或者数据结构了. 在 ...
Plotly.js使用详细介绍（折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图）
目录 0 写在前面 1 HTML代码 2 折线图 2.1 基本折线图 2.2 复杂折线图 2.2.1 轨迹 2.2.2 布局 3 饼状图 3.1 基本饼状图 3.2 饼图子图 3.3 甜甜圈图 4 点 ...
Java树状图展示的实现
Java树状图展示的实现在项目中经常会遇到将数据以树状图的形式展现出来,如图: 有时候不仅要构建树结构,还要计算每个节点拥有的成员数量. 由于我们不能确定树的大小和层级就不能用常规的方法进行展示,我 ...

layui结合zTree写树状图

layui结合zTree写树状图相关推荐

最新文章

热门文章