layui table 实现 渲染+分页+搜索+修改
页面效果
页面效果如下：
下面是搜索，模糊搜索
下面是修改保存，我修改了第10行，点击保存之后就会获取到修改的数据，json格式的数据
具体实现
首先说说如何实现分页
这里要插入一个分页容器 ，详细见laypage官网示例最后一个示例
<div style="padding:2rem">
<p class="layui-form">
<div class="searchTable" id="searchTable">
<div class="layui-inline">
<input class="layui-input layui-inline" id="badge" placeholder="工号" autocomplete="off" style="display:inline;width: auto;" />
<button class="layui-btn" data-type="reload" id="search">搜索button>
div>
div>
<table class="layui-table" lay-filter="test" id="test">
table>
p>
<p id="page">p>
<button class=" layui-btn layui-btn-lg " id="save">保存button>
div>
然后来获取后台数据进行渲染
ajax传入的data是搜索参数，thisData是获取当前页要显示的数据，jump这个函数会自动传进两个参数 obj.curr ：得到当前页 obj.limit ：得到每页显示的条数
表格渲染的时候直接传入分页得到的当前页数据thisData
然后就是修改，表头属性设置edit:text
下面代码中，modifyData是一个全局变量，放用户修改过的数据，
obj.data是修改行的数据，先获取到编辑列的数据，唯一标识badge是因为只要修改一次数据就会触发这个edit事件，所以获取数据需要替换之前已经push到数组的数据
table.on('edit(test)', function (obj) {
let editData = {
badge: obj.data.badge,//唯一标识
name: obj.data.name,
dept: obj.data.dept
};
if (modifyData.length != 0) {
let flag = {
flag1: false,//是否已经修改过了 默认没修改过
index: 0//在数组中的索引
};
modifyData.forEach(function (item, index, array) {
if (item.badge == editData.badge) {
flag.flag1 = true;
flag.index = index;
}
})
if (flag.flag1) {
delete modifyData[flag.index];
modifyData[flag.index] = editData;//更新
flag.flag1 = false;//重置false
} else {
modifyData.push(editData);
}
} else {
modifyData.push(editData);
}
});
修改和保存事件
$('#save').click(function () {
if (modifyData.length > 0) {
console.log(modifyData);
} else {
layer.msg('请先修改');
}
})
$('#search').click(function () {
init();
})
完整源码
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="~/Content/layui/css/layui.css" media="all">
head>
<body>
<div style="padding:2rem">
<p class="layui-form">
<div class="searchTable" id="searchTable">
<div class="layui-inline">
<input class="layui-input layui-inline" id="badge" placeholder="工号" autocomplete="off" style="display:inline;width: auto;" />
<button class="layui-btn" data-type="reload" id="search">搜索button>
div>
div>
<table class="layui-table" lay-filter="test" id="test">
table>
p>
<p id="page">p>
<button class=" layui-btn layui-btn-lg " id="save">保存button>
div>
<script src="~/Scripts/jquery-3.4.1.js">script>
<script src="~/Content/layui/layui.js" charset="utf-8">script>
<script type="text/javascript">
$(function () {
layui.use(['table', 'laypage','layer'], function () {
var table = layui.table,
laypage = layui.laypage,
layer = layui.layer;
var modifyData = [];
init();
function init() {
$.ajax({
type: 'post',
url: '/layui/getEmployeeData',
data: {'badge':$.trim($('#badge').val())},
success: function (data) {
//调用分页
laypage.render({
elem: 'page'
, count: data.count
, jump: function (obj, first) {
//模拟渲染
let thisData = data.data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
table.render({
elem: '#test',
cols: [[{
field: 'badge',
title: '工号',
sort: true,
}, {
field: 'name',
title: '姓名',
sort: true,
edit: 'text'
}, {
field: 'dept',
title: '部门',
edit: 'text',
sort: true,
}, {
field: 'email',
title: '邮件',
sort: true,
}]],
data: thisData,
})
table.on('edit(test)', function (obj) {
let editData = {
badge: obj.data.badge,//唯一标识
name: obj.data.name,
dept: obj.data.dept
};
if (modifyData.length != 0) {
let flag = {
flag1: false,
index: 0
};
modifyData.forEach(function (item, index, array) {
if (item.badge == editData.badge) {
flag.flag1 = true;
flag.index = index;
}
})
if (flag.flag1) {
delete modifyData[flag.index];
modifyData[flag.index] = editData;
flag.flag1 = false;//重置false
} else {
modifyData.push(editData);
}
} else {
modifyData.push(editData);
}
});
if (!first) {
//do something
}
}
});
}
})
}
$('#save').click(function () {
if (modifyData.length > 0) {
console.log(modifyData);
} else {
layer.msg('请先修改');
}
})
$('#search').click(function () {
init();
})
})
})
script>
body>
html>
当然，我这种方法肯定不是最佳的。才接触的layui，慢慢上手。