半岛外围网上直营

 SpreadJS 是葡萄城推出的基于 HTML5 标准的纯前端表格组件，具备高性能、跨平台、与 Excel高度兼容的产品特性，支持 Vue、React、Angular、NextJS、Nuxt 等主流前端开发框架，其设计目的是帮助开发者快速实现浏览器中各类 Excel 表格应用，已成功在数据填报、在线表格文档、类 Excel 报表制作与生成、企业预决算、计量检测、实验室管理等领域得到广泛应用，可让您快速具备与飞书、语雀、灵犀文档等同源的表格开发能力。

立即获取SpreadJS v18.0 Update1正式版下载

 在数据处理领域，Excel 以其直观易用的筛选与排序功能，成为众多用户日常办公的 “必备工具”。无论是从海量员工信息里精准定位特定部门成员，还是按多维度优先级梳理销售数据，筛选与排序都是提升数据可读性、分析效率的关键手段。即便是在电商平台，仍有大量从业者依赖 Excel 来快速筛选、分析数据。

然而，Excel 存在明显短板 —— 无法对多平台数据进行整合。当企业面临多数据源、海量数据处理需求时，就需要一款既能兼容 Excel 操作习惯，又具备多数据源整合能力的电子表格工具。经过多方探寻，SpreadJS 脱颖而出。

选择 SpreadJS，核心在于它高度契合 Excel 的交互体验，能适配业务人员既有操作习惯，实现线下报表向线上的无缝迁移；其强大的自动化数据处理与报表生成能力，可大幅减少人工冗余操作；它还能兼容复杂报表与多数据源，支持主流前端框架集成。同时，SpreadJS提供单元格级权限管控与协同编辑功能，满足了企业级数据安全与共享的需求。

接下来，结合一组旅游数据，先带大家认识 SpreadJS 筛选，排序功能。

 这个面板与 Excel 高度一致，涵盖了排序、按颜色排序、按颜色筛选、文本筛选以及列表筛选等功能。

一、筛选功能

升序 / 降序

 升序 / 降序：点击 “升序”，该列数据按升序规则排列，是针对当前列的快速单例升序操作；点击 “降序”，则按降序规则排列，为单例降序快速操作方式。

按颜色排序 / 筛选

 按颜色排序 / 筛选：“按颜色排序” 可依据单元格背景颜色或字体颜色对数据排序，比如将背景为红色的单元格数据排前，便于从视觉层面整理数据；“按颜色筛选” 能筛选出具有特定背景颜色或字体颜色的单元格数据，快速定位符合颜色特征的数据行。

文本/数字/日期筛选

 文本/数字/日期筛选：可对文本类型数据进行复杂筛选，如筛选出包含特定文字、以特定文字开头 / 结尾、等于 / 不等于某一文字的记录，精准定位文本数据。

文本筛选中的高级用法

1. 通配符筛选

 使用场景：当你需要筛选出包含特定字符模式的数据时，通配符就非常有用。Excel 中有两个通配符：问号（?）代表单个字符，星号（*）代表任意多个字符。

操作示例：

 a.在 “city” 列进行筛选，如果要筛选出城市名是两个字的城市，在自定义筛选的条件框中输入 “??”；

b.若要筛选出城市名中包含 “安” 字的城市，输入 “安”。

2.多条件逻辑筛选

使用场景：当需要根据多个文本条件筛选数据时，可使用 “与” 和 “或” 逻辑。

 操作示例：假设要筛选出城市名中包含 “西” 或者包含 “南” 的城市，在自定义筛选中，第一行条件选择 “包含”，输入 “西”，第二行条件选择 “包含”，输入 “南”，然后选择 “或” 关系；若要筛选出城市名中既包含 “北” 又包含 “京” 的城市（这种情况一般针对特定数据，如只有 “北京” 满足） ，则选择 “与” 关系。

3.开头或结尾匹配筛选

使用场景：当你关注数据的开头或结尾字符时，可以使用此类筛选。

 操作示例：在 “city” 列筛选城市名以 “宝” 开头的城市，在自定义筛选条件框中选择 “开头是”，并输入 “宝”；若要筛选城市名以 “州” 结尾的城市，则选择 “结尾是”，输入 “州”。

数字筛选中的高级用法

1.区间筛选

使用场景：在处理数值型数据（如销售额、年龄等）时，需要筛选出某个数值区间内的数据。

 操作示例：假设有一列是游客的消费金额数据，要筛选出消费金额在 500 - 1000 元之间的数据。在自定义筛选中，第一行条件选择 “大于或等于”，输入 “500”，第二行条件选择 “小于或等于”，输入 “1000”，并选择 “与” 关系。

2.基于平均值、最大值、最小值的筛选

使用场景：当你需要根据数据的统计特征进行筛选时，这种方法很有效。

 操作示例：对于游客的年龄数据，先计算出平均年龄，然后在自定义筛选中选择 “大于” 或 “小于”，并输入平均年龄值，筛选出年龄大于或小于平均值的游客数据；或者筛选出年龄大于最大年龄减 10 的数据，即选择 “大于”，并通过公式计算出 “最大值 - 10” 的结果后输入（如果数据量较大，可借助函数如 MAX 计算最大值 ）。

3.前 N 项筛选

使用场景：在处理排名或关注 top 数据时使用。

 操作示例：对于游客消费金额数据，要筛选出消费金额最高的前 10 位游客。在自定义筛选中，选择 “10 个最大的值”，然后在弹出的对话框中，将 “10” 修改为你需要的数值，如 “5”，即可筛选出消费金额最高的前 5 位游客数据。

日期筛选中的高级用法

1.基于时间段的筛选

使用场景：当你需要筛选出特定时间段内的日期数据时，如筛选出某一年、某一季度或某几个月的数据。

 操作示例：在 “date” 列筛选 2023 年的数据，在自定义筛选中，第一行条件选择 “大于或等于”，输入 “2023 - 01 - 01”，第二行条件选择 “小于或等于”，输入 “2023 - 12 - 31”，并选择 “与” 关系；若要筛选出 2023 年第二季度的数据，输入 “2023 - 04 - 01” 和 “2023 - 06 - 30”。

2.相对日期筛选

 使用场景：根据当前日期或某个固定日期的相对时间进行筛选，如筛选出过去 30 天内的数据、未来一周的数据等。

 操作示例：假设当前日期是 2024 - 05 - 01，要筛选出过去 30 天内的旅游订单日期数据。在自定义筛选中，选择 “大于”，输入 “=TODAY () - 30”（TODAY () 是 Excel 中的日期函数，返回当前日期），即可筛选出从 2024 - 04 - 01 到 2024 - 05 - 01 的数据。

列表搜索

在搜索框输入关键词，能快速筛选出该列中包含该关键词的数据项，方便在大量数据中查找特定内容。

 全选 / 取消全选：“全选” 勾选后，该列所有数据项被选中，显示对应数据行；“取消全选” 取消勾选后，该列所有数据项不被选中，可重新选择需要的数据项。

 数据项列表：列出该列所有不同数据项，通过勾选或取消勾选特定数据项，可筛选出包含这些数据项的行，精准控制显示的数据内容。

二、排序功能

在排序面板中，支持设置多条件排序规则：

•  添加 / 删除 / 复制条件：点击 “添加条件”，可新增排序条件，实现多列数据的组合排序，比如先按 “tourist_attraction” 列排序，再添加 “city” 列作为次要排序条件，满足复杂排序需求；“删除条件” 可移除已添加的排序条件，方便调整规则；“复制条件” 能快速复制已有排序条件，减少重复操作。

•  排序规则设置区域：通过 “列（主要关键字）” 下拉菜单，可选择要排序的列，如图中选择 “tourist_attraction” 列，依据数据中的不同列确定排序字段；“排序依据” 选择 “数值”，表示按列中数据的数值大小排序，此外还支持按 “单元格颜色”“字体颜色”“单元格图标” 等排序，满足对数据多种属性的排序需求；“次序” 选择 “升序”，即按从小到大（数值）或从 A 到 Z（文本）的顺序排列数据，也可选择 “降序” 实现反向排列。

•  选项按钮：点击后进入更详细的排序设置界面，可设置排序时是否区分大小写（针对文本数据）、排序方向（按行或按列）等，进一步细化排序规则。

而除了上述提到的功能，SpreadJS还提供了一些扩展的能力。

三、扩展功能

1.中文拼音首字母排序

function compareSize(value1, value2) {
return value1.toString().localeCompare(value2.toString(), "zh");
}

sheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
// 可以根据 info.range 判断是否是需要处理的范围
info.compareFunction = compareSize;
});

