layui实现table表格的增删改查layui实现表格的增删改查
效果如下：
引⼊
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./layui/layui/css/layui.css">
<script src='./layui/layui/layui.js'></script>
样式：
body {
margin: 10px;
}
.demo-carousel {
height: 200px;
line-height: 200px;
text-align: center;
}
html
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
js
version: '1605714374741' //为了更新 js 缓存，可忽略
});
});
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {      var laydate = layui.laydate //⽇期
,
laypage = layui.laypage //分页
,
layer = layui.layer //弹层
,
table = layui.table //表格
,
carousel = layui.carousel //轮播
,
upload = layui.upload //上传
,
element = layui.element //元素操作
,
slider = layui.slider //滑块
//向世界问个好
layer.msg('欢迎');
//监听Tab切换
<('tab(demo)', function (data) {
layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
tips: 1
});
});
//执⾏⼀个 table 实例
var url =""//查询接⼝
elem: '#demo',
height: 420,
url: url,
initSort: {
field: 'createtime', //排序字段，对应 cols 设定的各字段名
type: 'desc' //排序⽅式  asc: 升序、desc: 降序、null: 默认排序
},
where: {
"sort": "createtime",
"order": "desc",
},
title: '⽤户表',
id: 'listReload',
page: true //开启分页
,
response: {
statusName: 'code' //规定数据状态的字段名称，默认：code
,
statusCode: 200 //规定成功的状态码，默认：0
/*,msgName: 'hint'*/ //规定状态信息的字段名称，默认：msg*/
,
countName: 'total' //规定数据总数的字段名称，默认：count
,
dataName: 'results' //规定数据列表的字段名称，默认：data
},
request: {
pageName: 'page.pn', //页码的参数名称，默认：page
limitName: 'page.size' //每页数据量的参数名，默认：limit
},
toolbar: 'default' //开启⼯具栏，此处显⽰默认图标，可以⾃定义模板，详见⽂档
,
totalRow: true //开启合计⾏
totalRow: true //开启合计⾏
,
cols: [
[ //表头
{
type: 'checkbox',
fixed: 'left'
}, {
field: 'id',
title: 'ID',
sort: true,
fixed: 'left',
totalRowText: '合计：'
}, {
field: 'title',
title: '标题',
width: 150
}, {
field: 'createtime',
title: '创建时间',
sort: true
}
// ,{field: 'updateDate', title: '更新时间', width: 120, sort: true, totalRow: true}
, {
field: 'author',
title: '作者',
}, {
fixed: 'right',
align: 'center',
toolbar: '#barDemo'
}
]
]
});
//监听排序事件
<('sort(test)', function (obj) { //注：sort 是⼯具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"        console.log(obj.field); //当前排序的字段名
console.pe); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的 th 对象
//尽管我们的 table ⾃带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从⽽实现服务端排序，如：
initSort: obj //记录初始排序，如果不设的话，将⽆法标记表头的排序状态。
,
where: { //请求参数（注意：这⾥⾯的参数可任意定义，并⾮下⾯固定的格式）
sort: obj.field //排序字段
,
order: pe //排序⽅式
}
});
});
//监听头⼯具栏事件
<('toolbar(test)', function (obj) {
var checkStatus = table.fig.id),
data = checkStatus.data; //获取选中的数据
// ,data = obj.data
switch (obj.event) {
case 'add':
// layer.msg('添加');
layer.open({
type: 2,
area: ["100%", "100%"],
area: ["100%", "100%"],
title: "添加",
shadeClose: true,
cellMinWidth: 80,
content: ['write.html', 'auto'], //跳转write页⾯即表单增加页⾯，详情查看之前博
客，no代表不显⽰滚动条
end: function () {//关闭iframe刷新页⾯
},
success: function () {}
});
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择⼀⾏');
} else if (data.length > 1) {
layer.msg('只能同时编辑⼀个');
} else {
layer.open({
type: 2,
area: ["100%", "100%"],
title: "编辑",
shadeClose: true,
cellMinWidth: 80,
content: 'update.html?id=' + data[0].id, //跳转update页⾯，和write.html⼀样，但是update.html多调⽤了数据查询的接⼝，no代表不显⽰滚动条                end: function () {
},
success: function () {
}
});
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择⼀⾏');
} else {
layer.msg('删除');
console.log(data);
console.log(data[0].id);
$.ajax({
type: 'post',
url: 'admin/cms/cmsarticle/' + data[0].id +
'/delete',//调⽤删除接⼝，将选中⾏的id传给后端
success: function (data) {
if ( == "0") {
layer.msg('删除成功');
layer.closeAll();
}
}
});
});
}
break;
};
});
/
/监听⾏⼯具事件
<('tool(test)', function (obj) { //注：tool 是⼯具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
<('tool(test)', function (obj) { //注：tool 是⼯具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"        var data = obj.data //获得当前⾏数据
,
layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('查看操作');
} else if (layEvent === 'del') {
console.log(data.id);
$.ajax({
type: 'post',
url: 'admin/cms/cmsarticle/' + data.id + '/delete',
success: function (data) {
if ( == "0") {
obj.del();
layer.msg('删除成功');
layer.closeAll();
}
}
});
});
} else if (layEvent === 'edit') {
layer.msg('编辑操作');
layer.open({
type: 2,
area: ["100%", "100%"],
title: "编辑",
shadeClose: true,
cellMinWidth: 80,
content: 'update.html?id=' + obj.data.id, //iframe的url，no代表不显⽰滚动条
end: function () {element表格横向滚动条
},
success: function () {
console.log(obj.data);
}
});
}
});
//分页
elem: 'pageDemo' //分页容器的id
,
count: 100 //总页数
,
skin: '#1E9FFF' //⾃定义选中⾊值
//,skip: true //开启跳页
,
jump: function (obj, first) {
if (!first) {
layer.msg('第' + obj.curr + '页', {
offset: 'b'
});
}
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。