方法级渲染表格
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<meta content="text/html" charset="utf-8">
<link rel="stylesheet" href="${APP_PATH}/static/layui-v2.5.6/css/layui.css" media="all"/>
<body>
<div class="layui-fluid">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
<button class="layui-btn" onclick="openAdd()"><i class="layui-icon"></i>添加</button>
<button class="layui-btn" onclick="reload()"><i class="layui-icon"></i>重载表格</button>
</div>
<div class="layui-card-body">
<table id="tableId" class="layui-table layui-form" lay-filter="tableFilter"></table>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/static/layui-v2.5.6/layui.js"></script>
<script type="text/html" id="toobar">
<a class="layui-btn layui-btn-xs layui-hide" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
var public_closeTimeout = 1000;// 关闭窗口时间
var public_closeTimeout_error = 2000;// 关闭窗口时间
var public_shade = 0.3;// 遮罩
var public_anim = 3;// 动画模式
var form, table, layer, element, layedit, laydate, upload, colorpicker;
layui.use(['element', 'form', 'layedit', 'laydate', 'upload', 'colorpicker', 'table', 'layer'], function () {
form = layui.form;
table = layui.table;
layer = layui.layer;
element = layui.element;
layedit = layui.layedit;
laydate = layui.laydate;
upload = layui.upload;
colorpicker = layui.colorpicker;
table.render({
elem: '#tableId'
, url: '${APP_PATH}/student/datagrid'
, method: 'POST' //方式
, page: true //是否开启分页
, limits: [10, 20, 30, 60, 90, 100]
, limit: 10 //默认采用20
, cellMinWidth: 120
, even: true //开启隔行背景
, id: 'reloadId'
, done: function (res, curr, count) {
console.log("=====加载后回调");
console.log(res);
//layer.close(index);//关闭
}
, cols: [[ //标题栏
//{ checkbox: false }
{field: 'id', title: 'ID', 80}
, {field: 'student_id', title: 'student_id', 120}
, {field: 'name', title: 'name', 120}
, {field: 'age', title: 'age', 120}
, {field: 'sex', title: 'sex', 120}
, {field: 'birthday', title: 'birthday', 120}
// , {field: 'CompanyName', title: '联系人公司', 120}
// , {field: 'AddDate', title: '留言日期', 120}
, {fixed: 'right', title: '操作', align: 'center', toolbar: '#toobar', 200}
]]
});
//监听工具条
table.on('tool(tableFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
console.log("获得当前行数据 ==");
console.log(data);
console.log("layEvent==" + layEvent);
if (layEvent === 'detail') {
} else if (layEvent === 'del') {
openDelete(tr.id);
} else if (layEvent === 'edit') {
openEdit(data);
}
});
});//layui.use end
function openAdd() {
layer.open({
type: 2,
title: '新增',
shadeClose: false,//点击遮罩关闭
anim: public_anim,
btnAlign: 'c',
shade: public_shade,//是否有遮罩，可以设置成false
maxmin: true, //开启最大化最小化按钮
area: ['800px', '600px'],
//area: ['100%', '100%'],
boolean: true,
content: ['${APP_PATH}/student/add', 'yes'], //iframe的url，no代表不显示滚动条
success: function (layero, lockIndex) {
var body = layer.getChildFrame('body', lockIndex);
//绑定解锁按钮的点击事件
body.find('button#close').on('click', function () {
layer.close(lockIndex);
location.reload();//刷新
});
}
});
}
function openEdit(data) {
layer.open({
type: 2,
title: '修改',
shadeClose: false,//点击遮罩关闭
anim: public_anim,
btnAlign: 'c',
shade: public_shade,//是否有遮罩，可以设置成false
maxmin: true, //开启最大化最小化按钮
//area: ['100%', '100%'],
area: ['800px', '600px'],
boolean: true,
content: ['${APP_PATH}/student/edit?obj=' + encodeURIComponent(JSON.stringify(data)), 'yes'], //iframe的url，no代表不显示滚动条
success: function (layero, lockIndex) {
var body = layer.getChildFrame('body', lockIndex);
body.find('button#close').on('click', function () { //绑定解锁按钮的点击事件
layer.close(lockIndex);
location.reload();//刷新
});
}
});
}
function openDelete(id) {
layer.open({
title: '确认删除' //显示标题栏
, closeBtn: false
, area: '300px;'
, shade: 0.5
, id: 'LAY_layuipro' //设定一个id，防止重复弹出
, btn: ['删除', '关闭']
, content: '您是否要删除当前选中的记录？'
, success: function (layero) {
var btn = layero.find('.layui-layer-btn');
btn.css('text-align', 'center');//居中
btn.find('.layui-layer-btn0').on('click', function () {
var loadindex = layer.load(1);//开启进度条
layer.msg("删除成功", {icon: 1, time: 1000});
location.reload();//刷新
return false;
$.ajax({
url: '${APP_PATH}/student/delete',
data: {id: id},
type: 'POST',//默认以get提交，以get提交如果是中文后台会出现乱码
dataType: 'json',
success: function (obj) {
console.log(obj);
layer.close(loadindex);//关闭进程对话框
if (obj.code == '1') {
layer.msg("成功", {icon: 1, time: 1000});
setTimeout(function () {
location.reload();//刷新
}, 1000);
} else {
layer.msg(obj.msg, {icon: 2, time: 1000});
}
}
});
});
}
});
}
function reload() {
table.reload('reloadId', {
url: '${APP_PATH}/student/search'
, where: {aaa: 'xxx', bbb: 'yyy'} //设定异步数据接口的额外参数，任意设
, page: {curr: 1} //重新从第 1 页开始
}); //只重载数据
}
function execute_open(title, url, width, height) {
layer.open({
type: 2,
title: '' + title + '',
shadeClose: true,
shade: 0.8,
area: ['' + width + 'px', '' + height + 'px'],
content: '' + url + '',
});
}
</script>
</body>
</html>