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 ...
随机推荐
- ViewpageAdapter
import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory; ...
- A New Function（LightOJ 1098）积性函数前缀和的应用
题意:要求对于1~n,每个数的约数(不包括1和其本身)的和. 题解:由于题目数据有2*10^9之大,因而不能直接暴力.需要考虑积性函数的特性,由于必定有重复的约数出现,因而可以对重复约数所在的区间进行 ...
- 全志A33 lichee 开发板 Linux中断编程原理说明
开发平台 * 芯灵思SinlinxA33开发板 淘宝店铺: https://sinlinx.taobao.com/ 嵌入式linux 开发板交流 QQ:641395230 本节实验目标实现按键触发中断 ...
- 数字证书的理解以及自建CA机构颁发证书
一.理解什么是数字证书 http://www.cnblogs.com/JeffreySun/archive/2010/06/24/1627247.html 理解数字证书等概念,无数次想好好看 ...
- cpgf如何实现lua script binding的？
Lib: https://github.com/cpgf/cpgf/tree/master 代码 以下是operator的实现函数 int UserData_operator(lua_State * ...
- Delphi XE5 Android 调用手机震动
uses Androidapi.JNI.Os, Androidapi.JNIBridge; function GetVibratorArray(const AIntArr: array of Int6 ...
- 虚拟空间，malloc
一,内存空间分布图 所以,mmap其实和堆一样,实际上可以说他们都是动态内存分配,但是严格来说mmap区域并不属于堆区,反而和堆区会争用虚拟地址空间. 这里要提到一个很重要的概念,内存的延迟分配,只有 ...
- string formating字符串格式化，function函数，group组，recursion递归，练习
# -*- coding: UTF-8 -*- msg = 'i am {} my hobby is {}'.format('lhf',18) print(msg) msg1 = 'i am %s m ...
- 阿里轻量应用服务器 Tomcat 注意的地方 Unsupported major.minor version 52.0(unable to load class
本地编译工程,提交到远程服务其的tomcat上报这个错 Unsupported major.minor version 52.0(unable to load class com.cl.busines ...
- 为嵌入式mplayer移植添加ALSA音频驱动（全志V3s荔枝派zero）
首先准备mplayer和alsa_lib,我的是bulidroot添加后编译自动下载的,版本分别是alsa-lib-1.1.4.1和mplayer-1.3.0. 首先编译alsa_lib: ./con ...