修改lay\modules\table.js
在TPL_HEADER中
,'{{# if(item2.type === "checkbox"){ }}' //复选框
修改为不显示标题行复选框
,'{{# if(item2.type === "checkbox" && (item2.header === undefined || item2.header)){ }}' //复选框
页面提示:
<button class="layui-btn layui-btn-urls" data-type="add">
<i class="layui-icon"></i>增加请求
</button>
<button class="layui-btn layui-btn-urls" data-type="save">
<i class="layui-icon"></i>保存
</button>
<blockquote class="layui-elem-quote layui-text" style="padding:unset;margin:unset;padding-left:10px;font-size:10px;line-height:1;">
<ul>
<li>单击数据行可以直接编辑;</li>
<li>名称与请求地址必填;</li>
</ul>
</blockquote>
js
<script type="text/html" id="editItem">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table'], function () {
var $ = layui.$
, layer = layui.layer
, table = layui.table;
$.getJSON("/api/v1/getUrls", function (data) {
data.forEach(function (d) {
d[table.config.checkName] = d.Status;
});
table.render({
elem: '#LAY-urls-list',
id: 'LAY-urls-list',
data: data,
page: false,
cols: [[
{ type: 'numbers', fixed: 'left' }
, { field: 'Name', title: '名称', width: 100, edit:"text"}
, { field: 'Url', title: '请求地址', width: 200, edit:"text" }
, { type: 'checkbox',title: '是否启用',width: 100,header:false}
, { title: '#', toolbar: '#editItem', width: 100,align:"center" }
]]
});
});
//勾选复选框,设置Status字段值
table.on("checkbox(LAY-urls-list)", function (obj) {
obj.update({ Status: obj.checked });
});
//行事件
table.on('tool(LAY-urls-list)', function (obj) {
var row = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
if (layEvent === 'del') {
if (!row.Name && !row.Url) {
var data = table.cache['LAY-urls-list'];
data.splice(tr.data("index"), 1);
table.reload('LAY-urls-list', { data: data });
}
else {
layer.confirm("确定删除[" + (row.Status ? "启用" : "禁用") + "]状态请求[" + (row.Name || row.Url) + "]吗?", function (index) {
layer.close(index);
var data = table.cache['LAY-urls-list'];
data.splice(tr.data("index"), 1);
table.reload('LAY-urls-list', { data: data });
});
}
}
});
//事件
var actions = {
add: function () {
var data = {Status:true}
data[table.config.checkName] = true;
var list = table.cache['LAY-urls-list'];
list.push(data);
table.reload('LAY-urls-list', { data: list });
}
, save: function () {
var ds = table.cache['LAY-urls-list'];
var nds = ds.filter(function (i) { return !i.Name || !i.Url });
if (nds.length)
{
layer.alert("请填写完整请求信息!");
return;
}
$.ajax({
url: "/api/v1/saveUrls",
type: 'post',
contentType: 'application/json',
data: JSON.stringify(ds),
dataType: 'json',
cache: false,
success: function (rst) {
if (rst.flag) {
layer.alert("保存成功!");
}
else {
layer.alert(rst.msg || "服务器错误");
}
},
error: function (jqXHR, textStatus, errorThrown) {
layer.alert(jqXHR.responseText);
}
});
}
};
//绑定事件
$('.layui-btn.layui-btn-urls').on('click', function () {
var type = $(this).data('type');
actions[type] && actions[type].call(this);
});
});
</script>
效果: