首页 > 其他分享 >js table sort

js table sort

时间:2024-06-05 11:13:56浏览次数:29  
标签:sort const js field aVal fieldName table bVal

备份,后面做个整理


let zoneOverviewData = []
let sortFields = []

const getSortedRows = () => {
  let rows = [...zoneOverviewData];

  const ascFields = sortFields
    .filter((z) => z.sort === "asc")
    .sort((a, b) => (a.sortIndex > b.sortIndex ? -1 : 1));
  const descFields = sortFields
    .filter((z) => z.sort === "desc")
    .sort((a, b) => (a.sortIndex > b.sortIndex ? -1 : 1));
  console.log(ascFields, descFields);

  sortRows(ascFields, rows, "asc");
  sortRows(descFields, rows, "desc");

  function sortRows(fields, targetRows, sortType) {
    if (fields.length > 0) {
      fields.forEach((field) => {
        targetRows = targetRows.sort((a, b) => {
          let aVal = a[field.fieldName];
          let bVal = b[field.fieldName];

          const aDate = new Date(aVal);
          if (!isNaN(aDate)) {
            aVal = aDate;
            bVal = new Date(bVal);
          } else if (!isNaN(parseInt(aVal))) {
            aVal = parseInt(aVal);
            bVal = parseInt(bVal);
          } else if (!isNaN(parseFloat(aVal))) {
            aVal = parseFloat(aVal);
            bVal = parseFloat(bVal);
          } else {
            aVal = aVal.toString();
            bVal = bVal.toString();
          }

          if (sortType === "asc") {
            if (aVal < bVal) return -1;
            if (aVal > bVal) return 1;
          } else if (sortType === "desc") {
            if (aVal < bVal) return 1;
            if (aVal > bVal) return -1;
          }
          return 0;
        });
      });
    }

    return targetRows;
  }

  return rows;
};

const onToggleSort = (e) => {

    const maxSortFields = 4;
    const defaultField = {
        fieldName: '',
        sort: 'normal',
        sortIndex: -1,
        elem: '',
        img: '',
    }

    function getImgSrc(sort, field) {

        const findFields = sortFields.filter(z => z.sort === sort)
        const sortIndexes = findFields.map(z => z.sortIndex)
        const index = findIndex(sortIndexes, maxSortFields);

        function findIndex(sortIndexes, maxSortFields) {
            for (let i = 1; i <= maxSortFields; i++) {
                const findIndexField = findFields.find(z => z.sortIndex === i)
                if (!findIndexField) {
                    return i;
                }
            }
        }

        let imgSrc = `/assets/img/svg/mdi_sort-descending16-16.svg`

        if (!index) {

            field.img = imgSrc
            field.sortIndex = -1
            return imgSrc
        }

        if (sort === 'desc') {
            imgSrc = `/assets/img/svg/mdi_sort-descending${index}.svg`
        }

        if (sort === 'asc') {
            imgSrc = `/assets/img/svg/mdi_sort-ascending${index}.svg`
        }

        field.img = imgSrc
        field.sort = sort
        field.sortIndex = sort === 'normal' ? -1 : index;
        return imgSrc
    }

    const sortTypes = ['normal', 'desc', 'asc'];

    function toggleSortField(fieldName) {

        let field = sortFields.find(z => z.fieldName === fieldName)
        let imgSrc = ''
        if (!field) {
            field = defaultField
            field.elem = $(this)
            field.fieldName = fieldName

            sortFields.push(field)
        }

        let sortType = nextSortType(field.sort)
        while (sortType !== "normal" && sortFields.filter(z => z.sort === sortType && z.sortIndex !== -1).length >= maxSortFields) {
            sortType = nextSortType(sortType)
        }

        imgSrc = getImgSrc(sortType, field)
        field.elem.attr("src", imgSrc)

        renderTableRows();

        if (field.sortIndex === -1) {
            const i = sortFields.findIndex(z => z.fieldName === fieldName)
            sortFields.splice(i, 1)
        }

        function nextSortType(sortType) {
            const sortTypeIndex = sortTypes.indexOf(sortType)
            return sortTypes[(sortTypeIndex + 1) % sortTypes.length]
        }
    }

    const fieldName = $(e.target).parent().siblings('.table_head_field').data('field');
    toggleSortField.call(e.target, fieldName)
}