通过上述的代码，监听排序操作，使其按照中文拼音首字母排序。

2.自动扩展筛选区域

 当创建一个筛选并且只选择一个单元格时，SpreadJS 将扩展筛选区域，直到区域周围的单元格都是空的。

创建筛选后，SpreadJS 将筛选区域扩展到原始值以下，直到出现空值。

四、示例

下面通过两个示例，看看如何运用这些筛选排序功能：

示例一：高学历游客线上支付偏好与景区关联分析

• 筛选操作：
  • 对 “education” 列进行文本筛选，勾选 “本科”“硕士及以上” 等学历选项，筛选出高学历游客相关数据。
  • 对 “pay_meth” 列进行筛选，勾选 “线上团购”“支付宝” 等线上支付方式选项。
• 排序操作：
  • 以 “tourist_attraction” 为主要关键字，设置 “数值” 排序依据，选择 “升序”，使景区按序排列。
  • 添加 “pay_meth” 为次要关键字，同样 “数值” 升序，让同一景区内不同支付方式也有序呈现。
• 分析目的：通过筛选排序，能清晰呈现高学历游客在不同景区的线上支付偏好，助力景区针对高学历游客优化线上支付服务与营销，比如在高学历游客青睐的景区，加大线上支付优惠活动推广。

示例二：优质景区境外游客交通方式分析

• 筛选操作：
  • 对 “level” 列进行筛选，勾选 “4A”“5A” 等级选项，聚焦优质景区数据。
  • 对 “visitor_ty” 列进行文本筛选，筛选出 “华侨”“外国人” 等境外游客相关数据。
• 排序操作：
  • 以 “level” 为主要关键字，“数值” 升序（或降序，依查看习惯），将景区按等级排序。
  • 添加 “transport” 为次要关键字，“数值” 升序，让同一等级景区内的交通方式有序展示。
• 分析目的：操作后，可直观了解优质景区中境外游客的主要交通方式，景区可据此在交通枢纽处（如对应交通方式站点）设置景区专属服务点，或与交通运营方合作推出针对境外游客的交通 + 景区游览套餐。

示例三：景区淡旺季与游客消费及折扣关联的高级分析

• 筛选操作：
  • 利用文本筛选功能，对 “date” 列设置 “自定义筛选”，筛选出每年 1 - 3 月（淡季）和 7 - 8 月（旺季）的数据。
  • 结合多列筛选，同时对 “pay_meth” 列筛选出 “线下团购”“线上团购”“现金” 等主要消费支付方式，对 “discount” 列筛选出折扣为 0、0.6、0.85、0.9 等不同折扣区间的数据。
• 排序操作：
  • 采用多条件优先级排序，首先以 “date” 为主要关键字，“数值” 升序，将淡季和旺季数据依次排列。
  • 添加 “discount” 为次要关键字，“数值” 降序，让同一时间段内高折扣数据优先显示。
  • 再添加 “pay_meth” 为第三关键字，“数值” 升序，使相同折扣下不同支付方式有序呈现。
• 高级功能运用及分析目的：
  • 借助 SpreadJS 的单元格级权限管控，可设置仅相关市场分析人员能查看和编辑此筛选排序后的数据，保障数据安全。同时利用协同编辑功能，团队成员能在线共同对数据进行标注、补充分析思路。通过这样的高级筛选排序，能深入剖析景区淡旺季不同折扣策略下游客的消费支付偏好，为景区在淡旺季制定更精准的营销与价格策略提供数据支撑，比如旺季可针对高折扣且热门的支付方式推出组合优惠，淡季则通过特定支付方式的折扣活动吸引游客。

无论是日常办公中对数据的基础处理，还是企业级多源海量数据的深度分析，SpreadJS都以其类 Excel 的友好操作与强大拓展能力，为数据筛选排序工作带来高效与便捷，成为数据处理领域的得力助手。

本文内容源自

关于慧都科技

慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。

 慧都科技是葡萄城的中国区的合作伙伴，葡萄城作为低代码领域的优秀产品供应商，通过企业级低代码开发平台（支持可视化设计、组件化开发及多引擎集成），助力企业快速构建高复杂度、高价值的管理系统（如ERP、工单系统等），显著缩短应用开发周期，并提升数据处理效率，实现业务流程自动化与多系统无缝集成。