问题代码：

table.render({
    elem: '#LAY-app-content-comm'
    ,url: layui.setter.apiUrl+'/cabinet/get?a=1'
    ,where:form.val("app-content-comment")
    ,cols: [[
      {field: 'c_No', minWidth: 100, title: '编号', sort: true}
      ,{field: 'c_Num', title: '储位数量', minWidth: 100}
      ,{field: 'c_Cen', title: '层数', minWidth: 100}
      ,{field: 'inNum', title: '在用储位', minWidth: 100}
      ,{field: 'emptyNum', title: '空置储位', minWidth: 100}
      ,{title: '操作', width: 230, align: 'center', fixed: 'right', toolbar: '#table-content-com'}
    ]]
    ,page: true
    ,limit: 10
    ,id:'list'
    ,limits: [5,10, 15, 20, 25, 30]
    ,text: '对不起，加载出现异常！'
  });

    <div class="layui-form layui-card-header layuiadmin-card-header-auto"  id="app-content-comment" lay-filter="app-content-comment">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">编号</label>
          <div class="layui-input-inline">
            <input type="text" name="a" id="a" placeholder="请输入编号" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-comm" data-type="reload" id="search" lay-submit lay-filter="LAY-app-contcomm-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>

  //搜索
  form.on('submit(LAY-app-contcomm-search)', function(data){
    var field = data.field;
    //执行重载
    table.reload('list', {
      where: field
    });
  });

以上代码有个问题，table加载接口的时候给了a=1,此时我们搜索条件里面也有一个名为 a的input，当我们点击搜索的时候，与table的冲突，会出现错误或查询数据错误的情况

此时我们把思路换掉，直接把table的参数条件绑定到form就可以了，改成如下：

table.render({
    elem: '#LAY-app-content-comm'
    ,url: layui.setter.apiUrl+'/cabinet/get'
    ,where:form.val("app-content-comment")//获取表单条件
    ,cols: [[
      {field: 'c_No', minWidth: 100, title: '编号', sort: true}
      ,{field: 'c_Num', title: '储位数量', minWidth: 100}
      ,{field: 'c_Cen', title: '层数', minWidth: 100}
      ,{field: 'inNum', title: '在用储位', minWidth: 100}
      ,{field: 'emptyNum', title: '空置储位', minWidth: 100}
      ,{title: '操作', width: 230, align: 'center', fixed: 'right', toolbar: '#table-content-com'}
    ]]
    ,page: true
    ,limit: 10
    ,id:'list'
    ,limits: [5,10, 15, 20, 25, 30]
    ,text: '对不起，加载出现异常！'
  });

通过where:form.val("app-content-comment")获取表单条件，从而把参数直接带到接口

• 本文标题： Layui之Table绑定数据与表单搜索的条件重复冲突问题
• 文章分类：【LayUI/Layer】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

留言评论

• 上一篇：Layui之Select 动态绑定
• 下一篇： Layui之获取表单值和设置表单默认值