LayUI
使用方式
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
文档
表格的使用
<html>
<head>
<title>显示所有人员信息</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test">
</table>
</body>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll">删除</button>
</div>
</script>
<!--按钮-->
<script type="text/html" id="bar">
<button class="layui-btn layui-btn-sm" value="update">编辑</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" value="delete">删除</button>
</script>
<script>
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
, height: 400
, url: '' //数据接口
, page: true //开启分页
, limit: 5
, limits: [5, 10, 15, 20, 25, 30]
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, cols: [
[ //表头
{field: 'empno', title: '人员编号', width: 100, sort: true}
, {field: 'ename', title: '人员姓名', width: 120}
, {field: 'job', title: '人员工作', width: 160, sort: true}
, {field: 'mgr', title: '人员上级', width: 100}
, {field: 'hiredate', title: '人员入职日期', width: 200}
, {field: 'sal', title: '人员工资', width: 120}
, {field: 'comm', title: '人员奖金', width: 120}
, {field: 'deptno', title: '人员部门', width: 120}
//添加按钮
, {field: '', title: '操作', width: 135, toolbar:"#bar"}
]]
});
});
</script>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示所有人员信息</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test">
</table>
</body>
<form class="layui-form" action="" id="saveUserForm" style="display: none;margin-right: 40px;margin-top: 20px" >
<div class="layui-form-item">
<label class="layui-form-label">人员编号</label>
<div class="layui-input-block">
<input type="text" name="empno" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员姓名</label>
<div class="layui-input-block">
<input type="text" name="ename" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员工作</label>
<div class="layui-input-block">
<select name="job" lay-verify="required">
<option value="ANALYST">ANALYST</option>
<option value="CLERK">CLERK</option>
<option value="MANAGER">MANAGER</option>
<option value="PRESIDENT">PRESIDENT</option>
<option value="SALESMAN">SALESMAN</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员上级</label>
<div class="layui-input-block">
<input type="text" name="mgr" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 无用值-->
<input type="hidden" name="hiredate" value="aaaa">
<div class="layui-form-item">
<label class="layui-form-label">人员工资</label>
<div class="layui-input-block">
<input type="text" name="sal" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员奖金</label>
<div class="layui-input-block">
<input type="text" name="comm" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员部门</label>
<div class="layui-input-block">
<select name="deptno" lay-verify="required">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="saveUserFilter">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<form class="layui-form" action="" id="updateUserForm" style="display: none;margin-right: 40px;margin-top: 20px" >
<div class="layui-form-item">
<label class="layui-form-label">人员编号</label>
<div class="layui-input-block">
<input type="text" name="empno" required readonly="readonly" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员姓名</label>
<div class="layui-input-block">
<input type="text" name="ename" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员工作</label>
<div class="layui-input-block">
<select name="job" lay-verify="required">
<option value="ANALYST">ANALYST</option>
<option value="CLERK">CLERK</option>
<option value="MANAGER">MANAGER</option>
<option value="PRESIDENT">PRESIDENT</option>
<option value="SALESMAN">SALESMAN</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员上级</label>
<div class="layui-input-block">
<input type="text" name="mgr" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 无用值-->
<input type="hidden" name="hiredate" value="aaaa">
<div class="layui-form-item">
<label class="layui-form-label">人员工资</label>
<div class="layui-input-block">
<input type="text" name="sal" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员奖金</label>
<div class="layui-input-block">
<input type="text" name="comm" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">人员部门</label>
<div class="layui-input-block">
<select name="deptno" lay-verify="required">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="updateUserFilter">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll">删除</button>
</div>
</script>
<!--按钮-->
<script type="text/html" id="bar">
<button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>
<script>
layui.use(['table','layer','jquery','form'], function () {
var table = layui.table;
var layer = layui.layer;
var $ = layui.jquery;
var form = layui.form;
//第一个实例
var myTable = table.render({
elem: '#demo'
, height: 400
, url: '/emp/findAll' //数据接口
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, page: true //开启分页
, limit: 5
, limits: [5, 10, 15, 20, 25, 30]
, cols: [
[ //表头
{type: 'checkbox', fixed: 'left'}
, {field: 'empno', title: '人员编号', width: 100, sort: true}
, {field: 'ename', title: '人员姓名', width: 120}
, {field: 'job', title: '人员工作', width: 160, sort: true}
, {field: 'mgr', title: '人员上级', width: 100}
, {field: 'hiredate', title: '人员入职日期', width: 200}
, {field: 'sal', title: '人员工资', width: 120}
, {field: 'comm', title: '人员奖金', width: 120}
, {field: 'deptno', title: '人员部门', width: 120}
//添加按钮
, {field: '', title: '操作', width: 135, toolbar: "#bar"}
]]
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data;
switch(obj.event){
case 'add':
layer.open({
title: '添加用户',
type: 1,
area: ['500px', '500px'],
content: $("#saveUserForm")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
break;
case 'delAll':
layer.confirm('真的删除行么', function(index) {
for (let i = 0; i <data.length; i++) {
$.ajax({
url: "/emp/deleteById",
type: "POST",
dataType: "JSON",
data: {empno: data[i].empno},
success: function (ret) {
if (ret.code == 0) {
//刷新表格数据
myTable.reload({});
layer.msg(ret.msg, {icon: 6});
} else {
layer.msg(ret.msg, {icon: 5});
}
}
})
}
layer.close(index);
})
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
$.ajax({
url:"/emp/deleteById",
type: "POST",
dataType:"JSON",
data:{empno:data.empno},
success:function (ret) {
if(ret.code==0){
//刷新表格数据
myTable.reload({
});
layer.msg(ret.msg,{icon: 6});
}else
{
layer.msg(ret.msg,{icon: 5});
}
}
})
layer.close(index);
});
} else if(obj.event === 'edit'){
// layer.prompt({
// formType: 2
// ,value: data.email
// }, function(value, index){
// obj.update({
// email: value
// });
// layer.close(index);
// });
layer.open({
title: '添加用户',
type: 1,
area: ['500px', '500px'],
content: $("#updateUserForm"),//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
success:function () {
// console.log(index)
//将表格值放入表单中
$("input[name=empno]").val(data.empno)
$("input[name=ename]").val(data.ename)
var $job = $("select[name=job] option");
for (let i = 0; i <$job.length ; i++) {
if ($job[i].value===data.job){
$job[i].setAttribute("selected",true)
}
}
$("input[name=mgr]").val(data.mgr)
$("input[name=sal]").val(data.sal)
$("input[name=comm]").val(data.comm)
var $deptno = $("select[name=deptno] option");
for (let i = 0; i <$deptno.length ; i++) {
if ($deptno[i].value==data.deptno){
$deptno[i].setAttribute("selected",true)
}
}
//表单重新渲染
form.render('select');
}
});
}
});
//add表单的提交
form.on('submit(saveUserFilter)', function(data){
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//提交表单数据
$.ajax({
url:"/emp/saveUser",
type: "POST",
dataType:"JSON",
data:data.field,
success:function (ret) {
if(ret.code==0){
//关闭对话框
layer.closeAll();
//刷新表格数据
myTable.reload({
page: {
curr: 1 //重新从第 1 页开始
}
});
layer.msg(ret.msg,{icon: 6});
}else
{
layer.msg(ret.msg,{icon: 5});
}
}
})
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
//update表单的提交
form.on('submit(updateUserFilter)', function(data){
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//提交表单数据
$.ajax({
url:"/emp/updateUser",
type: "POST",
dataType:"JSON",
data:data.field,
success:function (ret) {
if(ret.code==0){
//关闭对话框
layer.closeAll();
//刷新表格数据
myTable.reload({
});
layer.msg(ret.msg,{icon: 6});
}else
{
layer.msg(ret.msg,{icon: 5});
}
}
})
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
</html>
渲染
//可只渲染某个标签，重新渲染select标签
form.render('select')
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlQ5JZjL-1623324342566)(C:\Users\KILIG\AppData\Roaming\Typora\typora-user-images\image-20201215113729302.png)]
弹窗添加
layer.open({
title: '添加用户',
type: 1,
area: ['500px', '500px'],
content: $("#saveUserForm")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
删除某一行
layer.confirm('真的删除行么', function(index){
$.ajax({
url:"/emp/deleteById",
type: "POST",
dataType:"JSON",
data:{empno:data.empno},
success:function (ret) {
if(ret.code==0){
//刷新表格数据
myTable.reload({
});
layer.msg(ret.msg,{icon: 6})
}else
{
layer.msg(ret.msg,{icon: 5})
}
}
})
layer.close(index);
});
弹窗编辑表单赋值
//form为lay-filter属性值
form.val('form', {
"empno": data.empno // "name": "value"
,"ename": data.ename
,"job": data.job //下拉框也直接赋值即可
,"mgr": data.mgr
,"sal": data.sal
,"comm": data.comm
,"deptno": data.deptno
});
弹窗编辑
layer.open({
title: '添加用户',
type: 1,
area: ['500px', '500px'],
content: $("#updateUserForm"),//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
success:function () {
// console.log(index)
//将表格值放入表单中
$("input[name=empno]").val(data.empno)
$("input[name=ename]").val(data.ename)
var $job = $("select[name=job] option");
for (let i = 0; i <$job.length ; i++) {
if ($job[i].value===data.job){
$job[i].setAttribute("selected",true)
}
}
$("input[name=mgr]").val(data.mgr)
$("input[name=sal]").val(data.sal)
$("input[name=comm]").val(data.comm)
var $deptno = $("select[name=deptno] option");
for (let i = 0; i <$deptno.length ; i++) {
if ($deptno[i].value==data.deptno){
$deptno[i].setAttribute("selected",true)
}
}
//表单重新渲染
form.render('select');
}
});
删除选中行
layer.confirm('真的删除行么', function(index) {
for (let i = 0; i <data.length; i++) {
$.ajax({
url: "/emp/deleteById",
type: "POST",
dataType: "JSON",
data: {empno: data[i].empno},
success: function (ret) {
if (ret.code == 0) {
//刷新表格数据
myTable.reload({});
layer.msg(ret.msg, {icon: 6
} else {
layer.msg(ret.msg, {icon: 5
}
}
})
}
layer.close(index);
})
状态判断
if (data.status == 0){
document.getElementById("updateStatus").checked=true
}else {
document.getElementById("updateStatus").checked=false
}
后端获取表单中复选框的值
//先将data的复选框值清空
data.field.role="";
//循环获取值给data中赋值
$('input[name=role]:checked').each(function() {
data.field.role+=$(this).val()
});
每个添加或者重置表单后需要清空表单
//将表单清空
document.getElementById("addUserForm").reset();
var $input = $("input[name=role]");
for (let j = 0; j < $input.length; j++) {
$input[j].checked=false
}
表格的判断显示
, {field: 'sex', title: '性别', width: 80, templet:function (d){if (d.sex === "0"){return '男'}else {return '女'}}}
在script的type=html块中写js代码
<script type="text/html" id="userState">
{{# if (d.status === '0'){ }}
<button class="layui-btn layui-btn-sm" lay-event="state">正常</button>
{{# }else { }}
<button class="layui-btn layui-btn-sm layui-btn-disabled" lay-event="state">失效</button>
{{# } }}
树形组件
html代码
<!--树形菜单-->
<div class="layui-form-item">
<label class="layui-form-label" style="float: left">菜单权限</label>
<div style="margin-left: 120px">
<div id="updateRoleTree" class="demo-tree-more"></div>
</div>
</div>
js代码
//从后台查询菜单树格式后的数据，回显在表单中
$.ajax({
url: "/role/findAllMenu",
type: "GET",
dataType: "JSON",
success: function (list) {
//常规用法
tree.render({
elem: '#addRoleTree' //默认是点击节点可进行收缩
, data: list
, showCheckbox : true
});
}
})
LayUiTree（实体类）
类似returnBean
package com.cloudwise.trademark.entity;
import lombok.Data;
import java.io.Serializable;
import java.util.List;
/**
* @create by: IvanZ
* @description : 属性组件实体类
* @create time: 2020/12/20 1:28
* @return
*/
@Data
public class LayUiTree implements Serializable {
private String title;
private int id;
private String field;
private boolean checked;
private boolean spread;
private String url;
private List<LayUiTree> children;
}
后端Controller代码
/**
* @create by: IvanZ
* @description : 获取树形菜单数据
* @create time: 2020/12/20 1:12
* @param :
* @return java.lang.Object
*/
@GetMapping("findAllMenu")
@ResponseBody
public List<LayUiTree> findAllMenu(){
List<Menu> menus = roleService.findAllMenu();
List<LayUiTree> list = new ArrayList<>();
for (Menu menu : menus) {
if(menu.getParentId()==0){
LayUiTree tree = new LayUiTree();
tree.setId(menu.getMenuId());
tree.setTitle(menu.getMenuName());
//组件展开
//tree.setSpread(true);
tree.setChildren(getChildren(menu.getMenuId(),menus));
list.add(tree);
}
}
return list;
}
/**
* @create by: IvanZ
* @description : 递归得到孩子节点
* @create time: 2020/12/20 1:12
* @param parentId:
param menus:
* @return java.util.List<com.cloudwise.trademark.entity.LayUiTree>
*/
public List<LayUiTree> getChildren(Integer parentId,List<Menu> menus){
List<LayUiTree> list = new ArrayList<>();
for (Menu menu : menus) {
if(menu.getParentId().equals(parentId)){
LayUiTree tree = new LayUiTree();
tree.setId(menu.getMenuId());
tree.setTitle(menu.getMenuName());
//组件展开
//tree.setSpread(true);
tree.setChildren(getChildren(menu.getMenuId(),menus));
list.add(tree);
}
}
return list;
}
获取所有选中的菜单id
//获取选中的菜单id
function getChecked_list(data) {
var id = '';
$.each(data, function (index, item) {
if (id !== "") {
id = id + "," + item.id;
} else {
id = item.id;
}
var i = getChecked_list(item.children);
if (i !== "") {
id = id + "," + i;
}
})
return id;
}
//调用
var checkData = tree.getChecked('addFormMenu');
var list = getChecked_list(checkData)
点击按钮带数据跳转到另一个页面
location.href = "/visit/showCustomAndVisit?customId=" + data.customId
@GetMapping("showCustomAndVisit")
public ModelAndView showCustomAndBusiness(int customId, ModelAndView mv){
mv.addObject("customId",customId);
mv.setViewName("visit");
return mv;
}
//获取传过来的customId
var customeId = "";
customeId = [[${customId}]]+"";
if (customeId == 0){
document.getElementById("customTable").hidden = true
}else {
document.getElementById("customTable").hidden = false
let customUrl = '/custom/selectOne?customId='+customeId
var customTable = table.render({
elem: '#customTable'
, url: customUrl //数据接口
, page: false //开启分页
, cols: [
[ //表头
{field: 'customId', title: '客户ID', align: 'center', sort: true, width: 90}
, {field: 'contact', title: '联系人姓名', align: 'center', width: 120}
, {field: 'phone', title: '手机号', align: 'center', width: 140}
, {field: 'applicant', title: '申请人', align: 'center', width: 120}
, {field: 'customAddress', title: '邮寄地址', align: 'center', width: 120}
, {field: 'createBy', title: '创建人', align: 'center', width: 120}
, {field: 'createTime', title: '创建时间', align: 'center', width: 160}
, {field: 'updateBy', title: '修改人', align: 'center', width: 120}
, {field: 'updateTime', title: '修改时间', align: 'center', width: 160}
, {field: 'proxyId', title: '代理人ID', align: 'center', width: 120}
, {field: 'remark', title: '备注', align: 'center', width: 120}
]
]
});
}
7673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
