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