laytpl与下拉框渲染数据，实现带输入功能的表格

*.成型图

1.laytpl模板

html：

<div class="twoStep" style="display: none"> <table class="layui-table" > <colgroup> <col> <col width="200"> <col width="150"> </colgroup> <thead> <tr> <th>序号</th> <th>收费项目</th> <th>类型</th> <th>价格</th> <th>备注</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> <div class="layui-form-item" style="margin-top: 55px;text-align: center"> <div class="layui-input-block" style="margin-left: 0px"> <button type="button" id="addBill" class="layui-btn layui-btn-warm "><i class="layui-icon">&#xe654;</i> 添加一行收费信息</button> <button type="button" id="deleteBill" class="layui-btn layui-btn-danger "><i class="layui-icon">&#xe65c;</i> 删减一行收费信息</button> </div> <div class="layui-input-block" style="margin-top: 4%;margin-left: 0px"> <button id="backToOneStep" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe65a;</i>上一步</button> <button id="toThreeStep" type="button" class="layui-btn" style="margin-left: 175px">下一步<i class="layui-icon">&#xe65b;</i></button> </div> </div> </div>

tpl：

<script id="trList" type="text/html"> {{# layui.each(d.billList, function(index, item){ }} <tr class="trInput" data-index="{{ index }}"> <!--序号--> <td> {{ index+1 }} </td> <!--收费项--> <td> <select name="pay_service" class="pay_service" data-index="{{ index }}" lay-filter="pay_service"> <option value="-1">请选择收费项目</option> <%--{{# layui.each(d.itemList, function(index, i){ }}--%> <c:forEach var="i" items="<%=com.yiju.property.enums.ChargeItemEnum.values()%>" > <option value="${i.code}" >${i.description}</option> </c:forEach> </select> </td> <!--类型--> <td> <select name="project_type" class="project_type" data-index="{{ index }}" lay-filter="project_type"> <option value="-1">请选择类型</option> <%--{{# layui.each(d.roomType, function(index, i){ }}--%> <c:forEach var="i" items="<%=com.yiju.property.enums.ProgramType.values()%>" > <option value="${i.code}" >${i.description}</option> </c:forEach> </select> </td> <!--单价--> <td > <input type="text" name="price" value ='{{ item.price }}' data-index="{{ index }}" class="layui-input price" > </td> <!--备注--> <td> <input type="text" name="remark" value ='{{ item.remark }}' data-index="{{ index }}" placeholder="请输入备注" class="layui-input remark"> </td> </tr> {{# }); }} </script>

2.获取数据渲染初始界面

var laytpl = layui.laytpl; //引入laytpl模板 layui.use['laytpl'] /*第二步*/ /*获取外层循环数据*/ var dataList = { billList: [] }; //billlist里装的对象，初始默认给一个属性为空的对象作为表格第一行 var bill = { pay_service: "", project_type: "", price: "", remark: "" }; $("#toTwoStep").click(function () { getQuickItems() }) function getQuickItems() { $.ajax({ type: "GET", url: contextpath + "/portal/service/render", dataType: "json", success: function (res) { var data = res.r_d; if (data) { dataList.billList.push(bill); renderTable(dataList); } } }); } //tpl渲染方法 function renderTable(data) { var getTpl = trList.innerHTML; laytpl(getTpl).render(data, function (html) { $("#tableBody").html(html); form.render(); }); /*核心：解决tpl渲染和layui样式渲染的冲突*/ //下拉框要在tpl渲染之后再重新渲染一次，通过之前存的表单信息再获取下拉选中-*必须要.attr("selected","selected") $(".trInput").each(function () { var index = $(this).data("index"); var pId=dataList.billList[index].pay_service; var tId=dataList.billList[index].project_type; $(this).find(".pay_service option[value="+pId+"]").attr("selected","selected"); $(this).find(".project_type option[value="+tId+"]").attr("selected","selected"); }) form.render(); }

3.添加/删除行信息，同时进行之前的数据存储回显

$("#addBill").click(function () { getInputValue(); //添加一个空bill作为表格新添加行 dataList.billList.push(bill); renderTable(dataList); }); $("#deleteBill").click(function () { //删除集合最后一个bill的信息==实现删除表单最后一行的数据 dataList.billList.splice(dataList.billList.length-1,1); renderTable(dataList); }) //在新的tpl渲染之前，获取输入框内的内容存入js变量中 function getInputValue() { //遍历每一行tr取出里面的数据 $(".trInput").each(function () { var index = $(this).data("index"); var bill = { pay_service: $(this).find('.pay_service').val(), project_type: $(this).find('.project_type').val(), price: $(this).find('.price').val(), remark: $(this).find('.remark').val() }; dataList.billList.splice(index, 1, bill); }); }