在數據驅動決策的時代，面對海量雜亂的數據，快速梳理出清晰的邏輯秩序是提升工作效率的關鍵。無論是篩選銷售榜單中的 Top 產品、整理員工信息表中的職級與入職時間，還是按自定義規則排列特殊業務數據，排序功能都是數據處理環節的 “剛需工具”。傳統表格工具的排序功能常受限於操作繁瑣、多條件排序邏輯複雜、自定義規則難實現等問題，而智表 ZCELL 憑藉其靈活、高效的排序能力，徹底解決這些痛點，讓數據排序從 “耗時操作” 變為 “一鍵搞定”。
一、插件初始化與數據源初始化
在演示之前，需要先做好插件和數據源初始化工作，具體步驟如下：
以下是具體代碼示例：
- 初始化 zcell插件
//初始化ZCELL
var options = {
container: document.getElementById("zcell-container"),
};
zcell_io = new ZCell.WorkBook(options);
2. 初始化工作表，設置表頭凍結，行數為10萬行
//初始化SHEET let sheetoption = { name: "sheet01", //表格名 rowCount: 100000, //行數 colCount: 10, // 列數 showRowLab: 0, //行標籤不顯示 showColLab: 0, //列標籤不顯示 rowHSize: 30, //默認行高 colWSize: 100, //默認列寬 freezeTop: 0, //頂部凍結 showFreezeLine: 0, //凍結線不顯示 }; sheet = zcell_io.AppendSheet(sheetoption);
3. 設置表頭和樣式，也可以不設置
//#region ------設置表頭 文本和樣式----- sheet.SetCellValue(0, 0, "序號"); sheet.SetCellValue(0, 1, "人物"); sheet.SetCellValue(0, 2, "等級"); sheet.SetCellValue(0, 3, "特徵1"); sheet.SetCellValue(0, 4, "特徵2"); sheet.SetCellValue(0, 5, "特徵3"); sheet.SetCellValue(0, 6, "特徵4"); sheet.SetCellValue(0, 7, "特徵5"); //表頭樣式 let headstyle1 = { hAlign: "center", fontBold: 1, backColor: "#886600", fontColor: "#FFFFFF", }; sheet.SetCellStyle(0, 0, headstyle1); sheet.SetCellStyle(0, 1, headstyle1); sheet.SetCellStyle(0, 2, headstyle1); sheet.SetCellStyle(0, 3, headstyle1); sheet.SetCellStyle(0, 4, headstyle1); sheet.SetCellStyle(0, 5, headstyle1); sheet.SetCellStyle(0, 6, headstyle1); sheet.SetCellStyle(0, 7, headstyle1); //設置列寬 sheet.SetColWidth(3, 3, 200); //設置列寬 //#endregion ------設置表頭 文本和樣式-----
4. 準備數據集和數據源，並綁定到工作表
//準備數據集 var datas = []; for (let i = 0; i < 100000; i++) { let randv = getRandomInt(1, 4); let sv; if (randv == "1") sv = "甲等"; else if (randv == "2") sv = "乙等"; else if (randv == "3") sv = "丙等"; else if (randv == "4") sv = "丁等"; let item = { rowno: "行號" + i, person: "徒弟" + getRandomInt(1, 4), status: sv, lableval: i * 2 + 1, lableval2: i * 2 + 2, lableval3: i * 2 + 3, lableval4: i * 2 + 4, lableval5: i * 2 + 5, }; datas.push(item); } //#region --------準備數據源-------- let option2 = { name: "data1", type: 1, //0- datacard，1是 datatable data: datas, startrow: 1, // datatable 式需要設置 startcol: "A", // datatable 式需要設置 autoBindColumn: true, }; let ds = sheet.CreatDataSource(option2); //綁定數據源 sheet.BindDataSource(ds);
數據加載後效果如下：
二、單字段基礎排序：極簡操作，秒變有序數據
智表 ZCELL 的基礎排序功能遵循 “簡單易用” 的設計原則，開發者無需複雜配置，通過幾行代碼即可實現單字段的升序或降序排列，滿足日常數據整理的基礎需求。無論是文本、數字還是日期類型的數據，智表 ZCELL 都能精準識別並快速排序，讓雜亂數據瞬間變得條理清晰。
- 排序參數設置，設置排序的列號和順序，支持升序和降序
//排序參數設置 let option = { sortinfo: [ { sortindex: "B", //排序列號，必須大寫，對B列進行排序 sortorder: "asc", //支持 asc 和 desc ，按照升序排序 }, ], };
2. 開始排序，調用排序方法，知名排序起始行列和結束行列的範圍。
//開始時間 var myTime1 = window.performance.now(); //執行排序方法，排序範圍為 0行，0列開始到 99999行 和 7列 sheet.SortArea(0, 0, 99999, 7, option); //結束時間 var myTime2 = window.performance.now(); let timecost = (myTime2 - myTime1) / 1000; $("#timecost1").html(timecost + "秒"); //輸出耗時
點擊按鈕後，數據立即按照 B列 從低到高排列，排序範圍內的數據都會跟隨排列，不在排序範圍內數據則會保持不動。耗時顯示0.85秒，整個過程無延遲，操作直觀高效。
三、多列排序：複雜條件下的精準數據梳理
在實際業務場景中，單一字段排序往往無法滿足需求。例如，HR 整理員工表時，需要先按 “部門” 分組，再按 “入職時間” 降序排列（同一部門內，新員工在前）；電商平台分析訂單時，需先按 “訂單狀態”（已付款＞待付款＞已取消）排序，再按 “下單時間” 降序排列。此時，智表 ZCELL 的多列排序功能就能發揮關鍵作用，支持按多個字段的優先級依次排序，讓數據邏輯更貼合業務場景。還是以上面已經初始化的數據源為例進行演示。
- 多列排序時排序參數設置。
通過數組配置排序規則，數組中字段的順序即為排序優先級（先按第一個字段排序，若第一個字段值相同，則按第二個字段排序，以此類推）。我們先以B列作為主排序字段，相同時再用D列作為排序字段。
//排序參數設置 let option = { sortinfo: [ { sortindex: "B", //排序列號，必須大寫 先以B列升序排序 sortorder: "asc", //支持 asc 和 desc }, { sortindex: "D", //再以D列降序排序 sortorder: "desc", }, ], };
2. 執行排序，執行排序方法與單列排序時相同，非常簡單。
//開始時間 var myTime1 = window.performance.now(); //執行排序方法 sheet.SortArea(0, 0, 99999, 7, option); //結束時間 var myTime2 = window.performance.now(); let timecost = (myTime2 - myTime1) / 1000; $("#timecost1").html(timecost + "秒");
點擊按鈕排序後，數據先按照人物名稱進行排序，同一人物時，再按照特徵1列值進行排序，整體耗時顯示0.88秒，整個過程無延遲。
三、自定義排序：突破規則限制，適配特殊業務場景
除了基礎排序和多列排序，實際工作中還會遇到 “非標準排序規則” 的需求。例如：
- 電商平台的 “商品狀態” 需按 “在售＞預售＞下架” 排序（而非字母或數字順序）；
- 物流系統的 “配送優先級” 需按 “緊急＞普通＞延遲” 排序；
- 教育機構的 “班級類型” 需按 “實驗班＞重點班＞普通班” 排序。
這些場景下，傳統排序功能無法滿足需求，而智表 ZCELL 的自定義排序功能，允許開發者通過自定義比較函數，實現任意規則的排序，徹底突破標準排序的限制。
繼續以上面的初始化數據為列，步驟如下：
- 自定義比較函數，如下所示，我們定義固定數組，按照數組內元素數據位置進行比較。
//自定義排序函數 function mysortfun(a, b) { let datas = ["甲等", "乙等", "丙等", "丁等"]; let indexa = datas.indexOf(a); let indexb = datas.indexOf(b); return indexa - indexb; }
2. 定義排序參數，對於C列（等級列），我們採用自定義比較函數進行比較，引用我們定義好的函數
//排序參數設置 let option = { sortinfo: [ { sortindex: "B", //排序列號，必須大寫 sortorder: "asc", //支持 asc 和 desc }, { sortindex: "C", sortorder: "asc", sortfun: mysortfun, //這裏引用自定義比較函數， }, ], };
3. 執行排序，調用方法與前面一致
//開始時間 var myTime1 = window.performance.now(); //執行排序方法 sheet.SortArea(0, 0, 99999, 7, option); //結束時間 var myTime2 = window.performance.now(); let timecost = (myTime2 - myTime1) / 1000; $("#timecost1").html(timecost + "秒");
點擊按鈕後，數據先按照人物名稱進行排序，同一人物時，再按照等級列進行排序，整體耗時顯示0.92秒，整個過程無延遲。
通過自定義比較函數，任何複雜的排序邏輯都能輕鬆實現，讓排序功能完全適配業務場景。
四、智表 ZCELL 排序功能的核心優勢
相比傳統表格工具或其他前端表格組件，智表 ZCELL 的排序功能具有三大核心優勢：
- 高效性能：採用優化的排序算法，即使面對 10 萬級海量數據，排序響應時間仍控制在 1秒 以內，無卡頓延遲；
- 操作靈活：支持單列排序、多列排序、自定義排序三種模式，可通過 API 快速切換，也可結合 UI 組件（如排序按鈕、下拉菜單）實現用户自主排序；
無論是企業級的數據管理系統（如 CRM、ERP）、電商平台的商品分析模塊，還是教育機構的成績管理工具，智表 ZCELL 的排序功能都能幫助開發者快速實現數據梳理，讓用户輕鬆駕馭數據秩序，高效挖掘數據價值。
現在，智表 ZCELL 已開放免費試用，立即接入智表zcell官網進行測試，體驗排序功能帶來的便捷與高效！如需定製化排序方案，還可聯繫技術團隊獲取專屬支持，讓數據處理效率再升級。
