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="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib uri="/priveliege" prefix="privilege" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表格操作 - layui</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/src/css/layui.css"> <style> body{padding: 20px; /*overflow-y: scroll;*/} </style> </head> <body> <table id="userTable" lay-filter="test"></table> <script type="text/html" id="barDemo"> <div> <privilege:operation operationId="10004" clazz="layui-btn layui-btn-xs" onClick="updateUserDialog()" name="修改" iconCls="icon-edit" layEvent="edit" ></privilege:operation> <privilege:operation operationId="10018" clazz="layui-btn layui-btn-danger layui-btn-xs" onClick="" name="删除" iconCls="icon-remove" layEvent="del"></privilege:operation> </div> </script> <script src="${pageContext.request.contextPath}/layui/src/layui.js" charset="utf-8"></script> <script src="${pageContext.request.contextPath}/common/js/jquery-1.12.3.js" charset="utf-8"></script> <!-- 需要弹出的修改和添加员工界面 --> <div class="layui-row" id="popUpdateTest" style="display:none;"> <div class="layui-col-md10"> <form class="layui-form" lay-filter="formTestFilter" id="addAndUpdateEmployeeForm"> <div class="layui-form-item"> <label class="layui-form-label">用户名：</label> <div class="layui-input-inline"> <input type="text" name="userName" class="layui-input"> </div> <label class="layui-form-label">密码：</label> <div class="layui-input-inline"> <input type="text" name="password" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">角色：</label> <div class="layui-input-inline"> <input type="text" name="roleName" class="layui-input"> </div> <div class="layui-input-inline"> <button type="button" onclick="selectRole()" class="layui-btn layui-btn-normal">角色名称</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">备注：</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" class="layui-textarea" name="userDescription"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-normal">提交</button> </div> </div> </form> </div> </div> </body>2.渲染table数据表格
<script charset="utf-8" > var tableIns; var popForm; layui.use(["form","table"], function(){ var table = layui.table; var form = layui.form; popForm=layui.form; //方法级别渲染 //添加返回值，目的为了“重载”。 tableIns = table.render({ elem: '#userTable' ,height: 450 ,url: '${pageContext.request.contextPath}/cacUser/userList.do' ,method: 'post' ,request: { pageName: 'curr' //页码的参数名称，默认：page ,limitName: 'limit' //每页数据量的参数名，默认：limit } ,page:true ,id: 'testReload' ,limit: 5 ,limits:[5,10,15,20,50]//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。 ,toolbar: '#toolbarDemo' ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'userName', title:'用户名', width:150, edit: 'text'} ,{field:'password', title:'密码', width:150} ,{field:'roleName', title:'用户角色', width:150, edit: 'text', sort: true} ,{field:'userDescription', title:'备注', width:150} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); //搜索查询 var $ = layui.$, active = { reload: function(){ var userName = $('#userName'); var roleId = $('#roleId option:selected'); //执行重载 //testReload为table 的id标识 table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { userName: userName.val() ,roleId: roleId.val() } }); } }; $('.layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); 3.监听点击事件
//监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; //formData = data; if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.open({ //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） type:1, title:"修改用户信息", area: ['70%','70%'], content:$("#popUpdateTest").html() }); setFormValue(data);//动态向表单赋值 } }); 4.动态向表单添加数据
function setFormValue(data){ popForm.val("formTestFilter", { "userName":data.userName ,"password":data.password ,"roleName":data.roleName ,"userDescription":data.userDescription }); popForm.render(null,'formTestFilter') } 