zoukankan      html  css  js  c++  java
  • 关于layui中tablle 渲染数据后 sort排序问题

    最近在使用easyweb框架做后台管理,案例可见https://gitee.com/whvse/EasyWeb。

    其中遇到了 sort排序问题,

    html代码:<table class="layui-table" id="userList-table" lay-filter="userList-table"></table>


    js代码: layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var layer = layui.layer;
    var util = layui.util;
    var admin = layui.admin;
    var access_token=config.getToken().access_token;

    // 渲染表格
    table.render({
    id:'userList-table',
    elem: '#userList-table',
    url: config.base_server + 'gameend/userList',
    method: 'GET',
    where: {
    access_token: access_token
    },
    page: true,
    limit: 100,
    cols: [[
    {type: 'numbers'},
    {field: 'username', title: '用户名'},
    {field: 'nickname', sort: false, title: '昵称'},
    {field: 'points', sort: true, title: '积分'},
    {field: 'drawnum', sort: false, title: '抽奖次数'},
    {field: 'invitenum', sort: true, title: '邀请好友数'},
    {field: 'ip', sort: false, title: 'ip注册地'},
    {field: 'createtime', sort: false, title: '注册时间'},
    {field: 'status', sort: false, templet: '#userList-tpl-state', title: '状态'},
    {align: 'center', toolbar: '#userList-table-bar', title: '操作'},
    {align: 'center', toolbar: '#userInfo-table-bar', title: '查看详情'},
    ]],
    done: function(res, page, count){
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度

    $("[data-field='points']").each(function(){
    $(this).addClass("points");
    });
    $("[data-field='drawnum']").each(function(){
    $(this).addClass("drawnum");
    });
    $("[data-field='10']").each(function(){
    $(this).addClass("ckxq");
    })


    }
    });


    var type="";
    table.on('sort(userList-table)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    // console.log(obj.field); //当前排序的字段名
    //console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
    //console.log(this); //当前排序的 th 对象

    //type 0 积分降序 1积分升序 2邀请数降序 3邀请数升序
    //
    if(obj.field=="points"){ //积分排序
    if(obj.type=="desc"){ //降序 type=0
    type=0;
    }else if(obj.type=="asc"){ //升序 type=1
    type=1;
    }else if(obj.type==null){
    type="";
    }
    }

    if(obj.field=="invitenum"){ //积分排序
    if(obj.type=="desc"){ //降序 type=0
    type=2;
    }else if(obj.type=="asc"){ //升序 type=1
    type=3;
    }else if(obj.type==null){
    type="";
    }
    }

    //console.log(type);
          table.reload('userList-table', {
           initSort: obj, //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数
           where: {
           access_token: access_token,
         type:type
        }});
      
          });


    });


    参考文档:http://www.cnblogs.com/Ofsoul/p/9633397.html
  • 相关阅读:
    selenium Grid2 分布式自动化测试环境搭建
    Python Appium 开启Android测试之路
    C#导出数据到CSV和EXCEL文件时数字文本被转义的解决方法
    浅谈 DML、DDL、DCL的区别
    让EntityFramework6支持SQLite
    System.Drawing.Color的颜色对照表
    清除远程桌面连接记录和SQLSERVER 连接记录的办法
    Jquery操作select选项集合!
    asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文件接口
    Log4net 根据日志类别保存到不同的文件,并按照日期生成不同文件名称
  • 原文地址:https://www.cnblogs.com/lynna/p/10083596.html
Copyright © 2011-2022 走看看