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、工單系統等），顯著縮短應用開發周期，并提升數據處理效率，實現業務流程自動化與多系統無縫集成。