查阅文档:
一、给表头添加edit属性
二、使用触发单元格编辑
准备对应的参数,传到对应的url就可以了.
详见以下的 table.on('edit(test)', function (obj) {})方法
<!DOCTYPE html>
<html class="x-admin-sm">
<include file="Common:header" />
<body>
// ......
</body>
<script>
//搜索功能
$('#sreach').click(function () {
var appType = $('.layui-this').data('apptype');
var appType = $('#appType').val();
var serialNumber = $('#serialNumber').val();
var phone = $('#phone').val();
var testing = $('#testing').val();
var status = $('#status').val();
var type = $('#type').val();
var count = $('#count').val();
if (appType != '') {
var url = '************';
} else {
var url = '***********';
}
layui.use(['table'], function () {
var table = layui.table //表格
//执行一个 table 实例
table.render({
elem: '#demo',
url: url, //数据接口
// ......
cols: [
[ //表头
// {type: 'checkbox', fixed: 'left'} dealwithOpinion
{
field: 'phone',
title: '手机号',
width: 110,
}, {
field: 'type',
title: '类型',
width: 60
}, {
field: 'time',
title: '提交时间',
width: 120
}, {
field: 'dealwithOpinion',
title: '备注内容',
width: 120,
edit: 'text',
}
]
],
initSort: {
field: 'time' //排序字段,对应 cols 设定的各字段名
,
type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
});
});
})
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'form'], 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, //滑块
form = layui.form
laydate.render({
elem: '#registertime_start' //指定元素
,
type: 'datetime'
});
laydate.render({
elem: '#time' //指定元素
,
type: 'datetime'
});
var appType = $('.layui-this').data('apptype');
var appType = $('#appType').val();
var serialNumber = $('#serialNumber').val();
var phone = $('#phone').val();
var testing = $('#testing').val();
var status = $('#status').val();
if (appType != '') {
var url = '******';
} else {
var url = '******';
}
//执行一个 table 实例
table.render({
elem: '#demo',
url: url, //数据接口
// ......
,
toolbar: 'true' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
// ,totalRow: true //开启合计行
,
cols: [
[ //表头
// {type: 'checkbox', fixed: 'left'}
{
field: 'phone',
title: '手机号',
width: 110,
}, {
field: 'type',
title: '类型',
width: 60
}, {
field: 'time',
title: '提交时间',
width: 120
}, {
field: 'dealwithOpinion',
title: '备注内容',
width: 120,
edit: 'text',
}
]
],
initSort: {
field: 'time', //排序字段,对应 cols 设定的各字段名
type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
});
//分页
laypage.render({
elem: 'pageDemo', //分页容器的id
count: 100, //总页数
skin: '#1E9FFF', //自定义选中色值
//,skip: true //开启跳页
jump: function (obj, first) {
if (!first) {
layer.msg('第' + obj.curr + '页', {
offset: 'b'
});
}
}
});
// ***********************************
// *******单击修改表格中的数据********
// ***********************************
table.on('edit(test)', function (obj) {
var value = obj.value, //得到修改后的值
data = obj.data, //得到所在行所有键值
field = obj.field; //得到字段
//ajax 请求
$.ajax({
type: "POST",
url: "**************",
data: {
'id': data.fb_id,
'value': value,
'field': field,
'doData': data,
},
success: function (ret) {
ret = JSON.parse(ret)
if (ret.code == 1) {
layer.msg(ret.msg, {
icon: 6,
time: 2000
}, function () {
// location = location;
});
} else {
layer.msg(ret.msg, {
icon: 2,
time: 3000
}, function () {
location = location;
//do something
});
}
},
error: function (response) {
}
});
});
});
</script>
</html>
三、注意点:
1,不要将table.on这个写错地方了,楼主刚开始写到layui.use外面去了,导致报错table不存在
2,不要在layui.use中引入这个table