1. <tfoot id='XPgWq'></tfoot>
      <legend id='XPgWq'><style id='XPgWq'><dir id='XPgWq'><q id='XPgWq'></q></dir></style></legend>
      <i id='XPgWq'><tr id='XPgWq'><dt id='XPgWq'><q id='XPgWq'><span id='XPgWq'><b id='XPgWq'><form id='XPgWq'><ins id='XPgWq'></ins><ul id='XPgWq'></ul><sub id='XPgWq'></sub></form><legend id='XPgWq'></legend><bdo id='XPgWq'><pre id='XPgWq'><center id='XPgWq'></center></pre></bdo></b><th id='XPgWq'></th></span></q></dt></tr></i><div id='XPgWq'><tfoot id='XPgWq'></tfoot><dl id='XPgWq'><fieldset id='XPgWq'></fieldset></dl></div>

      <small id='XPgWq'></small><noframes id='XPgWq'>

          <bdo id='XPgWq'></bdo><ul id='XPgWq'></ul>

        layui表格内下拉框怎么实现

        时间:2023-11-10

        • <bdo id='GArCI'></bdo><ul id='GArCI'></ul>
            <tbody id='GArCI'></tbody>
          <tfoot id='GArCI'></tfoot>

            <small id='GArCI'></small><noframes id='GArCI'>

            <legend id='GArCI'><style id='GArCI'><dir id='GArCI'><q id='GArCI'></q></dir></style></legend>
            <i id='GArCI'><tr id='GArCI'><dt id='GArCI'><q id='GArCI'><span id='GArCI'><b id='GArCI'><form id='GArCI'><ins id='GArCI'></ins><ul id='GArCI'></ul><sub id='GArCI'></sub></form><legend id='GArCI'></legend><bdo id='GArCI'><pre id='GArCI'><center id='GArCI'></center></pre></bdo></b><th id='GArCI'></th></span></q></dt></tr></i><div id='GArCI'><tfoot id='GArCI'></tfoot><dl id='GArCI'><fieldset id='GArCI'></fieldset></dl></div>

                • layui表格内下拉框怎么实现?最终实现效果如下图:

                  2:使用  templet  模版  (代码如下 前提 :接口正常 能获取到数据并展示)
                     table.render({
                              elem: '#munu-table'
                              , url: 'xxx.com/xxxx'
                              ,id:"table"
                              
                              ,page:{
                                  limit: 15
                                  , limits: [15, 20, 30, 40, 50, 100, 150, 200, 250, 300, 400, 500, 800, 1000]
                                  // ,curr:localStorage.getItem('spgl_curr') ? localStorage.getItem('spgl_curr') : 1
                              }
                              ,totalRow: true //开启合计行
                              , cols: [[
                                  {type: 'checkbox', width: 40, sort: true},
                                  {field: 'id', width: 140, title: 'id',hide:true},
                                  {field: 'image', width: 70, title: '图片',templet:function (d) {
                                          return '<img class="productimages" width="16px" src='+d.image+'>';
                                      }},
                                  {field: 'list_number', width: 100, title: '清单编号'},
                                  {field: 'storage_id', width: 100, title: '入库编号'},
                                  {field: 'batch_number', width: 80, title: '批次号'},
                                  {field: 'sku', width: 80, title: 'sku'},
                                  {field: 'storage_quantity', width: 90, title: '入库数量'},
                                  {field: 'sample_quantity', width: 90, title: '留样数量'},
                                  {field: 'actual_packing_quantity', width: 115, title: '实际装箱数量'},
                                  {field: 'purchaser', width: 80, title: '采购人'},
                   
                                  {field: 'outbound_date', width: 100, title: '出库日期'},
                   
                                  {field: 'pending_days', width: 100, title: '待处理天数'},
                                  {field: 'processing_status', width: 100, title: '处理进度'},
                                  {field: 'processor', width: 80, title: '处理人'},   
                                  {field: 'created_time', width: 100, title: '创建时间'},
                                  {field: 'modified_time', width: 100, title: '修改时间'},
                   
                                  {
                                              field: 'processing_method',
                                              title: '处理方式',
                                              align: 'center',
                                              width: 200,
                                              templet: function (d) {
                                                  var selectHtml = '<select name="paid" class="sel_xlk" lay-filter="stateSelect"  lay-verify="required" data-state="' + d.paid + '" data-value="' + d.id + '" >' +
                                                      '        <option value="签补协议">签补协议</option>' +
                                                      '         <option value="等待供应商补发数量">等待供应商补发数量</option>' +
                                                      '         <option value="报损">报损</option>' +
                                                      '         <option value="解除协议">解除协议</option>' +
                                                      '    </select>';
                   
                                                  return d.processing_method + selectHtml;
                                              }
                                          },
                   
                              ]]
                              , done: function(res, curr, count) {
                                  console.log(res); // 在控制台打印获取到的数据
                   
                                  $(".layui-table-body").css('overflow','visible');
                                  $(".layui-table-box").css('overflow','visible');
                                  $(".layui-table-view").css('overflow','visible');
                   
                                  var tableElem = this.elem.next('.layui-table-view');
                                  count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                                  layui.each(tableElem.find('select[name="paid"]'), function (index, item) {
                                      var elem = $(item);
                                      elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
                                  });
                                  form.render();//刷新表单
                                  
                               }
                          });
                  注意:templet 的用法 在手册中 只是简单的举了几个例子 。
                  3:注意done 里面的回调  :
                  done: function(res, curr, count) {
                                  console.log(res); // 在控制台打印获取到的数据
                   
                                  $(".layui-table-body").css('overflow','visible');
                                  $(".layui-table-box").css('overflow','visible');
                                  $(".layui-table-view").css('overflow','visible');
                   
                                  var tableElem = this.elem.next('.layui-table-view');
                                  count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                                  layui.each(tableElem.find('select[name="paid"]'), function (index, item) {
                                      var elem = $(item);
                                      elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
                                  });
                                  form.render();//刷新表单
                   
                                  
                               }

                  layui.each(tableElem.find('select[name="paid"]')  pid 是 field: 'pid', 的值。

                  上面的代码 加上后才能正常的展示 下拉 数据    如果没有 这段代码  点击 下拉图标 不会起作用。

                  4:修改数据:

                  
                              form.on('select(stateSelect)', function (data) {//修改类型
                              let id = data.elem.dataset.value; //当前数据的id
                              let processing_method = data.elem.value; //当前字段变化的值
                              // 传值:表单变化后的值传递到后台数据库进行实时修改,例如,根据id修改这条数据的状态。
                   
                              console.log(id);
                              console.log(processing_method);
                              $.ajax({
                                  type: 'post',
                                  url:'xxx.com/xxx', // ajax请求路径
                                  data: {
                                      id: id,
                                      processing_method: processing_method
                                  },
                                  success: function(data){
                                     var  data = JSON.parse(data)
                                     layer.msg(data.msg);
                                   
                                      // layer.msg('修改成功');
                   
                                      // console.log(data);
                                      //执行重载
                                      //table.reload('bizInvoiceTable');
                                      //window.location.href = Feng.ctxPath + '/bizInvoice'
                                  }
                              });
                          });
                   

                  总结: 我遇到最多的问题就是 选择 下拉图标的时候 不能展示下拉的数据 。  所以一定要注意 红色字段。

                  上一篇:layui formSelects实现下拉框select多选,并且编辑时候回显 下一篇:没有了

                  相关文章

                  <tfoot id='P0OMD'></tfoot>

                    1. <legend id='P0OMD'><style id='P0OMD'><dir id='P0OMD'><q id='P0OMD'></q></dir></style></legend>

                      <small id='P0OMD'></small><noframes id='P0OMD'>

                        <bdo id='P0OMD'></bdo><ul id='P0OMD'></ul>
                      <i id='P0OMD'><tr id='P0OMD'><dt id='P0OMD'><q id='P0OMD'><span id='P0OMD'><b id='P0OMD'><form id='P0OMD'><ins id='P0OMD'></ins><ul id='P0OMD'></ul><sub id='P0OMD'></sub></form><legend id='P0OMD'></legend><bdo id='P0OMD'><pre id='P0OMD'><center id='P0OMD'></center></pre></bdo></b><th id='P0OMD'></th></span></q></dt></tr></i><div id='P0OMD'><tfoot id='P0OMD'></tfoot><dl id='P0OMD'><fieldset id='P0OMD'></fieldset></dl></div>