Project requirements: Dynamic addition of table row data, and cell support drop-down box.
Solution steps:
1. Write table header content
<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> Add information items (total < cite id= "count"> 0 </cite> items)</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>Name of information item</th> <th>Information item coding</th> <th>Information item type</th> <th>Information item length</th> <th>Is it empty?</th> <th>Display serial number</th> <th>Sharing</th> <th>Sharing mode</th> <th>Is it public?</th> <th>Open mode</th> <th>operation</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">Preservation</a> </div> </form>
2. Write JS code to generate data rows dynamically, and use HTML splicing method. Specific logic can refer to the code. (This method is cumbersome and can be used in other ways)
$(document).ready(function(){ layui.use(['jquery','table','form'], function(){ var table = layui.table, $ = layui.jquery, form = layui.form; //Add line button $(".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(); }); //Save button $(".add_res_btn").click(function(){ //var json = $(".res_field_form").serializeJSON(); var result = $(".res_field_form").parseFormJSON(); alert(JSON.stringify(result)); }); }); }); //Define HTable objects 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>yes</option><option value='NO'>no</option></select>"; var IsShareHtml = "<select name='fieldIsShare'><option value='YES' selected>yes</option><option value='NO'>no</option></select>"; var ShareTypeHtml = "<select name='fieldShareType'><option value='CONDITION' selected>Conditional</option><option value='UNCONDITION'>Unconditional</option></select>"; var IsPublicHtml = "<select name='fieldIsPublic'><option value='YES' selected>yes</option><option value='NO'>no</option></select>"; var PublicTypeHtml = "<select name='fieldPublicType'><option value='CONDITION' selected>Conditional</option><option value='UNCONDITION'>Unconditional</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+")'>delete</a></td>"+ "</tr>"; this.trNum++; this.count++; $("#count").text(this.count); return result; }, TR_ROW:function(trNum,trHtml){ } }
Explain:
1) HTable.DEL_TR is directly bound to <a> tag, and dynamic binding can also be considered.
2) The HTable object mainly defines the method of adding and deleting rows, and takes the Index of the current row as the parameter.
3) The actual serial number is not considered for the time being. Because of the dynamic selection of deleted rows, the serial number needs to be redrawn, which adds additional workload, so only the current incremental number is displayed at the top.
3. Submit the data rows in the dynamic table to the background in the form of JSON array.
//Implementation of Building JSON Array by Native JS $.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)){//When there is result.push(json); //var newJson = {}; json = {};// json[key] = value; }else{ json[key] = value; if(i==data.length-1){ result.push(json); } } } } return result; };
Description: 1) JSON arrays can be assembled in native JS mode; 2) Reference can also be made. jquery.serializeJSON But the data submitted in this way are JSON objects, which need to be converted to the background again.
ADD_TR:function(trNum){ var IsNullHtml = "<select name='["+trNum+"][fieldIsNull]'><option value='YES' selected>yes</option><option value='NO'>no</option></select>"; var IsShareHtml = "<select name='["+trNum+"][fieldIsShare]'><option value='YES' selected>yes</option><option value='NO'>no</option></select>"; var ShareTypeHtml = "<select name='["+trNum+"][fieldShareType]'><option value='CONDITION' selected>Conditional</option><option value='UNCONDITION'>Unconditional</option></select>"; var IsPublicHtml = "<select name='["+trNum+"][fieldIsPublic]'><option value='YES' selected>yes</option><option value='NO'>no</option></select>"; var PublicTypeHtml = "<select name='["+trNum+"][fieldPublicType]'><option value='CONDITION' selected>Conditional</option><option value='UNCONDITION'>Unconditional</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+")'>delete</a></td>"+ "</tr>"; this.trNum++; this.count++; $("#count").text(this.count); return result; }, TR_ROW:function(trNum,trHtml){ }