１ 簡介
開發時候，總會遇到根據後臺傳的變量｛組件數｝來動態渲染組件的情況，比如後臺傳命令要綁定10個父子關係，則前臺展開十個input組件，後臺決定綁定5個福字關係，則前臺展開5個input組件．再比如，每個門店可以針對每個商品類型設置安全庫存，那麼隨着廠家生產的商品類別增加，則前端動態增加form->input組件．
思路：借用smarty魔板（沒有smarty則需要js源生一個個添加組件），根據商品類別變量{$count} ,foreach渲染出表格；表格的每一行有input框．給每一行 <tr> 設置以固定字符串str+key的id，點擊確定提交時，獲取從str0到str{$count}的input值，集合到一個數組當中，ajax提交到api．
２ 源碼講解
2.1 html部分
<table class="layui-table"> <thead> <tr> <th>產品ID</th> <th>產品型號</th> <th>產品名稱</th> <th>當前庫存</th> <th style="width: 15%; ">滿庫存值</th> <th style="width: 15%; ">低庫存值</th> </tr> </thead> <tbody> {foreach $have_inventories as $key =>$vo} <tr id = "tb1tr{$key}"> <td>{$vo.product_id}</td> <td>{$vo.product.type}</td> <td>{$vo.product.name}</td> <td>{$vo.now_inventory}</td> <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="請輸入" name="max_inventory" value="{$vo.max_inventory}"></td> <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="請輸入" name="min_inventory" value="{$vo.min_inventory}"></td> </tr> {/foreach} {foreach $nohave_products as $key => $vo} <tr id = "tb2tr{$key}"> <td>{$vo.id}</td> <td>{$vo.type}</td> <td>{$vo.name}</td> <td>{$vo.now_inventory}</td> <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="請輸入" name="max_inventory" value=""></td> <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="請輸入" name="min_inventory" value=""></td> </tr> {/foreach} </tbody> </table>
2.2 js部分 (onclick事件)
var gettr1,id1,max1,min1 //初始化變量：tr1部分的節點,節點id->child值，節點id->input值 var gettr2,id2,max2,min2 var newdata = new Array(); //初始化數組 for(var i = 0;i<"{$have_count}";i++){ var itemobj = { wid : 0,wtype : 0,prid : 0,max : 0,min : 0, } itemobj.wid = "{$warehouse_id}"; itemobj.wtype = "{$warehouse_type}"; gettr1 = document.getElementById('tb1tr'+i) id1 = gettr1.children[0].innerHTML; max1 = gettr1.children[4].children[0].value; min1 = gettr1.children[5].children[0].value; max1 = (max1 == ''||max1 == undefined)? 0:max1; min1 = (min1 == ''||min1 == undefined)? 0:min1; itemobj.prid = id1; itemobj.max = max1; itemobj.min = min1; newdata.push(itemobj); } for(var i = 0;i<"{$nohave_count}";i++){ var itemobj = { wid : 0,wtype : 0,prid : 0,max : 0,min : 0, } itemobj.wid = "{$warehouse_id}"; itemobj.wtype = "{$warehouse_type}"; gettr2 = document.getElementById('tb2tr'+i) id2 = gettr2.children[0].innerHTML; max2 = gettr2.children[4].children[0].value; min2 = gettr2.children[5].children[0].value; max2 = (max2 == ''||max2 == undefined)? 0:max2; min2 = (min2 == ''||min2 == undefined)? 0:min2; itemobj.prid = id2; itemobj.max = max2; itemobj.min = min2; newdata.push(itemobj); } if(newdata.length == "{$have_count + $nohave_count}"){ $.ajax({ url: '{$action}', type: 'POST', dataType : "TEXT", data: { newdata:newdata, do:'edit' }, success:function(data){ data = eval("("+ data+ ")"); if(data.code === 0) { layer.msg(data.msg, {icon: 1}, function(){ // 關閉本iframe層 // 父頁面刷新 }); } else { //報錯 } } }) }else{ //報錯 }
3 結尾
① 每個<tr>中有兩個input，說明要用二維數組來提交(當然分成兩個數組提交也可以，但沒必要)．js中，二維數組可以傳入對象，每個對象存儲一個<tr>的兩個input值．
② 每次給數組添加對象時，需要重新生成一個新的對象，不然數組中所有一維數組都相同（因爲是同一個對象，這個地方在下踩到了坑，爲了簡化代碼，將對象初始化放到了全局）
③ 可以不選擇id賦str+key的形式，可以直接遍歷頁面所有tr獲取，只是個人覺得加了id將使得思路更清晰