bootstrap-table自定义列排序

bootstrap-table要实现排序的功能需要在给定的列添加两个属性

1：sortable（配置项）/data-sortable(html中的属性) 为true

2：如果列表中的数据是单纯的数值则使用sortName（配置项）/data-sort-name(html中的属性)来配置根据表中的那列数据进行排序即可。如果列表中的数据为非数值，则需要通过sorter（配置项）/data-sorter（html中的属性）来自定义排序规则

由于开发中使用了"|"的字符，我写了的自定义排序，代码如下

/***自定义列排序* @param valA* @param valB* @returns {number|*}*/
function customColumnSort(valA,valB){console.log(valA)let valAStr = String(valA);let valBStr = String(valB);if(valAStr.indexOf("|")>0) {valA = +valAStr.split("|")[0];valB = +valBStr.split("|")[0];}return compareNumber(valA,valB);
}/*** 比较值的大小* 如果numA,numB都是非数值,则返回0,* 如果numA为数值numB为非数值,则返回1,* 如果numA为非数值，numB为数值返回-1,* 如果numA,numB都为数值返回numA-numB的值* @param numA* @param numB* @returns {number}*/
function compareNumber(numA,numB){if(!numberRex.test(numA) && !numberRex.test(numB)){return 0;}else if(!numberRex.test(numA) && numberRex.test(numB)){return -1;}else if(numberRex.test(numA) && !numberRex.test(numB)){return 1;}else{return numA - numB;}
}

这样在配置项中sorter指向customColumnSort即可实现排序功能

bootstrap-table自定义列排序相关推荐

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
bootstrap table 搜索列formatter之后，单字节搜索异常
bootstrap table 搜索列formatter之后,单字节搜索异常最近发现搜索这边出现这个问题,这样搜索没有效果后面发现是因为搜索列formatter之后就会出现这个问题,那么我们就多生 ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
Django:bootstrap table自定义查询实现
参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
BootStrap Table：列参数
官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 列参数表格的列参数定义在 jQuery.fn.bootstra ...
iview table 自定义列_案例 | iview中Table：拖拽适配列、自定义固定列、合并行
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...

bootstrap-table自定义列排序

bootstrap-table自定义列排序相关推荐

最新文章

热门文章