zoukankan      html  css  js  c++  java
  • bootstrap_table自定义排序方法

    公司老项目使用的是bootstrap框架,表格使用的是bootstrap-table。当前有个需求,需要按照自定义方法来排序。

    比如要求,某些数据固定排在头部,其他的则按照对应字段排序。

    最新的bootstrap-table中有customSort方法。

    解释:The custom sort function is executed instead of the built-in sort function, takes three parameters: 

    • sortName: the sort name.
    • sortOrder: the sort order.
    • data: the rows data.

    但是,项目中使用的是1.9.1 没有此方法。

    于是曲线救国,采用prepend方法,插入要固定的数据。

    初始化table之后,和每次点击排序名称的时候,添加两行代码:

    $(this.table).bootstrapTable("refreshOptions", {data: data}) // data, 正常排序的数据
    $(this.table).bootstrapTable("prepend", topFixed); // topFixed, 要固定在顶部的数据

    这样就可以把需要固定显示在顶部的数据固定了,后面的数据依然按照列名对用字段排序。

    customSort用法:

    首先看一下对比效果:

    默认排序:

     customSort:

    直接上代码:添加customSort有两种方法,一种是添加data-custom-sort属性,另一种是配置项

        <table id="basic_table" data-custom-sort="customSort" ></table>
    
    
        $("#basic_table").bootstrapTable({
          data: dataT,
          customSort: customSort,
          columns: [
            {
              field: 'id',
              title: 'ID'
            },
            {
              field: 'name',
              title: '姓名',
              sortable: true,
            },
            {
              field: 'code',
              title: '编号'
            }
          ]
        });

    customSort 方法接收三个参数:

        // 自定义排序方法,排序名称,排序方法(升序/降序),数据列表
        function customSort(sortName, sortOrder, data) {
          data.sort(function(a,b) {
            let aa = a[sortName].toString().replace(/[^d]/g, ''); // 非数字替换成空字符串
            let bb = b[sortName].toString().replace(/[^d]/g, '');
            if(sortOrder == 'desc') {
              return aa-bb;
            } else {
              return bb-aa;
            }
          })
          
        }
  • 相关阅读:
    ElasticSearch查询多条件同时满足时返回所需数据
    Linux环境下安装ElasticSearch
    微博抓取照片视频
    numpy 常用方式
    Centos最小化安装 AWVS 的坑
    使用centos安装nessus 8.15,并解除IP限制
    Linux CentOS7 开通端口外网端口访问权限
    VSCode配置C语言环境
    Python MySQL
    web7
  • 原文地址:https://www.cnblogs.com/xguoz/p/12599417.html
Copyright © 2011-2022 走看看