LayUI简单使用
LayUI
使用方式
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/static/layui/layui.js">script>
文档
Layui 开发使用文档 - 入门指南
表格的使用
显示所有人员信息
案例
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">ANALYSToption><option value="CLERK">CLERKoption><option value="MANAGER">MANAGERoption><option value="PRESIDENT">PRESIDENToption><option value="SALESMAN">SALESMANoption>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">10option><option value="20">20option><option value="30">30option>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">ANALYSToption><option value="CLERK">CLERKoption><option value="MANAGER">MANAGERoption><option value="PRESIDENT">PRESIDENToption><option value="SALESMAN">SALESMANoption>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">10option><option value="20">20option><option value="30">30option>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*/
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 = falselet customUrl = '/custom/selectOne?customId='+customeIdvar 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}]]});
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！