10万行数据1秒内排序，智表 ZCELL 让你轻松驾驭数据秩序
在数据驱动决策的时代，面对海量杂乱的数据，快速梳理出清晰的逻辑秩序是提升工作效率的关键。无论是筛选销售榜单中的 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官网进行测试，体验排序功能带来的便捷与高效！如需定制化排序方案，还可联系技术团队获取专属支持，让数据处理效率再升级。
浙公网安备 33010602011771号