layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后修改成功后表格数据自动刷新
（1）主界面
本系统没有采用分页数据请求，直接取出后台全部数据
（2）点击编辑按钮，编辑功能界面展示
（3）代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">
<title>Data-Table 表格</title>
<link rel="stylesheet" href="../frame/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../frame/static/css/style.css">
<link rel="icon" href="../frame/static/image/code.png">
<!--//表单样式的修改-->
<style>
.layui-form-label{
width: 100px;
}
.layui-input-block {
margin-left: 130px;
min-height: 36px
}
</style>
</head>
<body class="body">
<!-- 工具集 -->
<div class="my-btn-box">
<span class="fl">
<a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量添加</a>
<a class="layui-btn btn-add btn-default" id="btn-get">采集设备总数</a>
<a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
<a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">ဂ</i></a>
</span>
<span class="fr">
<div class="demoTable">
<span class="layui-form-label">搜索条件：</span>
<!--// 搜索ID：-->
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入搜索条件">
</div>
<button class="layui-btn" data-type="reload">查询</button>
</div>
</span>
</div>
<!--<!– 表格 –>-->
<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
layui.use(['table', 'form', 'layer', 'vip_table'], function () {
// 操作对象
var form = layui.form
, table = layui.table
, layer = layui.layer
, vipTable = layui.vip_table
, $ = layui.jquery
// 表格渲染
var tableIns = table.render({
elem: '#test' //指定原始表格元素选择器（推荐id选择器）
, height: vipTable.getFullHeight() //容器高度
, toolbar: '#toolbarDemo'
, title: '采集设备表'
, cols: [[ //标题栏
{checkbox: true, sort: true, fixed: true, space: true}
, {field: 'eqptType', title: 'eqptType', width: 150}
, {field: 'eqptTypeName', title: 'eqptTypeName', width: 150}
, {field: 'eqptIdCode', title: 'eqptIdCode', width: 150}
, {field: 'eqptName', title: 'eqptName', width: 180}
, {field: 'createTime', title: 'createTime', width: 200}
, {field: 'creator', title: 'creator', width: 100}
, {fixed: 'right', width: 178, align: 'center', toolbar: '#barOption'}
]]
, id: 'dataCheck'
// , url: '../json/decice_type.json'
,url:'/getCollectorInfo'
, method: 'get'
, page: false
, limits: [30, 60, 90, 150, 300]
, loading: false
, done: function (res) {
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
}
});
//监听表格复选框选择
table.on('checkbox(demo)', function (obj) {
console.log(obj)
});
//监听工具条
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
layer.msg('ID：' + data.id + ' 的查看操作');
} else if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
$.ajax({
url: "/deleteCollector",
type: "POST",
data: {eqptType: data.eqptType, eqptIdCode: data.eqptIdCode},
success: function (msg) {
var json = JSON.parse(msg);
var returnCode = json.returnCode;
if (returnCode == 200) {
//删除这一行
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
} else {
layer.msg("删除失败", {icon: 5});
}
}
});
return false;
});
} else if (obj.event === 'edit') {
//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: ['420px', '330px'],
content: $("#popUpdateTest"）//引用的弹出层的页面层的方式加载修改界面表单
});
//动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
setFormValue(data);
}
}
});
//监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
function setFormValue(data){
form.on('submit(demo11)', function(massage) {
$.ajax({
url:'/updateCollectorAndConfig',
type:'POST',
data:{oldeqptType:data.eqptType,oldeqptIdCode:data.eqptIdCode,neweqptType:massage.field.neweqptType,neweqptIdCode:massage.field.neweqptIdCode,eqptName:"修改采集器"},
success:function (msg) {
var returnCode = msg.returnCode;//取得返回数据（Sting类型的字符串）的信息进行取值判断
if(returnCode==200){
layer.closeAll('loading');
layer.load(2);
layer.msg("修改成功", {icon: 6});
setTimeout(function(){
window.parent.location.reload();//修改成功后刷新父界面
}, 1000);
加载层-风格
}else{
layer.msg("修改失败", {icon: 5});
}
}
})
})
}
//添加采集设备
$('#btn-add').on('click', function () {
layer.open({
type: 2,
title: '采集设备添加',
maxmin: true,
area: ['420px', '330px'],
shadeClose: false, //点击遮罩不会关闭
content: 'CollectorAdd-form.html',//添加设备的from表单是在另一个html中，这是弹出方式的第三种方式
});
});
//获取采集设备总数
$('#btn-get').on('click', function () {
var msg = "";
$.ajax({
url: "/getCollectorInfoTotalRow",
type: "get",
success: function (data) {
var json = JSON.parse(data)
msg = "采集设备的总数为：" + json.count;
layer.open({
type: 1,
area: ['250px', '180px'],
btn: '关闭',
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:30px;">' + msg + '</div>'
, yes: function () {
layer.closeAll();
}
});
}
});
});
//搜索功能的实现
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload');
//执行重载
table.reload('idTest', {
where: {
key: {
field: demoReload.val()
}
}
});
}
};
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
// 刷新表格
$('#btn-refresh').on('click', function () {
tableIns.reload()
});
});
</script>
//这里是弹出层的表单信息
//表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出
<div class="layui-row" id="popUpdateTest" style="display:none;">
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" action="" style="margin-top:20px" >
<div class="layui-form-item">
<label class="layui-form-label">采集设备类型</label>
<div class="layui-input-block">
<select name="eqptType" lay-filter="eqptType">
<option value="0a0003biac">0a0003biac</option>
<option value="0a0003ahup" selected="">0a0003ahup</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">eqptIdCode</label>
<div class="layui-input-block">
<input type="text" name="neweqptIdCode" required lay-verify="required" autocomplete="off" placeholder="请输入采集设备地址" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">eqptName</label>
<div class="layui-input-block">
<input type="text" name="neweqptName" required lay-verify="required" autocomplete="off" placeholder="请输入采集设备名称" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>