LayUI【基本使用】
需要的数据
{ "code": 0, "msg": "", "count": 1000, "data": [ { "id": 10010, "username": "user-10", "sex": "女", "city": "城市-10", "sign": "签名-10", "experience": 1016, "logins": 182, "wealth": 71294671, "classify": "诗人", "score": 34 } ]}index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %><!DOCTYPE html><html><head> <title> layUI</title> <c:set var="path" value="${pageContext.request.contextPath}"></c:set> <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all"> <link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css" media="all"> <script type="text/javascript" src="${path}/js/jquery.min.js"></script> <script type="text/javascript" src="${path}/layui/layui.js"></script></head><body> <h2>User 列表</h2> <hr><form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">用户名:</label> <div class="layui-input-inline" style="width: 200px;"> <input id="username" type="text" name="price_min" placeholder=" Google I/O" autocomplete="off" class="layui-input"> </div> <label class="layui-form-label">角色:</label> <div class="layui-input-inline" style="width: 360px;"> <select xm-select="roles" name="" id="roles"> <option value="-1">全部</option> </select> </div> <div class="layui-input-inline" style="width: 100px;"> <button type="button" class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button> </div> </div> </div></form> <hr> <table class="layui-table" lay-data="{id:'userTable',url:'${path}/sysUser/list', page:true,toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'print', 'exports'],even: true<%--,size: 'sm',skin:'nob'--%>}" lay-filter="userTable"> <thead> <tr> <th lay-data="{type:'checkbox'}"></th> <th lay-data="{field:'id', width:80, sort: true}">ID</th> <th lay-data="{field:'username', width:80}">用户名</th> <th lay-data="{field:'salt'}">颜值</th> <th lay-data="{field:'locked',templet:'#lockedTem'}">是否锁定</th> <th lay-data="{field:'roleString'}">所属角色</th> <th lay-data="{field:'regDate', sort: true}">注册日期</th> <th lay-data="{toolbar:'#barDemo'}">操作</th> </tr> </thead> </table><script> //加载角色 $.get("${path}/sysRole/search",function (data) { $.each(data,function () { var opt = $("<option></option>").appendTo("#roles"); opt.text(this.name).val(this.id); }); }) /*多条件查询*/ function searchData(){ layui.table.reload("userTable",{ page:{ curr : 1 }, where:{ "username":$("#username").val(), "roleIds":layui.formSelects.value('roles','valStr') } }); } //全局定义一次, 加载formSelects(下拉框) layui.config({ base: '${path}/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径 }).extend({ formSelects: 'formSelects-v4' }); //加载表格 layui.use(["table","form","formSelects"],function () { /*alert("加载完成！");*/ var table =layui.table; //监听工具栏事件 table.on('toolbar(userTable)',function (obj) { var e = obj.event; switch(e){ case "add": $.get('${path}/sysUser/form',function (str) { layer.open({ type:1, title:'添加用户', area:'1000px', content: str, /*skin:'layui-layer-molv',*/ skin:'layui-layer-lan', btn: ['确定','取消'], yes:function (index) { var params = $("#add_user_form").serialize(); $.post('${path}/sysUser/add',params,function () { layer.close(index); layer.msg('添加成功'); table.reload('userTable'); }) } }); }); break; case "batchDelete": var rows = table.checkStatus('userTable'); var data = rows.data; if(data.length == 0){ layer.msg("请选择要Delete的数据!",function(){}); return; } layer.confirm('真的要删除这么多数据嘛!',{icon:1,title:'友情提示'},function(index) { var params = ""; for(let user of data){ params = "ids=" user.id "&"; } $.post('${path}/sysUser/batchDelete',params,function () { layer.close(index); table.reload('userTable'); }); }); break; } }); //监听行工具事件 table.on("tool(userTable)",function (obj) { var data = obj.data; if(obj.event == 'edit'){//执行修改操作 $.get('${path}/sysUser/form',function (str) { layer.open({ type:1, title:'修改用户', area:'1000px', content: str, skin:'layui-layer-molv', btn: ['确定','取消'], //显示数据 success:function(){ $.get('${path}/sysUser/view',{id:data.id},function (data) { //显示修改中的数据 layui.form.val('userForm',data); var aa = new Array(); for(let role of data.roles){ aa.push(role.id); } layui.formSelects.value('roles2',aa); }) }, yes:function (index) { var params = $("#add_user_form").serialize(); $.post('${path}/sysUser/upd',params,function () { layer.close(index); layer.msg('修改成功'); table.reload('userTable'); }); } }); }); }else if(obj.event == 'del'){//delete layer.open({ time:0, title:'友情提示', content:"确定要删除该行数据吗？", shade: [0.3, '#000'], btn:['确定','取消'], yes : function () { $.post("${path}/sysUser/batchDelete",{"ids":data.id},function () { layer.msg('删除成功'); table.reload('userTable'); }); } }); } }) });</script> <%--锁定列模板 模板必须写成text/html --%><script type="text/html" id="lockedTem"> <input type="checkbox" title="锁定" {{d.locked ==1 ? 'checked':''}}></script> <%--操作—编辑与删除--%><script type="text/html" id="barDemo"> <a href="javascript:void(0);" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a> <c:if test="${per.type eq 'function' and per.percode eq 'user:delete'}"> <a href="javascript:void(0);" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a> </c:if></script> <%--工具栏--%><script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <shiro:hasPermission name="user:add"> <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button> </shiro:hasPermission> <shiro:hasPermission name="user:delete"> <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button> </shiro:hasPermission> <button class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon layui-icon-export"></i> 导出数据</button> </div></script></body></html>from.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form class="layui-form" lay-filter="userForm" id="add_user_form" action="" style="padding:15px 10px;"> <input type="hidden" name="id"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入标题" 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="password" name="password" required lay-verify="required" placeholder="请输入密码" 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="salt" required lay-verify="required" placeholder="请输入标题" 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="checkbox" name="locked" value="1" lay-skin="switch"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">用户角色</label> <div class="layui-input-block" > <select name="roleIds" id="roles_add" xm-select="roles2" xm-select-direction="down"> <option value="-1">请选择</option> </select> </div> </div> <script> layui.form.render(); $.get("${path}/sysRole/search",function(data){ $.each(data,function(){ var opt = $("<option></option>").appendTo("#roles_add"); opt.text(this.name).val(this.id); }); layui.formSelects.render(); }); </script></form></body></html> 赞 (0)