layui表格修改（编辑）功能的实现，弹出表单框进⾏编辑，然后修改成功后表
格数据⾃动更新
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">
<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 = der({
elem: '#test' //指定原始表格元素选择器（推荐id选择器）
, height: FullHeight() //容器⾼度
, toolbar: '#toolbarDemo'
, title: '采集设备表'
, cols: [[ //标题栏
, 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);
}
});
/
/监听表格复选框选择
<('checkbox(demo)', function (obj) {
console.log(obj)
});
//监听⼯具条
<('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
layer.msg('ID：' + data.id + ' 的查看操作');
} else if (obj.event === 'del') {
$.ajax({
url: "/deleteCollector",
type: "POST",
data: {eqptType: data.eqptType, eqptIdCode: data.eqptIdCode},
success: function (msg) {
var json = JSON.parse(msg);
var returnCode = urnCode;
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') {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.open({
//layer提供了5种层类型。可传⼊的值有：0（信息框，默认）1（页⾯层）2（iframe层）3（加载层）4（tips层） type: 1,
title: "修改采集设备信息",
title: "修改采集设备信息",
area: ['420px', '330px'],
content: $("#popUpdateTest"）//引⽤的弹出层的页⾯层的⽅式加载修改界⾯表单
});
//动态向表传递赋值可以参看⽂章进⾏修改界⾯的更新前数据的显⽰，当然也是异步请求的要数据的修改数据的获取
setFormValue(obj,data);
}
}
});
//监听弹出框表单提交，massage是修改界⾯的表单数据'submit(demo11)，是修改按钮的绑定
function setFormValue(obj,data){
<('submit(demo11)', function(massage) {
$.ajax({
url:'/updateCollectorAndConfig',
type:'POST',
data:{oldeqptType:data.eqptType,oldeqptIdCode:data.eqptIdCode,neweqptType:weqptType,neweqptIdCode:massage.field.n eweqptIdCode,eqptName:"修改采集器"},
success:function (msg) {
var returnCode = urnCode;//取得返回数据（Sting类型的字符串）的信息进⾏取值判断
if(returnCode==200){
layer.closeAll('loading');
layer.load(2);
layer.msg("修改成功", {icon: 6});
setTimeout(function(){
obj.update({
eqptType:weqptType,
eqptIdCode:weqptIdCode,
eqptName:weqptName
});//修改成功修改表格数据不进⾏跳转
layer.closeAll();//关闭所有的弹出层
}, 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({jquery弹出div窗口
url: "/getCollectorInfoTotalRow",
type: "get",
success: function (data) {
var json = JSON.parse(data)
msg = "采集设备的总数为：" + unt;
layer.open({
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论