可以一行一行 添加 列表的页面这样写。 可以添加行的页面

如果遇到这样的页面。

可以添加多行。

可以加载以前的数据修改功能。

添加和修改集合一起的页面。

先写一个定时器。把表格的数据全记录在array里面。保存或者提交直接提交这个array。

要定义一个row_index 遍历的时候就匹配row_index 修改对应行的数据。

这个row就是从1一行一行+1

表头id使用-1是添加。  别的id是修改

加载以前的数据，就向页面输出一些，之前的数据。

添加一行空数据，自己加数据。

删除行也要对array进行删除。

初始删除按钮 或者选择图纸按钮 放到一个方法里面进行初化。

还可以对table内的input进行监听。

var flag = [[${edit}]]; //true是修改  false是添加。
var row_index = 0;//这个是row_index 输入回车的是哪一行。 记录的是下标，不用row 用index更好。
var row = 0;//第0行。 从0开始
var headId = [[${headId} != null ? ${headId} : -1]];//表头id -1

var save_flag = false;//false没有提交，  true提交了。 防止  别人再操作 弄个这东西。

var w_table, w_form,w_upload;

var material_select_html="";//材质 下拉的html内容。
var material_select_arr=[];//材质 下拉的html内容。

var superlier_select_html="";//供应商 下拉的html内容。
var superlier_select_arr= [];//供应商 下拉的html内容。

var technology_select_html="";//工艺 下拉的html内容。
var technology_select_arr= [];//工艺下拉的html内容。
var select_array = [];// 这里记录，存用户输入的数据，  这里存的是对象。
//定时记录 用户输入的数据。 为什么要定时记录用户输入的数据。
var timer1 ;

$(function() {
   timer1 = setInterval(record_select_array_row_data,200);
   if(flag){
      console.log("这是修改");
      load_before(headId);//根据id加载。
   }else{
      console.log("这是添加");
   }
});

//定时记录用户输入的数据。
function record_select_array_row_data(){
   $("#ruku_list table tbody tr").each(function() {
      var row = $(this).attr("row");

      var biaozhun = $(this).find('input[type="text"]#biaozhun').eq(0).val();
      var guige =$(this).find('input[type="text"]#guige').eq(0).val();

      var weight = $(this).find('input[type="text"]#weight').eq(0).val();
      var number1 =$(this).find('input[type="text"]#number1').eq(0).val();

      var danjia = $(this).find('input[type="text"]#danjia').eq(0).val();
      var zongjia =$(this).find('input[type="text"]#zongjia').eq(0).val();

      var material_id = $(this).find('select#material_id').eq(0).val();
      var supplier_id =$(this).find('select#supplier_id').eq(0).val();
      biaozhun = biaozhun.replaceAll("\"","“");
      biaozhun=biaozhun.trim_shou_wei();
      guige= guige.replaceAll("\"","“");
      guige = guige.trim_shou_wei();

      weight = weight.trim_shou_wei();
      number1 = number1.trim_shou_wei();

      danjia= danjia.trim_shou_wei();
      zongjia= zongjia.trim_shou_wei();
      console.log(row,biaozhun,guige,weight,number1,danjia,zongjia,material_id,supplier_id);
      var rowData = select_array.find(function(item) {
         return item.row == row;
      });
      if (rowData) {
         //这些数据类型值 全是字符串。 包含row  material_id supplier_id
         rowData.row = row;
         rowData.biaozhun = biaozhun;
         rowData.guige = guige;
         rowData.weight = weight;
         rowData.number1 = number1;
         rowData.danjia = danjia;
         rowData.zongjia = zongjia;
         rowData.material_id = material_id;//这是字符串
         rowData.supplier_id = supplier_id;//这是字符串
      }
   });
}

//关闭  弹出的窗口 所有组件   清空弹窗口  的内容
function close_windows(){
   $(".select_drawing_window table tbody").empty();
   $(".select_drawing_window").hide();
   $("#close").hide();
   $("#zhezhao").hide();
}

//显示  弹出的窗口 所有组件  清空弹窗口 的内容
function show_windows(){
   //$(".select_drawing_window table tbody").empty();
   $(".select_drawing_window").show();
   $("#zhezhao").show();
   $("#close").show();
}

