美文网首页
Bootstrap table 单击列标题或表头事件 控制多列的

Bootstrap table 单击列标题或表头事件 控制多列的

作者: friendshi洛初Udo邭 | 来源:发表于2021-09-27 11:07 被阅读0次

    ...
    columns :[
    {
    field: 'checkBox',
    checkbox: true,
    align: 'center'
    },
    {
    field: 'billNo',
    title: '提单号',
    valign: 'middle',
    align: 'center' ,
    formatter: function totalNameFormatter(value, row, index) {
    if(value==null){
    return "";
    }
    return "<span title="+value+">"+value+"</span>";
    }
    },
    ],
    ,queryParams: function (params) {
    $('th')[6].children[0].className = 'sortable both customSort'; // 找到需要排序的th加样式
    ...
    }

    // 表头点击事件 这里面的变量可以封装抽离可自行封装
    let show_hide_flag = "show";// 点击/隐藏标识符
    (document).on("click","th",function() { let field =(this).attr("data-field");// 获取表格标题的data-field属性
    if ("billNo" == field){
    if ("show" == show_hide_flag){
    ('th')[6].children[0].className = 'th-inner sortable both customSort desc'; let trarr=table.find('tbody > tr').get();
    trarr.sort(function(a, b) {
    let col1=(a).children('td').eq(6).text().toUpperCase(); let col2=(b).children('td').eq(6).text().toUpperCase();
    let colOne = col1?col1:-1, colTwo = col2?col2:-1
    return colOne.localeCompare(colTwo)
    }
    );
    .each(trarr, function(i, row) { //将排好序的数组重新填回表格('tbody').append(row);
    }
    );
    show_hide_flag = "hide";
    }else{
    ('th')[6].children[0].className = 'th-inner sortable both customSort asc'; let trarr=table.find('tbody > tr').get();
    trarr.sort(function(a, b) {
    let col1=(a).children('td').eq(6).text().toUpperCase(); let col2=(b).children('td').eq(6).text().toUpperCase();
    let colOne = col1?col1:-1, colTwo = col2?col2:-1
    return colTwo.localeCompare(colOne)
    }
    );
    .each(trarr, function(i, row) { //将排好序的数组重新填回表格('tbody').append(row);
    }
    );
    show_hide_flag = "show";
    }

        }
    })
    

    可供参考的自定义排序方法

    //字符串排序,包括中文,按首字母A-Z顺序排序
    sortStr= function(a, b) {
    var a = a?a:-1, b = b?b:-1
    return a.localeCompare(b)
    },
    //按日期排序
    sortDate= function(a, b) {
    var a = a?a:-1, b = b?b:-1
    return Date.parse(a) - Date.parse(b)
    },
    //按数字大小排序
    sortNum= function(a, b) {
    var a = a?a:-1, b = b?b:-1
    return a-b
    }

    相关文章

      网友评论

          本文标题:Bootstrap table 单击列标题或表头事件 控制多列的

          本文链接:https://www.haomeiwen.com/subject/bbuhnltx.html