php layui增删改查,layui table的增删改查，以及效果图
.layui-table-cell {
text-align: center;
}
.my-form {
margin-top: 5%;
}
.item{
margin-left: 130px;
}
.my-form-item{
padding-top: 20px;
}
class="layui-input">
class="layui-input">
保存
重置
获取选中行数据
获取选中数目
验证是否全选
layui.use(['table', 'layer'], function () {
var table = layui.table,
layer = layui.layer;
var $ = layui.$;
table.render({
url: "/user/list" //换成自己的url
, method: "GET"
, elem: '#test'
, toolbar: '#toolbarDemo'
, title: '用户数据表'
, cols: [
[
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
, {field: 'name', title: '用户名', width: 120, edit: 'text'}
, {field: 'password', title: '密码', width: 250}
, {field: 'updateBy', title: '更新人', width: 120, edit: 'text'}
, {
field: 'updateTime', title: '更新时间', minwidth: 80, sort: true, templet: function (d) {
return layui.util.toDateString(d.updateTime);
}
}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
]
]
, page: true
});
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选');
break;
case 'add':
layer.open({
title: '增加用户',
/*如果是外部的html，type2，内部，type1*/
type: 1,
btnAlign: 'c',
area: ['400px', '340px'],
content: $("#add-main").html()
//未做的是去监听表单提交，给后台发送ajax请求
}
)
;
break;
case
'batchDel'
:
/*发送ajax请求到后台执行批量删除*/
break;
case
'flush'
:
table.reload('test', {
url: "/user/list"
, method: "GET"
});
break;
case
'search'
:
layer.msg("根据用户名查找");
var name = $('input[name="search"]').val();
table.reload('test', {
url: 'user/search', //换成自己的url
where: {
name: name,
},
page: {
curr: 1
}
});
break;
}
;
});
//监听单元格编辑
table.on('edit(test)', function (obj) {
var value = obj.value //得到修改后的值
, data = obj.data //得到所在行所有键值
, field = obj.field; //得到字段
$.ajax({
url: '/user/update', //换成自己的url
type: 'POST',
dataType: 'json',
data: data,
success: function (e) {
if (e.code == 0) {
layer.msg(e.msg);
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e);
}
})
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
$.ajax({
url: "/user/del", //换成自己的url
type: "POST",
dataType: "json",
data: {
id: data.id
},
success: function (e) {
if (e.code == 0) {
layer.msg(e.msg);
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e);
}
})
});
} else if (obj.event == 'add') {
$.ajax({
url: "/user/add", //这里换成自己的url即可
type: "POST",
dataType: "json",
data: data,
success: function (e) {
if (e.code == 0) {
layer.msg(e.msg);
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e);
}
})
}
});
})
效果展示
image.png