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')
}