今天记录下layui 的数据表格添加复杂搜索功能

layui是一个非常适合新手学习的一个适合后台前端的一个框架，虽然现在已经不在运营了，很可惜，时代的车轮一直在滚动着。

layui官方示例有一个简单的数据表格搜索，但是他主要是配合演示表格重载用的，并没有实质上的功能，今天下午研究了半天，终于实现了我要的效果：

大概就是这样，做一个复杂或者简单的搜索都可以，下面不废话直接说思路，我这个搜索框是一个独立的表单，监听表单提交，然后layui拿到提交上来的数组，然后each下这个数组判断是否填写了搜索条件如果都是空的直接弹窗，就不执行搜索了，节省了资源。

然后将拼接url，在循环字段将键和值拼接成数组

然后将数组转换成字符串

拼接获取表格数据的地址+参数，然后刷新表格数据

大概就是这个思路下面上代码：

//监听提交
      form.on('submit(search)', function(data){
        let field = data.field;
        let status = false;
        $.each(field, function (index, value) {
           if (value) {
            status = true;
            return false;
           }
        });
        let param = [];
        let paramStr = '';
        if (status) {          
          $.each(field, function (i, v) {
            if (v) {
              param.push(i + '=' + v);
            }
          });
          paramStr = param.join('&');
          table.reload('goods_order_reload',{
            url: listUrl + '?' + paramStr,
          })
        }
        return false;
      });

我以前做搜索，都是默认列表一个页面，搜索一个页面，这样做之后就可以在默认列表页直接搜索很方便省去了不少工作，大佬勿喷! 有不懂的可以联系我们！