当前位置 博文首页 > mataodehtml的博客:layui表格表头排序实现desc和asc的互换

    mataodehtml的博客:layui表格表头排序实现desc和asc的互换

    作者:[db:作者] 时间:2021-08-10 22:15

    ? ? ? ? 由于layui的动态表格有默认的排序,默认排序是当前页面的数据排序,但是往往我们不需要单页面的排序,我们需要访问数据库的那种,需要整体数据的排序,这是我们需要手动禁用前端自动排序功能。

    //一下是layui处理自动排序的代码块,但是这里有很多的不足的之处,我就直接在上面改了
    
    //禁用前端自动排序,以便由服务端直接返回排序好的数据
    table.render({
      elem: '#id'
       ,id:'idTest' //这里给一个id值,下面的重新加载就是指的这个表格
      ,autoSort: false //禁用前端自动排序。注意:该参数为 layui 2.4.4 新增
      //,… //其它参数省略
    });
     
    //监听排序事件 
    table.on('sort(test)', function(obj){ //这里的test指的是layui的一个监听事件lay-filter中的值
      console.log(obj.field); //当前排序的字段名
      console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
      console.log(this); //当前排序的 th 对象
     
      //尽管我们的 table 自带排序功能,但并没有请求服务端。
      //有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如:
      table.reload('idTest', { //这里的idTest就是我们上面给的加载的id值
        initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。
        ,where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
          field: obj.field //排序字段
          ,order: obj.type //排序方式
        }
      });
      
      layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
    });

    ? ? ? ? 我们会发现,我们操作的时候layui会有默认的三种排序的方式null,asc,desc这样你传入后台的时候就需要进行判断,因为我们排序只能有二种的desc和asc互换。

    ? ? ? ? 这里我是用的ssm框架,springmvc接受参数的时候由于是刷新的原来的表格,所有我们在默认的时候也是给的三个参数,page,limit,field,order,默认的时候是没有后二个参数,我们需要判断,当后二个参数不为null的时候我们进行的就是表头的字段排序,由于是三个参数值得互换,我们只需要二个参数的互换desc和asc。我的做法是在容器给一个参数num默认为0,没进行一次排序的时候num++,如果num%2==0,我们给的是order = "desc",如果num%2==1,我们给的是order="asc",这样传过来的是null的时候我们也可以进行的desc和asc的互换了。

    cs