美文网首页
react+antd进行table列排序

react+antd进行table列排序

作者: 进击的三文鱼 | 来源:发表于2019-05-15 16:27 被阅读0次

项目要进行样式调整,需求制定需要对列表中个别列进行排序,项目使用的是antd插件,其中table空间的sort属性可以对排序进行处理,但是具体处理规则要自己编写。因为处理的页面较多,所以我们抽出了公共的方法。
需要注意空值的处理
代码如下

 title: locale.get('CreatTime'),
        dataIndex: 'createdDate',
        sorter: compareSortFunction("createdDate"),
        width: 140,
/**
 * 表格排序
 * @param propeties
 * @returns {function(*, *): *}
 */
export function compareSortFunction(propeties) {
  var compareSort = (rowa, rowb) => sortFunction(rowa[propeties], rowb[propeties]);
  return compareSort;
}
/**
 *  表格排序方法
 * @param a
 * @param b
 * @returns {number}
 */
export function sortFunction(a, b) {
  if (!a) {
    a = "";
  }
  if (!b) {
    b = "";
  }
  if ((typeof a) !== "number") {
    return a.localeCompare(b);
  }

}

功能完成如图


image.png

相关文章

  • react+antd进行table列排序

    项目要进行样式调整,需求制定需要对列表中个别列进行排序,项目使用的是antd插件,其中table空间的sort属性...

  • ReactTable的说明

    table样式 属性说明 普通table 翻页 排序 进阶table table的某些列是需要自定义样式,有些时候...

  • Excel快速入门教程10-排序和筛选

    排序 您可以在一列或多列上对 Excel数据进行排序 。 方式有升序和降序。 单列 要对列进行排序,请执行以下步骤...

  • 使用antd的table实现多列排序

    在antd3.0的时候,Table标签的排序只支持单列排序,需求是要多列排序,并且是传参到后台让后台来排序,于是在...

  • 数据库基础:MySQL实战查询排序

    排序 为了方便查看数据,可以对数据进行排序 将行数据按照列1进行排序,如果某些行列1的值相同时,则按照列2排序,以...

  • ng-table插件(四-排序基础)

    基本排序 ng-table提供一个表头来增加基本的排序功能。(1)指定具体哪一列需要排序(2)可以通过 NgTab...

  • Vue2.x + Element table 多列选中、批量选中

    需求分享:在table中可以对多列进行多选,单选操作。看了selection部分并不支持在table中的多列操作,...

  • 2018-07-27排序和分页

    排序 为了方便查看数据,可以对数据进行排序 语法: 将行数据按照列1进行排序,如果某些行列1的值相同时,则按照列2...

  • sort命令说明

    对一组文件进行排序 对数字进行排序 按逆序进行排序 按月份排序 5.测试一个文件是否已经排序过。 依据键或列进行排...

  • 数据结构与算法(第二季):希尔排序(Shell Sort)

    希尔排序(Shell Sort) 一、概念 希尔排序把序列看作一个矩阵,分为m列,逐列进行排序。 m从某个整数逐渐...

网友评论

      本文标题:react+antd进行table列排序

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