美文网首页
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 单击列标题或表头事件 控制多列的

    ...columns :[{field: 'checkBox',checkbox: true,align: 'ce...

  • html02 2018-09-03

    表格:table 表头(表格信息)thead 列 th 信息:body 行 tr 列 td...

  • antd table 可伸缩列 react-resizable

    antd 自带的可伸缩列控制列宽,不能对多表头、合并单元格的table起效果,于是优化了一下 奉上截图2张,没有录...

  • element-ui table列表自定义表头,修改列标题样式、

    在之前的博客中,提到在element-ui table列表自定义表头,修改列标题样式、添加tooltip,需要re...

  • 表格

    1)基本信息 table:定义一个表格 caption:定义一个标题,一个表格居中的标题 th:定义表头,就是每列...

  • table固定表头和列

    表格固定表头和列 背景 在项目中大多数的表格,都是使用ui库提供的表格,ui库提供的表格为我们封装了很多很实用的功...

  • HTML基础(下)笔记

    ctrl+{:左缩进,右同理; table:表格 tr:行 td:列 thead:表头 tbody:...

  • 报错集锦

    1、列的数目比列的名字要多 分析原因:表头列数小于实际列数。如下图 修改方法:读取的时候去掉表头 还有一种原因说是...

  • 2017.9.4

    表格的学习 表格 table thead 表头 (可以忽略) tr 行 th 列 tbody 表体...

  • el-table表头和表身对不齐

    发现问题:当参数多 的时候,el-table 表头与 表身列不对齐 解决方法:添加如下css

网友评论

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

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