特效描述：利用jQuery實現 Layui 表格添加 行刪除 保存代碼，利用jQuery實現Layui表格添加行刪除保存代碼
代碼結構
1. 引入CSS
<link rel="stylesheet" href="layui/css/layui.css" /> <link rel="stylesheet" href="layui/css/layui.css" />
2. 引入JS
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <script src="layui/layui.js?v=201805080202" charset="utf-8"></script> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <script src="layui/layui.js?v=201805080202" charset="utf-8"></script>
3. HTML代碼
?<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<!--[if lt IE 9]>
<![endif]-->
<style type="text/css">
/*您可以將下列樣式寫入自己的樣式表中*/
.childBody{padding: 15px;}
/*layui 元素樣式改寫*/
.layui-btn-sm{line-height: normal; font-size: 12.5px;}
.layui-table-view .layui-table-body{min-height: 256px;}
.layui-table-cell .layui-input.layui-unselect{height: 30px; line-height: 30px;}
/*設置 layui 表格中單元格內容溢出可見樣式*/
.table-overlay .layui-table-view,
.table-overlay .layui-table-box,
.table-overlay .layui-table-body{overflow: visible;}
.table-overlay .layui-table-cell{height: auto; overflow: visible;}
/*文本對齊方式*/
.text-center{text-align: center;}
</style>
</head>
<body class="childBody">
<section class="layui-col-md10" style="margin: 0 auto; float: none;">
<div class="layui-card">
<div class="layui-card-header">基于 layui table 添加一行并實現在編輯行記錄后保存數據的方法</div>
<div class="layui-card-body layui-text">
<div id="toolbar">
<div>
<button type="button" class="layui-btn layui-btn-sm" data-type="addRow" title="添加一行">
<i class="layui-icon layui-icon-add-1"></i> 添加一行
</button>
</div>
</div>
<div id="tableRes" class="table-overlay">
<table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
</div>
<div id="action" class="text-center">
<button type="button" name="btnSave" class="layui-btn" data-type="save"><i class="layui-icon layui-icon-ok-circle"></i>保存</button>
<button type="reset" name="btnReset" class="layui-btn layui-btn-primary">取消</button>
</div>
</div>
</div>
<!--保存結果輸出-->
<div class="layui-card">
<div class="layui-card-header">保存結果輸出</div>
<div class="layui-card-body layui-text">
<blockquote class="layui-elem-quote layui-quote-nm">
<pre id="jsonResult"><span class="layui-word-aux">請點擊“保存”后查看輸出信息……</span></pre>
</blockquote>
</div>
</div>
</section>
<!--recommended script position-->
<script type="text/javascript">
//準備視圖對象
window.viewObj = {
tbData: [{
tempId: new Date().valueOf(),
type: 2,
name: '測試項名稱',
state: 1
}],
typeData: [
{id: 1, name: '分類一'},
{id: 2, name: '分類二'},
{id: 3, name: '分類三'},
{id: 4, name: '分類四'}
],
renderSelectOptions: function(data, settings){
settings = settings || {};
var valueField = settings.valueField || 'value',
textField = settings.textField || 'text',
selectedValue = settings.selectedValue || "";
var html = [];
for(var i=0, item; i < data.length; i++){
item = data[i];
html.push('<option value="');
html.push(item[valueField]);
html.push('"');
if(selectedValue && item[valueField] == selectedValue ){
html.push(' selected="selected"');
}
html.push('>');
html.push(item[textField]);
html.push('</option>');
}
return html.join('');
}
};
//layui 模塊化引用
layui.use(['jquery', 'table', 'layer'], function(){
var $ = layui.$, table = layui.table, form = layui.form, layer = layui.layer;
//數據表格實例化
var tbWidth = $("#tableRes").width();
var layTableId = "layTable";
var tableIns = table.render({
elem: '#dataTable',
id: layTableId,
data: viewObj.tbData,
width: tbWidth,
page: true,
loading: true,
even: false, //不開啟隔行背景
cols: [[
{title: '序號', type: 'numbers'},
{field: 'type', title: '分類（type）', templet: function(d){
var options = viewObj.renderSelectOptions(viewObj.typeData, {valueField: "id", textField: "name", selectedValue: d.type});
return '<a lay-event="type"></a><select name="type" lay-filter="type"><option value="">請選擇分類</option>' + options + '</select>';
}},
{field: 'name', title: '名稱（name）', edit: 'text'},
{field: 'state', title: '是否啟用（state）', event: 'state', templet: function(d){
var html = ['<input type="checkbox" name="state" lay-skin="switch" lay-text="是|否"'];
html.push(d.state > 0 ? ' checked' : '');
html.push('>');
return html.join('');
}},
{field: 'tempId', title: '操作', templet: function(d){
return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-delete"></i>移除</a>';
}}
]],
done: function(res, curr, count){
viewObj.tbData = res.data;
}
});
//定義事件集合
var active = {
addRow: function(){ //添加一行
var oldData = table.cache[layTableId];
console.log(oldData);
var newRow = {tempId: new Date().valueOf(), type: null, name: '請填寫名稱', state: 0};
oldData.push(newRow);
tableIns.reload({
data : oldData
});
},
updateRow: function(obj){
var oldData = table.cache[layTableId];
console.log(oldData);
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
if(row.tempId == obj.tempId){
$.extend(oldData[i], obj);
return;
}
}
tableIns.reload({
data : oldData
});
},
removeEmptyTableCache: function(){
var oldData = table.cache[layTableId];
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
if(!row || !row.tempId){
oldData.splice(i, 1); //刪除一項
}
continue;
}
tableIns.reload({
data : oldData
});
},
save: function(){
var oldData = table.cache[layTableId];
console.log(oldData);
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
if(!row.type){
layer.msg("檢查每一行，請選擇分類！", { icon: 5 }); //提示
return;
}
}
document.getElementById("jsonResult").innerHTML = JSON.stringify(table.cache[layTableId], null, 2); //使用JSON.stringify() 格式化輸出JSON字符串
}
}
//激活事件
var activeByType = function (type, arg) {
if(arguments.length === 2){
active[type] ? active[type].call(this, arg) : '';
}else{
active[type] ? active[type].call(this) : '';
}
}
//注冊按鈕事件
$('.layui-btn[data-type]').on('click', function () {
var type = $(this).data('type');
activeByType(type);
});
//監聽select下拉選中事件
form.on('select(type)', function(data){
var elem = data.elem; //得到select原始DOM對象
$(elem).prev("a[lay-event='type']").trigger("click");
});
//監聽工具條
table.on('tool(dataTable)', function (obj) {
var data = obj.data, event = obj.event, tr = obj.tr; //獲得當前行 tr 的DOM對象;
console.log(data);
switch(event){
case "type":
//console.log(data);
var select = tr.find("select[name='type']");
if(select){
var selectedVal = select.val();
if(!selectedVal){
layer.tips("請選擇一個分類", select.next('.layui-form-select'), { tips: [3, '#FF5722'] }); //吸附提示
}
console.log(selectedVal);
$.extend(obj.data, {'type': selectedVal});
activeByType('updateRow', obj.data); //更新行記錄對象
}
break;
case "state":
var stateVal = tr.find("input[name='state']").prop('checked') ? 1 : 0;
$.extend(obj.data, {'state': stateVal})
activeByType('updateRow', obj.data); //更新行記錄對象
break;
case "del":
layer.confirm('真的刪除行么？', function(index){
obj.del(); //刪除對應行（tr）的DOM結構，并更新緩存
layer.close(index);
activeByType('removeEmptyTableCache');
});
break;
}
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