//监听键盘 按键
function listen_key_code(){
   $("#ruku_list table tbody tr").each(function() {
      $(this).find('input').off().keyup(function(event){
         var tr_index = $(this).closest('tr').index();
         var td_index = $(this).closest('td').index();
         var tr_row = $(this).closest('tr').attr("row");
         console.log("第"+tr_index+"行，第"+td_index+"列"+"，row是"+tr_row);
         var mye = event|| window.event;
         var kcode = mye.keyCode;
         if(kcode==40){//向下
            console.log("向下");
            var trList = $("#ruku_list table tbody tr");
            $(trList).eq(parseInt(tr_index)+1).find("td").eq(td_index).find("input").focus();
         }
         if(kcode==38){//向上
            console.log("上");
            var trList = $("#ruku_list table tbody tr");
            $(trList).eq(parseInt(tr_index)-1).find("td").eq(td_index).find("input").focus();
         }
         if(kcode==13){//回车
            console.log("回车");
            row_index = tr_index;
            var trList = $("#ruku_list table tbody tr");
            var biaozhun = $(trList).eq(tr_index).find('input[type="text"]#biaozhun').eq(0).val();
            var guige =$(trList).eq(tr_index).find('input[type="text"]#guige').eq(0).val();
            console.log("标准:"+biaozhun+",规格:"+guige);
            //搜索标准和规格 ，看看有没有搜索出来东西。
            search_biaozhun_guige(biaozhun,guige);
         }
      });
   });
}

function search_biaozhun_guige(biaozhun,guige){
   $.post("/admin/drawing/search", {biaozhun: biaozhun,guige:guige}, function (result) {
      console.log(result.data);
      if(result.count>0){
         $(".select_drawing_window table tbody").empty();
         result.data.forEach((item)=>{
            $(".select_drawing_window table tbody").append('<tr>\n' +
                  '\t\t\t\t\t<td>'+item.biaozhun+'</td>\n' +
                  '\t\t\t\t\t<td>'+item.guige+'</td>\n' +
                  '\t\t\t\t</tr>');
         });
         show_windows();
         //初始货 弹出窗口的点击事件
         init_window_tr_click();
      }else{
         layer.msg("暂无记录");
         return;
      }
   }, "json");
}

//初化窗口的点击事件。
function  init_window_tr_click(){
   var tableList = $(".select_drawing_window").find("table");
   var table  = $(tableList)[0];
      var trList = $(table).find("tbody").find("tr");
      for(var i=0;i<trList.size();i++){
         $(trList.eq(i)).off("click").on("click",function(){
            console.log($(this));
            var td_list = $(this).find("td");
            var biaozhun = $((td_list)[0]).text().trim_shou_wei();
            var guige = $((td_list)[1]).text().trim_shou_wei();
            console.log(biaozhun);
            console.log(guige);
            //给这个位置写上数据
            var trList = $("#ruku_list table tbody tr");
            var biaozhun = $(trList).eq(row_index).find('input[type="text"]#biaozhun').eq(0).val(biaozhun);
            var guige =$(trList).eq(row_index).find('input[type="text"]#guige').eq(0).val(guige);
            close_windows();
         });
      }
}

function add_row() {
   if(save_flag){
      return;
   }
   $("#ruku_list  table tbody").append('   ' +
         '<tr row="'+row+'" style="cursor: pointer; ">\n' +
         '            <td style=" padding: 0px;"><input id="biaozhun" class="layui-input" type="text" /></td>\n' +
         '            <td style=" padding: 0px;"><input id="guige" class="layui-input" type="text" /></td>\n' +
         '            <td style=" padding: 0px;"><input id="weight"  class="layui-input" type="text" /></td>\n' +

         '            <td style=" padding: 0px;"><input id="number1" class="layui-input" type="text" /></td>\n' +
         '            <td style=" padding: 0px;"><input id="danjia" class="layui-input" type="text" /></td>\n' +
         '            <td style=" padding: 0px;"><input id="zongjia" class="layui-input" type="text" /></td>\n' +

         '            <td  style="text-align: center;  padding: 0px; " > ' +
         material_select_html   +
         '            </td>\n' +
         '            <td  style="text-align: center;  padding: 0px; " > ' +
         superlier_select_html   +
         '            </td>\n' +
         '            <td style="text-align: center;  padding: 0px;"> ' +
                     '<button type="button" id="del"   class="layui-btn layui-btn-xs layui-btn-danger">删除</button>\n' +
         '            </td>\n' +
         '        </tr>');
   var obj = {};
   obj.row = row;//添加一个空行。
   obj.biaozhun = "";
   obj.guige ="";
   obj.weight ="";
   obj.number1 = "";
   obj.danjia ="";
   obj.zongjia ="";
   select_array.push(obj);
   w_form.render(); //更新全部表单
   init_del_click();
   listen_key_code();//监听键盘
   row++;
}

