layui-tree创建下拉树型选项框
1.简介
也许你对树菜单再熟悉不过了，然而你仍有可能更青睐layui的tree，它也许比以往你知道的任何一个类似的组件都更轻量、简单，你在享受许多功能的同时，甚至不用去记太多的参数。
另外，最大的重点在于，她在UI上完全遵循于当下主流的风格，并且具备高度可扩展性，会与你的许多页面非常融洽的并存。
2.制作如下案例
步骤1.编写html
<div class="layui-inline input-width" style="width: 450px;">
<label class="layui-form-label"><span class="fcred">*</span>上级菜单:</label>
<div class="layui-input-inline">
<div class="layui-unselect layui-form-select downpanel">
<div class="layui-select-title" align="center">
<span class="layui-input layui-unselect" id="treeclass" style="width: 269px;">--请选择--</span>
<input id="pid" type="hidden" name="selectID" value="0">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="classtree"></ul>
</dd>
</dl>
</div>
</div>
</div>
步骤2.初始话树与加载数据
layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
var $ = layui.jquery, tree = layui.tree;
loadMenuTree(tree);
$(".downpanel").on("click", ".layui-select-title", function (e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".downpanel").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click", "dl i", function (e) {
layui.stope(e);
});
$(document).on("click", function (e) {
$(".layui-form-select").removeClass("layui-form-selected");
});
});
function loadMenuTree(tree) {
var url = "permission/menuDataLayUiTree";
var params = {};
uwillBeAsyncTrue.getdata(url, params, function (data) {
tree({
elem: "#classtree",
nodes: data,
click: function (node) {
var $select = $($(this)[0].elem).parents(".layui-form-select");
$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);
}
});
});
}
附件:
1.前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>菜单管理</title>
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/common.css">
<link rel="stylesheet" href="static/css/schoolInfo.css">
<link rel="stylesheet" href="static/css/teacherInfo.css">
<!--[if IE 8]>
<!-- <link rel="stylesheet" type="text/css" href="static/css/ie.css"/>-->
<link rel="stylesheet" type="text/css" href="static/zTree/css/zTreeStyle/zTreeStyle.css"/>
<%-- <link rel="stylesheet" type="text/css" href="static/zTree/css/demo.css"/>--%>
<style type="text/css">
.downpanel .layui-select-title span {
line-height: 38px;
} /*继承父类颜色*/
.downpanel dl dd:hover {
/* background-color: inherit;*/
}
</style>
<style type="text/css">
body {
height: 100%;
width: 100%;
background-size: cover;
margin: 0 auto;
} td {
font-size: 12px !important;
} .layui-form-checkbox span {
height: 30px;
} .layui-field-title {
border-top: 1px solid white;
} table {
width: 100% !important;
} .input-width {
width: 360px;
} .input-widthC {
width: 369px;
} </style>
</head>
<body class="content">
<div id="app">
<div class="xy-backdrop" hidden onclick="showFlashDialog()"><img src="static/images/loding.gif"></div>
<p class="p-title"></p>
<form class="layui-form row-between form">
<%--左侧--%>
<div class="form-left fl layui-form" style="width: 400px;">
<div class="b-bottom">
<%-- <p class="text-title">菜单信息</p>--%>
<div class="layui-inline search-nobor" style="margin-top: 10px;">
<p class="layui-btn layui-btn-radius bg-org box-shaow-org" lay-filter="add" id="add"
style="width: 120px;">新增</p>
</div> <div class="layui-form-item mt30">
<div class="layui-inline" style="height: 400px">
<ul id="treeDemo" class="ztree" style="margin-top: 10px; width: 200px; height: 150px;">
</ul>
</div>
</div>
</div>
</div> <%--右侧--%>
<div id="rightEditId" style="display:none;" class="form-right fl layui-form">
<p class="text-title">编辑菜单</p>
<div class="flex-start b-bottom mt30">
<div class="layui-form-item ">
<div class="layui-inline">
<label class="layui-form-label"><span class="fcred">*</span>菜单名称:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuName" type="text" name="menuName" maxlength="10" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off" placeholder="菜单名称"
class="layui-input" value="${menuUpdate.menuName}">
</div>
</div> <br/>
<br/> <div class="layui-inline input-width" style="width: 450px;">
<label class="layui-form-label"><span class="fcred">*</span>上级菜单:</label>
<div class="layui-input-inline">
<div class="layui-unselect layui-form-select downpanel">
<div class="layui-select-title" align="center">
<span class="layui-input layui-unselect" id="treeclass" style="width: 269px;">--请选择--</span>
<input id="pid" type="hidden" name="selectID" value="0">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="classtree"></ul>
</dd>
</dl>
</div>
</div>
</div> <br/>
<br/> <div class="layui-inline">
<label class="layui-form-label"><span class="fcred"></span>url地址:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuUrl" type="text" name="menuUrl" maxlength="30" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off"
placeholder="url地址:(选填)"
class="layui-input" value="${menuUpdate.menuUrl}">
</div>
</div> <br/>
<br/> <div class="layui-inline">
<label class="layui-form-label"><span class="fcred"></span>排序:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuOrder" type="text" name="menuOrder" maxlength="3" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off"
placeholder="排序:(选填)"
class="layui-input" value="${menuUpdate.menuOrder}" oninput="value=value.replace(/[^\d]/g,'')" >
</div>
</div> <br/>
<br/> <div class="layui-inline">
<label class="layui-form-label"><span class="fcred"></span>图标地址:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuIcon" type="text" name="menuIcon" maxlength="10" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off"
placeholder="图标地址:(选填)"
class="layui-input" value="${menuUpdate.menuIcon}">
</div>
</div> <br/>
<br/> </div>
</div> <!--修改信息-->
<input id="id" name="id" value="" hidden/>
<%-- <input id="pid" value="" hidden>--%>
<input id="type" name="type" value="" hidden/>
<div class="layui-form-item text-center">
<p id="myButton" type="submit"
class="layui-btn layui-btn-radius bg-org box-shaow-org wh135px" lay-submit=""
lay-filter="demoRole">保存
</p>
</div>
</div>
</form> </div>
<script src="static/layui/layui.js"></script>
<script src="static/js/jquery-1.8.3.js"></script>
<script src="static/js/public.js"></script>
<script src="static/js/jquery.form.js"></script>
<script type="text/javascript" src="static/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="static/zTree/js/jquery.ztree.core.js"></script>
<%--<script type="text/javascript" src="static/zTree/js/jquery.ztree.all.min.js"></script>--%>
<%--<script type="text/javascript" src="static/js/common/menu.js"></script>--%>
<script src="static/zTree/js/jquery.ztree.excheck.js"></script>
<script src="static/zTree/js/jquery.ztree.exedit.js"></script> <script type="text/javascript">
var aa = {aa: 1};
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var imgAA = 0; var teacherImg, layer, form;
layui.use(['form'], function () {
form = layui.form;
layer = layui.layer; //监听提交
form.on('submit(demoRole)', function (data) { });
}); function createTree(url, params, treeId) {
var zTree; //用于保存创建的树节点
var setting = { //设置
view: {
// addHoverDom: addHoverDom, //控制是否显示添加按钮
// removeHoverDom: removeHoverDom,
showLine: true, //显示辅助线
selectedMulti: false, //设置是否允许同时选中多个节点
showLine: true, //设置是否显示节点与节点之间的连线
showTitle: false, //设置是否显示节点的title提示信息
dblClickExpand: true
},
edit: {
showRemoveBtn: true, //是否显示移除按钮
showRenameBtn: false,
enable: true, //控制是否可以拖拽
drag: {
isCopy: false, //拖拽时, 设置是否允许复制节点
isMove: false //拖拽时, 设置是否允许移动节点
}
},
callback: {
beforeRemove: zTreeBeforeRemove, //删除之前回调函数
// beforeRename: zTreeBeforeRename //修改之前回调函数
onClick: zTreeOnClick
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: 0
}
}
};
$.ajax({ //请求数据,创建树
type: 'GET',
url: url,
data: params,
dataType: "json", //返回的结果为json
success: function (data) {
zTree = $.fn.zTree.init($(treeId), setting, data); //创建树
},
error: function (data) {
alert("创建树失败!");
}
});
} function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
if ($("#diyBtn_" + treeNode.id).length > 0) return;
var editStr = "<span id='diyBtn_space_" + treeNode.id + "' > </span>"
+ "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
+ "' title='" + treeNode.name + "' onfocus='this.blur();'></button>";
aObj.append(editStr);
var btn = $("#diyBtn_" + treeNode.id);
if (btn) btn.bind("click", function () {
alert("diy Button for " + treeNode.name);
});
}
;
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();' ></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var pid = treeNode.id;
// type=1新增 type=2 修改
openEditMenu('新增菜单', pid, 1);
return false;
});
}
;
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
}
/**
* 打开右侧 编辑框
* */
$("#add").click(function () {
$("#rightEditId").show();
//清空原有的数据
$("input").val("");
$("#treeclass").html("--请选择--");
//设置 type 区分修改还是新增
$("#type").val(1); });
function openEditMenu(title, pid, type) {
layer.open({
type: 2,
title: title,
maxmin: true,
shade: 0.4,
area: ['80%', '80%'],
content: "<%=basePath%>permission/editMenu?pid=" + pid + "&type=" + type
});
$(".layui-layer-min").remove();
}
/**
* 确定删除
* */
function zTreeBeforeRemove(treeId, treeNode) {
//隐藏右侧框
$("#rightEditId").hide();
var nodeP = treeNode.isParent;
var id;
if (nodeP) {
id=-2;
}else {
id=treeNode.mid;
}
layer.confirm('确定要删除节点[' + treeNode.name + ']吗?', function (index) {
$.ajax({
type: "POST",
url: '<%=basePath%>permission/deleteMenu',
data: {"id": id, timestamp: (new Date()).valueOf()},
dataType: 'json',
cache: false,
success: function (data) {
if (data.code == '0000') {
layer.alert("删除成功", {icon: 1});
initTree();
}else if (data.code == '9998'){
layer.alert(data.msg, {icon: 2});
}else {
layer.alert("删除失败", {icon: 2});
}
}
});
}); return false;
}
/**
* 执行删除
* */
function doRemove(treeNode) { }
/**
* 点击回调函数 用于修改使用
* @param treeId
* @param treeNode
* @returns {boolean}
*/
function zTreeOnClick(event, treeId, treeNode) {
var mid = treeNode.mid;
var mpid = treeNode.mpid;
var nodeP = treeNode.getParentNode();
var nameP;
if (nodeP == null) {
nameP = '--请选择--';
} else {
nameP = nodeP.name;
}
$("#rightEditId").show();
//清空原有的数据
$("input").val("");
$("#treeclass").html("--请选择--");
//设置 type 区分修改还是新增
//数据回显 $("#id").val(mid);
$("#pid").val(mpid);
$("#menuName").val(treeNode.name);
$("#treeclass").html(nameP);
$("#menuUrl").val(treeNode.menuUrl);
$("#menuOrder").val(treeNode.menuOrder);
$("#menuIcon").val(treeNode.menuIcon);
$("#type").val(2);
}
function initTree() {
var params = {
roleId: -1
};
createTree("permission/menuData", params, "#treeDemo");//创建
}
initTree(); /*修改或新增js*/
/**
* 保存选中的数据
*/
$("#myButton").click(function () {
updateOrAddMenu();
});
function updateOrAddMenu() {
var id = $("#id").val();
var pid = $("#pid").val();
var menuName = $("#menuName").val();
var menuUrl = $("#menuUrl").val();
var menuOrder = $("#menuOrder").val();
var menuIcon = $("#menuIcon").val();
var type = $("#type").val();
var params = {
id: id,
pid: pid,
menuName: menuName,
menuUrl: menuUrl,
menuOrder: menuOrder,
menuIcon: menuIcon,
type: type
};
var url = "permission/updateOrAddMenu";
uwillBeAsyncTrue.getdata(url, params, function (data) {
var code = data.code;
if (code == '0000') {
layer.msg("操作成功");
setTimeout(function test() {
initTree();
$("#rightEditId").hide();
}, 800);
} else {
layer.alert("操作失败", {icon: 2});
}
});
} layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
var $ = layui.jquery, tree = layui.tree;
loadMenuTree(tree); $(".downpanel").on("click", ".layui-select-title", function (e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".downpanel").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click", "dl i", function (e) {
layui.stope(e);
});
$(document).on("click", function (e) {
$(".layui-form-select").removeClass("layui-form-selected");
}); }); function loadMenuTree(tree) {
var url = "permission/menuDataLayUiTree";
var params = {};
uwillBeAsyncTrue.getdata(url, params, function (data) {
tree({
elem: "#classtree",
nodes: data,
click: function (node) {
var $select = $($(this)[0].elem).parents(".layui-form-select");
$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);
}
});
});
} </script>
</body>
</html>
2.后端数据结构拼接(采用的数一次性查出数据 递归拼接)
@Override
public List<MenuLayuiTree> getMenuDataLayUiTree() {
//查询所有菜单
List<MenuLayuiTree> list = new ArrayList<>();
MenuLayuiTree menuNull = new MenuLayuiTree();
menuNull.setId("0");
menuNull.setPid("0");
menuNull.setName("一级菜单");
menuNull.setMenuLevel("1");
menuNull.setMenuOrder("0");
list.add(menuNull); List<MenuLayuiTree> menuLayuiTrees = permissionDao.queryMenuLayuiTree(); for (MenuLayuiTree menu : menuLayuiTrees) {
String menuLevel = menu.getMenuLevel();
if ("1".equals(menuLevel)) {
MenuLayuiTree method = method(menuLayuiTrees, menu);
list.add(method);
}
}
return list;
} public MenuLayuiTree method(List<MenuLayuiTree> menuList, MenuLayuiTree menu) {
List<MenuLayuiTree> childrens = new ArrayList<>();
String id = menu.getId();
for (MenuLayuiTree childrenMenu : menuList) {
String pid = childrenMenu.getPid();
if (pid.equals(id)) {
childrens.add(childrenMenu);
//查询子节点的下级节点
method(menuList, childrenMenu);
}
}
menu.setChildren(childrens);
return menu;
}
完美!
layui-tree创建下拉树型选项框的更多相关文章
- elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
- layui扩展组件，下拉树多选
项目介绍 项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-selec ...
- vue+element下拉树选择器
项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...
- EasyUI-combotree 下拉树 数据回显时默认选中
组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...
- Layui：select下拉框回显
一..需求场景分析 基于Thymeleaf模板下的layui下选框回显. 二.获得一个Layui标配的下拉框,我们需要在html中填写的内容如下 <div class="layui-f ...
- 开源框架.netCore DncZeus学习（五）下拉树的实现
千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...
- vue 模拟下拉树
// 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...
- Extjs下拉树代码测试总结
http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...
随机推荐
- 什么是node
node 编辑 锁定讨论999 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! node(结点):网络连接的端点,或两条(或多条)线路的连接点.结点可以是处理器.控制器或 ...
- Web.xml详解分析
一.首先了解项目加载的优先级 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. 最终得出的结 ...
- PythonStudy——Pycharm 小技巧
分享Pycharm中一些不为人知的技巧 工欲善其事必先利其器,Pycharm 是最受欢迎的Python开发工具,它提供的功能非常强大,是构建大型项目的理想工具之一,如果能挖掘出里面实用技巧,能带来事半 ...
- uml类图符号
符号及实例参照:http://www.blogjava.net/cnfree/archive/2012/10/30/390457.html https://blog.csdn.net/l_nan/ar ...
- Linux查看和修改文件时间
参考http://www.361way.com/chang-file-time/1632.html 一:查看时间 1:查看文件的具体时间信息 File: `probn' Size: Blocks: I ...
- ResourceBundle类的方式来读取config.properties配置文件参数值
//获取config.properties配置文件参数值 public static ResourceBundle resource = ResourceBundle.getBundle(" ...
- 单因素方差分析的SAS实现
实验内容:某城市从4个排污口取水,进行某种处理后检测大肠杆菌数量,单位面积内菌落数如下表所示,请分析各个排污口的大肠杆菌数量是否有差别. 排污口 1 2 3 4 大肠杆菌数量 9,12,7,5 20, ...
- 从头调试stm32 HID
目录: 第1部分:参照“正点原子USB虚拟串口工程移植步骤”移植ST的USB HID工程(失败了): 第2部分:在1的基础上,替换USB HID初始化代码为ST 例程中的代码,编译后根据报错调试(失败 ...
- htm5-websocket实现数据查询应用
htm5-websocket实现数据查询应用 在之前的文章讲述了使用Websocket调用远程方式的功能,在这基础我们可以简单地使用WebSocket进行数据处理方面的应用;只需要在方法执行相关的 ...
- 【剑指offer】求树中满足和为给定数字的路径
题目: 输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大的 ...