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);
   });
}