Layui資料表格動態新增行的處理方式（原生HTML方式）
阿新 • • 發佈：2019-08-23
專案需求：動態的增加表格行資料，並且單元格允許支援下拉框。
解決步驟：
1、編寫表格頭部內容
<hr class="layui-bg-green"> <div class="layui-form-item"> <div class="layui-input-inline"> <a class="layui-btn layui-btn-sm add_tr_btn"><i class="layui-icon"></i>新增資訊項(共<cite id="count">0</cite>項)</a> </div> </div> <form class="layui-form res_field_form"> <div class="layui-form-item"> <table class="layui-table" lay-filter="resTable" id="resTable"> <thead> <tr> <th>資訊項名稱</th> <th>資訊項編碼</th> <th>資訊項型別</th> <th>資訊項長度</th> <th>是否為空</th> <th>顯示序號</th> <th>是否共享</th> <th>共享方式</th> <th>是否公開</th> <th>公開方式</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <a class="layui-btn add_res_btn">儲存</a> </div> </form>
2、編寫動態生成資料行的JS程式碼，使用拼接HTML方式，具體邏輯可參考程式碼。（此方法比較繁瑣，亦可用其他方式）
$(document).ready(function(){ layui.use(['jquery','table','form'], function(){ var table = layui.table, $ = layui.jquery, form = layui.form; //新增行按鈕 $(".add_tr_btn").click(function(){ var tableRow = HTable.ADD_TR(HTable.trNum); var trObj = $("#resTable").children('tbody').find('tr'); var tbody = $("#resTable").find('tbody'); tbody.append(tableRow); form.render(); }); //儲存按鈕 $(".add_res_btn").click(function(){ //var json = $(".res_field_form").serializeJSON(); var result = $(".res_field_form").parseFormJSON(); alert(JSON.stringify(result)); }); }); }); //定義HTable物件 window.HTable = { trNum:1, count:0, DEL_TR:function(trNum){ $("#tr"+trNum).remove(); this.trNum--; if(this.trNum==0){ this.trNum=1; } this.count--; if(this.count<0){ this.count=0; } $("#count").text(this.count); }, ADD_TR:function(trNum){ var IsNullHtml = "<select name='fieldIsNull'><option value='YES' selected>是</option><option value='NO'>否</option></select>"; var IsShareHtml = "<select name='fieldIsShare'><option value='YES' selected>是</option><option value='NO'>否</option></select>"; var ShareTypeHtml = "<select name='fieldShareType'><option value='CONDITION' selected>有條件</option><option value='UNCONDITION'>無條件</option></select>"; var IsPublicHtml = "<select name='fieldIsPublic'><option value='YES' selected>是</option><option value='NO'>否</option></select>"; var PublicTypeHtml = "<select name='fieldPublicType'><option value='CONDITION' selected>有條件</option><option value='UNCONDITION'>無條件</option></select>"; var result = "<tr id='tr"+trNum+"'>"+ "<td><div class='layui-iput-inline'><input type='text' name='fieldName' class='layui-input'/></div></td>"+ "<td><div class='layui-iput-inline'><input type='text' name='fieldCode' class='layui-input'/></div></td>"+ "<td><div class='layui-iput-inline'><input type='text' name='fieldType' class='layui-input'/></div></td>"+ "<td><div class='layui-iput-inline'><input type='text' name='fieldLength' class='layui-input'/></div></td>"+ "<td><div class='layui-iput-inline'>"+IsNullHtml+"</div></td>"+ "<td><div class='layui-iput-inline'><input type='text' name='fieldSort' class='layui-input'/></div></td>"+ "<td><div class='layui-iput-inline'>"+IsShareHtml+"</div></td>"+ "<td><div class='layui-iput-inline'>"+ShareTypeHtml+"</div></td>"+ "<td><div class='layui-iput-inline'>"+IsPublicHtml+"</div></td>"+ "<td><div class='layui-iput-inline'>"+PublicTypeHtml+"</div></td>"+ "<td><a class='layui-btn layui-btn-sm layui-btn-danger' onclick='HTable.DEL_TR("+trNum+")'>刪除</a></td>"+ "</tr>"; this.trNum++; this.count++; $("#count").text(this.count); return result; }, TR_ROW:function(trNum,trHtml){ } }
說明：
1）HTable.DEL_TR是直接繫結到<a>標籤中，亦可考慮動態繫結的方式。
2）HTable物件中主要定義了增加行、刪除行方法，並且以當前行的Index作為引數。
3）暫未考慮現實序號，由於動態選擇刪除行，需要重新繪製序號，增加了額外工作量，所以僅在頂部展示目前以增加的數量。
3、將動態表格中的資料行轉成JSON陣列的形式提交到後臺。
//原生JS的方式實現構建JSON陣列 $.fn.parseFormJSON = function (){ var result = []; var json = {}; var data = this.serializeArray(); if(data.length==0){ return []; }else{ for(var i=0; i<data.length; i++){ var key = data[i].name; var value = data[i].value; if(json.hasOwnProperty(key)){//當存在是 result.push(json); //var newJson = {}; json = {};// json[key] = value; }else{ json[key] = value; if(i==data.length-1){ result.push(json); } } } } return result; };
說明：1）可使用原生的JS方式實現組裝成JSON陣列；2）亦可以參考jquery.serializeJSON的實現方式，但此種方式提交的資料為JSON物件，需要到後臺再進行一次轉換才行。
ADD_TR:function(trNum){
var IsNullHtml = "<select name='["+trNum+"][fieldIsNull]'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var IsShareHtml = "<select name='["+trNum+"][fieldIsShare]'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var ShareTypeHtml = "<select name='["+trNum+"][fieldShareType]'><option value='CONDITION' selected>有條件</option><option value='UNCONDITION'>無條件</option></select>";
var IsPublicHtml = "<select name='["+trNum+"][fieldIsPublic]'><option value='YES' selected>是</option><option value='NO'>否</option></select>";
var PublicTypeHtml = "<select name='["+trNum+"][fieldPublicType]'><option value='CONDITION' selected>有條件</option><option value='UNCONDITION'>無條件</option></select>";
var result = "<tr id='tr"+trNum+"'>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldName]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldCode]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldType]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldLength]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'>"+IsNullHtml+"</div></td>"+
"<td><div class='layui-iput-inline'><input type='text' name='["+trNum+"][fieldSort]' class='layui-input'/></div></td>"+
"<td><div class='layui-iput-inline'>"+IsShareHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+ShareTypeHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+IsPublicHtml+"</div></td>"+
"<td><div class='layui-iput-inline'>"+PublicTypeHtml+"</div></td>"+
"<td><a class='layui-btn layui-btn-sm layui-btn-danger' onclick='HTable.DEL_TR("+trNum+")'>刪除</a></td>"+
"</tr>";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}