标签:sort,const,js,field,aVal,fieldName,table,bVal
From: https://www.cnblogs.com/fires/p/18232592

相关文章

  • 为什么MySQL的information_schema.tables字段index_length显示为0?
     为什么MySQL的information_schema.tables字段index_length显示为0? 测试版本为:MySQL社区版8.0.36 分情况1:innodb引擎的表是索引组织表,按照主键进行顺序存放。则表是索引,索引是表,index_length不会有值。如下,创建一个表,并追加主键,查看索引情况。(root@localhost11:02:2......
  • Stable Diffusion | 商业应用:服装换模特
    如标题所写,服装换模特,就是把衣服穿在模特道具上,然后拍摄成照片,通过SD处理,将模特道具替换成真人模特。这时候就有人会问,还能这样搞啊,是的,现在电商平台上已经开始通过这种方式做主图详情,不用花钱请真模特拍摄,生了一大笔运营费用。下面我们来看一下这个是怎么做的吧~1.拍摄产......
  • Ai绘画工具,Stable Diffusion插件使用攻略
    哈喽,大家好,今天给大家分享一下StableDiffusion的插件使用攻略。一、什么是插件StableDiffusion的插件主要是用来丰富SD的一些功能,例如C站助手,提示词助手,图片信息助手等插件都是为了增强SD的实用性。二、安装插件我们以C站助手为例,C站助手可以将从C站(civitai.com)下载的......
  • Stable Diffusion|创意AI LOGO制作
    Logo是一家公司的视觉形象,它代表了公司的品牌形象、理念和文化,是公司形象识别系统的重要组成部分。如果想用Logo去衍生出更多的视觉海报、元素等等。可以尝试以下方法:1LOGO首先需要准备一张具有黑色填充的Logo图片,并确保其背景为白色。再就是需要安装“ControlNet”插......
  • SpringBoot+微信支付-JSAPI{微信支付回调}
    引入微信支付SDKMaven:com.github.wechatpay-apiv3:wechatpay-java-core:0.2.12Maven:com.github.wechatpay-apiv3:wechatpay-java:0.2.12响应微信回调的封装@Getter@Setter@NoArgsConstructor@AllArgsConstructor@Accessors(chain=true)publicclassWxNotifyVo{......
  • 计算机毕业设计项目推荐,28259校园信息交流平台的设计与实现(开题答辩+程序定制+全套文
    摘 要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,校园信息交流平台被用户普遍使用,为方便用户能够可以随时进行校园信息交流平台的数据信息管理,特开发了基于校园信息交流......
  • 计算机毕业设计项目推荐,28326 校园商店管理系统的设计与实现(开题答辩+程序定制+全套文
    摘 要随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,校园商店当然也不能排除在外。校园商店是以实际运用为开发背景,运用软件工程原理和开发方法,采用Java技术构建的一个管理系统。整个开发过程首先对软件系统......
  • js 中常用的判空写法
    在JavaScript中,判空通常是为了避免null或undefined值导致的错误。以下是一些常用的判空写法:1.普通变量letvalue=...;if(value===null||value===undefined){//value是null或undefined}2.Stringletstr=...;if(!str||str.length===0){......
  • (免费领源码)Java/Mysql数据库+04770 基于Java的书籍借阅管理系统设计与实现,计算机毕业
    摘 要随着科学技术的告诉发展,我们已经步入数字化、网络化的时代。图书馆是学校的文献信息中心,是为全校教学和科学研究服务的学术性机构,是学校信息化的重要基地。图书馆的工作是学校和科学研究工作的重要组成部分,是全校师生学习和研究的重要场所。为了提高图书馆的工作效率......
  • (免费领源码)Java/Mysql数据库+04827基于PHP的高校二手物品交易系统的设计与实现,计算机
    本科生毕业论文(设计) 题   目PHP高校二手物品交易系统学   院       XXXXX     专业班级   XXXXX学生姓名       XXXX    指导教师            XXXX          撰写日期:2022年5月10日目 录摘......