前端表单字段展示排序？

作者站长头像
站长
· 阅读数 20

假定表单数据 origin 。

const orignal = [
    { dbName: "STATUS", ... },
    { dbName: "NAME", ... },
    { dbName: "DEPART", ... },
    ...
]

现要将 origin 按如下优先级，针对 dbName 字段进行排序显示

"NAME", "AGE", "LEVEL", "CODE", "DEPART", "NUMBER", "STATUS"
const ruleSort = ["NAME", "AGE", "LEVEL", "CODE", "DEPART", "NUMBER", "STATUS"];

const devCardInfo = origin.sort(({ dbName: dbNameA }, { dbName: dbNameB }) => {
    const iA = ruleSort.indexOf(dbNameA.toUpperCase());
    const iB = ruleSort.indexOf(dbNameB.toUpperCase());

    if (iA === iB) return 0;
    if (iA === -1) return 1;
    if (iB === -1) return -1;

    return iA - iB;
  });

有没有更成熟的方案？

不好意思我没有表达清楚，补充一下：ruleSort中提及的字段并不完整，

  1. 未提及的字段照常显示（无需在意排序）
  2. 提及的字段也不一定全部存在
  3. 不会有重复的 dbName
回复
1个回答
avatar
test
2024-07-14

这样？

const ruleSort = ["NAME", "AGE", "LEVEL", "CODE", "DEPART", "NUMBER", "STATUS"];
const origin = [
    { dbName: "STATUS", },
    { dbName: "NAME", },
    { dbName: "DEPART",},
    { dbName: "any",},
    { dbName: "NUMBER",},
]
// i+1是因为下面的||运算符，如果使用??可以直接设置为i
const indexes = ruleSort.reduce((res,k,i) => (res[k] = i+1, res),{})
const devCardInfo = origin.sort(({ dbName: n1 }, { dbName: n2 }) => (indexes[n1]||Infinity) - (indexes[n2]||Infinity));
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容