2023年11月26日发(作者:)
layui表格修改(编辑)功能的实现,弹出表单框进⾏编辑,然后修改成功后表
格数据⾃动更新
layui表格修改(编辑)功能的实现,弹出表单框进⾏编辑,然后修改成功后表格数据⾃动更新
(1)主界⾯
本系统没有采⽤分页数据请求,直接取出后台全部数据
修改代码详解
.layui-form-label{
width: 100px;
}
.layui-input-block {
margin-left: 130px;
min-height: 36px
}
, 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_'
,url:'/getCollectorInfo'
, method: 'get'
, page: false
, limits: [30, 60, 90, 150, 300]
, loading: false
, done: function (res) {
//如果是异步请求数据⽅式,res即为你接⼝返回的信息。
//如果是直接赋值的⽅式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
(res);
}
});
//监听表格复选框选择
('checkbox(demo)', function (obj) {
(obj)
});
//监听⼯具条
('tool(test)', function (obj) {
var data = ;
if ( === 'detail') {
('ID:' + + ' 的查看操作');
} else if ( === 'del') {
m('真的删除⾏么', function (index) {
$.ajax({
url: "/deleteCollector",
type: "POST",
data: {eqptType: pe, eqptIdCode: Code},
success: function (msg) {
var json = (msg);
var returnCode = Code;
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:pe,oldeqptIdCode:Code,neweqptType:tType,neweqptIdCode:.n
eweqptIdCode,eqptName:"修改采集器"},
success:function (msg) {
var returnCode = Code;//取得返回数据(Sting类型的字符串)的信息进⾏取值判断
if(returnCode==200){
ll('loading');
(2);
("修改成功", {icon: 6});
setTimeout(function(){
({
eqptType:tType,
eqptIdCode:tIdCode,
eqptName:tName
});//修改成功修改表格数据不进⾏跳转
ll();//关闭所有的弹出层
}, 1000);
加载层-风格
({
type: 1,
area: ['250px', '180px'],
btn: '关闭',
shadeClose: true, //点击遮罩关闭
content: '
, yes: function () {
ll();
}
});
}
});
});
//搜索功能的实现
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');


发布评论