//初始化删除按钮操作
function init_del_click() {
   var delList = $("#ruku_list ").find("button#del");
   console.log("delList长度::" + delList.size());
   $(delList).click(function () {
      console.log($(this));
      if(save_flag){
         return;
      }
      //执行删除本行操作
      $(this).parent().parent().remove();
      //执行删除本行操作parent
   });
}

//初始化，供应商、材质、工艺的下拉数据
function init_superlier_technology_material(){

   $.post('/admin/supplier/list', {page:1,limit:10000}, function (result) {
      superlier_select_arr = result.data;
      superlier_select_html = superlier_select_html + "<select id='supplier_id'>";
      result.data.forEach((supplier)=>{
         superlier_select_html = superlier_select_html + '<option value="'+supplier.id+'">'+supplier.name+'</option>';
      })
      superlier_select_html = superlier_select_html + "</select>";
   }, 'json');
   /*
   $.post('/admin/technology/list', {page:1,limit:10000}, function (result) {
      technology_select_arr = result.data;
      technology_select_html = technology_select_html + "<select>";
      result.data.forEach((technology)=>{
         technology_select_html = technology_select_html + '<option value="'+technology.id+'">'+technology.name+'</option>';
      })
      technology_select_html = technology_select_html + "</select>";
   }, 'json');
   */
   $.post('/admin/material/list', {page:1,limit:10000}, function (result) {
      material_select_arr = result.data;
      material_select_html = material_select_html + "<select id='material_id'>";
      result.data.forEach((material)=>{
         material_select_html = material_select_html + '<option value="'+material.id+'">'+material.name+'</option>';
      })
      material_select_html = material_select_html + "</select>";
   }, 'json');
}

function save(){
   if(select_array.length<1){
      layer.msg("暂无数据，提交失败！");
      return;
   }
   var index = layer.msg('提交中，请稍候', {
      icon: 16,
      time: false,
      shade: 0.8
   });
   var headRemark = $("#remark").val();
   var row_num = 1;
   if (select_array.some(function(item) {
      if(item.biaozhun.length<1){
         layer.msg("第"+row_num+"行，请输入正确的标准");
         return true;
      }
      if(item.guige.length<1){
         layer.msg("第"+row_num+"行，请输入正确的规格");
         return true;
      }
      if(!test_num2(item.number1)){
         layer.msg("第"+row_num+"行，请输入正确的数量");
         return true;
      }
      if(!test_float_num(item.danjia)){
         layer.msg("第"+row_num+"行，请输入正确的单价");
         return true;
      }
      if(!test_float_num(item.zongjia)){
         layer.msg("第"+row_num+"行，请输入正确的总价");
         return true;
      }
      if(!test_float_num(item.weight)){
         layer.msg("第"+row_num+"行，请输入正确的重量");
         return true;
      }
      row_num++;
   })) {
      return;
   }

   $.post("/admin/ycl/head/ruku", {id:headId,userId: "[[${session.currentUser.id}]]",select_array:JSON.stringify(select_array),remark:headRemark}, function (result) {
      if(result.success){
         $("#save").attr("onclick","void();");
         $("#save").text("提交成功");
         save_flag = true;
         layer.confirm("提交成功", {
            btn: ['好','我知道了'] //按钮
         }, function(){
            layer.closeAll();
         }, function(){
            layer.closeAll();
         });

      }else{

      }
   }, "json");
}