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 ...
随机推荐
- 关于LaTeX公式排版
[转载请注明出处]http://www.cnblogs.com/mashiqi 2017/10/05 1.居中括号框住多行公式 \begin{equation*} \left\{\begin{alig ...
- 《Linux内核原理与分析》第八周作业
课本:第七章 可执行程序工作原理 ELF目标文件格式 目标文件:编译器生成的文件. 目标文件的格式:out格式.COFF格式.PE(windows)格式.ELF(Linux)格式. ELF(Execu ...
- django 增加自定义权限的一个博客，讲的很详细
来自 https://www.cnblogs.com/huangxm/p/5770735.html
- C++类中一个构造函数调用另一个构造函数
class A { int a; int b; int c; public: A(int aa, int bb) : a(aa), b(bb),c(0) { cout << "a ...
- Java面向对象 第2节 Scanner 类和格式化输出printf
§Scanner 类 java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入. 1.创建 Scanner 对象的基本语法:Scanner s = ...
- USB HID设备报告描述符详解（转）
转自:http://group.ednchina.com/93/198.aspx. 参考:USB HID usage table 概述: 报告在这里意思是数据传输(data transfer),而 ...
- Linux中redis安装配置及使用详解
Linux中redis安装配置及使用详解 一. Redis基本知识 1.Redis 的数据类型 字符串 , 列表 (lists) , 集合 (sets) , 有序集合 (sorts sets) , 哈 ...
- MySql开启远程账户登陆总结
1.更改 "mysql" 数据库里的 "user" 表里的 "host" 项,从"127.0.0.1"改成"% ...
- cordova插件列表
主要来源为http://blog.csdn.net/github_39500961/article/details/76270299 1.获取当前应用的版本号 cordova plugin add c ...
- cmd下PUSHD和POPD命令使用说明
PUSHD命令保存当前目录以供 POPD 命令使用,然后改到指定的目录. PUSHD [path | ..] path 指定要成为当前目录的目录. 如果命令扩展被启用,除了一般驱动器号和路径,PUSH ...