js table sort

备份,后面做个整理


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)
}
posted @ 2024-06-05 11:00  灵火  阅读(6)  评论(1编辑  收藏  举报