【MapSheep】
[好记性不如烂笔头]
posts - 228,comments - 15,views - 17万
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>
posted on   (Play)  阅读(314)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

Copyright © 2025 (Play)
Powered by .NET 9.0 on Kubernetes Powered By博客园
点击右上角即可分享
微信分享提示
SQL AI 助手