10万行数据1秒内排序，智表 ZCELL 让你轻松驾驭数据秩序

云淡轻风 發表於 2026-1-26 11:06:00

10万行数据1秒内排序，智表 ZCELL 让你轻松驾驭数据秩序

<div>
在数据驱动决策的时代，面对海量杂乱的数据，快速梳理出清晰的逻辑秩序是提升工作效率的关键。无论是筛选销售榜单中的 Top 产品、整理员工信息表中的职级与入职时间，还是按自定义规则排列特殊业务数据，排序功能都是数据处理环节的 “刚需工具”。传统表格工具的排序功能常受限于操作繁琐、多条件排序逻辑复杂、自定义规则难实现等问题，而智表 ZCELL 凭借其灵活、高效的排序能力，彻底解决这些痛点，让数据排序从 “耗时操作” 变为 “一键搞定”。
<h2 data-id="heading-0">一、插件初始化与数据源初始化</h2>
在演示之前，需要先做好插件和数据源初始化工作，具体步骤如下：
以下是具体代码示例：
<ol>
<li>初始化 zcell插件</li>
</ol>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"> //初始化ZCELL
 var options = {
 container: document.getElementById("zcell-container"),
 };
 zcell_io = new ZCell.WorkBook(options);
</pre>
</div>
　　
2. 初始化工作表，设置表头冻结，行数为10万行
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn"> 
<div class="cnblogs_code">
<pre> //初始化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);</pre>
</div>
 
</div>
</div>
</div>
3. 设置表头和样式，也可以不设置
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn"> 
<div class="cnblogs_code">
<pre>//#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 ------设置表头文本和样式-----</pre>
</div>
 
</div>
</div>
</div>
4. 准备数据集和数据源，并绑定到工作表
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">
<div class="cnblogs_code">
<pre> //准备数据集
 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);</pre>
</div>
 
</div>
</div>
</div>
<pre><code class="hljs language-ini code-block-extension-codeShowNum" lang="ini"></code></pre>
数据加载后效果如下：
<img src="https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/54c0f2a5a17c46a1b1fbdd864340d182~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5biG5byg6Iqz5pi-:q75.awebp?rk3s=f64ab15b&x-expires=1769952415&x-signature=G2yReE3uAGphfHnVz7GTWKRB6rQ%3D" alt="" class="medium-zoom-image" loading="lazy">
<h2 data-id="heading-1">二、单字段基础排序：极简操作，秒变有序数据</h2>
智表 ZCELL 的基础排序功能遵循 “简单易用” 的设计原则，开发者无需复杂配置，通过几行代码即可实现单字段的升序或降序排列，满足日常数据整理的基础需求。无论是文本、数字还是日期类型的数据，智表 ZCELL 都能精准识别并快速排序，让杂乱数据瞬间变得条理清晰。
<ol>
<li>排序参数设置，设置排序的列号和顺序，支持升序和降序</li>
</ol>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">  
<div class="cnblogs_code">
<pre>//排序参数设置
 let option = {
 sortinfo: [
 {
 sortindex: "B", //排序列号，必须大写，对B列进行排序
 sortorder: "asc", //支持 asc 和 desc ，按照升序排序
 },
 ],
 };</pre>
</div>
</div>
</div>
</div>
<pre><code class="hljs language-csharp code-block-extension-codeShowNum" lang="csharp"></code></pre>
2. 开始排序，调用排序方法，知名排序起始行列和结束行列的范围。
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn"> 
<div class="cnblogs_code">
<pre>//开始时间
 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 + "秒");//输出耗时</pre>
</div>
 
</div>
</div>
</div>
点击按钮后，数据立即按照 B列从低到高排列，排序范围内的数据都会跟随排列，不在排序范围内数据则会保持不动。耗时显示0.85秒，整个过程无延迟，操作直观高效。
<h2 data-id="heading-2">三、多列排序：复杂条件下的精准数据梳理</h2>
在实际业务场景中，单一字段排序往往无法满足需求。例如，HR 整理员工表时，需要先按 “部门” 分组，再按 “入职时间” 降序排列（同一部门内，新员工在前）；电商平台分析订单时，需先按 “订单状态”（已付款＞待付款＞已取消）排序，再按 “下单时间” 降序排列。此时，智表 ZCELL 的多列排序功能就能发挥关键作用，支持按多个字段的优先级依次排序，让数据逻辑更贴合业务场景。还是以上面已经初始化的数据源为例进行演示。
<ol>
<li>多列排序时排序参数设置。</li>
</ol>
通过数组配置排序规则，数组中字段的顺序即为排序优先级（先按第一个字段排序，若第一个字段值相同，则按第二个字段排序，以此类推）。我们先以B列作为主排序字段，相同时再用D列作为排序字段。
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">  
<div class="cnblogs_code">
<pre>//排序参数设置
 let option = {
 sortinfo: [
 {
 sortindex: "B", //排序列号，必须大写先以B列升序排序
 sortorder: "asc", //支持 asc 和 desc
 },
 {
 sortindex: "D",//再以D列降序排序
 sortorder: "desc",
 },
 ],
 };</pre>
</div>
</div>
</div>
</div>
<pre><code class="hljs language-csharp code-block-extension-codeShowNum" lang="csharp"></code></pre>
2. 执行排序，执行排序方法与单列排序时相同，非常简单。
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn"> 
<div class="cnblogs_code">
<pre>//开始时间
 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 + "秒");</pre>
</div>
</div>
</div>
</div>
<pre><code class="hljs language-ini code-block-extension-codeShowNum" lang="ini"></code></pre>
点击按钮排序后，数据先按照人物名称进行排序，同一人物时，再按照特征1列值进行排序，整体耗时显示0.88秒，整个过程无延迟。
<h2 data-id="heading-3">三、自定义排序：突破规则限制，适配特殊业务场景</h2>
除了基础排序和多列排序，实际工作中还会遇到 “非标准排序规则” 的需求。例如：
<ul>
<li>电商平台的 “商品状态” 需按 “在售＞预售＞下架” 排序（而非字母或数字顺序）；</li>
<li>物流系统的 “配送优先级” 需按 “紧急＞普通＞延迟” 排序；</li>
<li>教育机构的 “班级类型” 需按 “实验班＞重点班＞普通班” 排序。</li>
</ul>
这些场景下，传统排序功能无法满足需求，而智表 ZCELL 的自定义排序功能，允许开发者通过自定义比较函数，实现任意规则的排序，彻底突破标准排序的限制。
继续以上面的初始化数据为列，步骤如下：
<ol>
<li>自定义比较函数，如下所示，我们定义固定数组，按照数组内元素数据位置进行比较。</li>
</ol>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">  
<div class="cnblogs_code">
<pre> //自定义排序函数
 function mysortfun(a, b) {
 let datas = ["甲等", "乙等", "丙等", "丁等"];
 let indexa = datas.indexOf(a);
 let indexb = datas.indexOf(b);
 return indexa - indexb;
 }</pre>
</div>
 
</div>
</div>
</div>
2. 定义排序参数，对于C列（等级列），我们采用自定义比较函数进行比较，引用我们定义好的函数
<div class="cnblogs_code">
<pre>//排序参数设置
 let option = {
 sortinfo: [
 {
 sortindex: "B", //排序列号，必须大写
 sortorder: "asc", //支持 asc 和 desc
 },
 {
 sortindex: "C",
 sortorder: "asc",
 sortfun: mysortfun, //这里引用自定义比较函数，
 },
 ],
 };</pre>
</div>
 
3. 执行排序，调用方法与前面一致
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">  
<div class="cnblogs_code">
<pre>//开始时间
 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 + "秒");</pre>
</div>
 
</div>
</div>
</div>
点击按钮后，数据先按照人物名称进行排序，同一人物时，再按照等级列进行排序，整体耗时显示0.92秒，整个过程无延迟。
通过自定义比较函数，任何复杂的排序逻辑都能轻松实现，让排序功能完全适配业务场景。
<h2 data-id="heading-4">四、智表 ZCELL 排序功能的核心优势</h2>
相比传统表格工具或其他前端表格组件，智表 ZCELL 的排序功能具有三大核心优势：
<ol>
<li>高效性能：采用优化的排序算法，即使面对 10 万级海量数据，排序响应时间仍控制在 1秒以内，无卡顿延迟；</li>
<li>操作灵活：支持单列排序、多列排序、自定义排序三种模式，可通过 API 快速切换，也可结合 UI 组件（如排序按钮、下拉菜单）实现用户自主排序；</li>
</ol>
无论是企业级的数据管理系统（如 CRM、ERP）、电商平台的商品分析模块，还是教育机构的成绩管理工具，智表 ZCELL 的排序功能都能帮助开发者快速实现数据梳理，让用户轻松驾驭数据秩序，高效挖掘数据价值。
现在，智表 ZCELL 已开放免费试用，立即接入智表zcell官网进行测试，体验排序功能带来的便捷与高效！如需定制化排序方案，还可联系技术团队获取专属支持，让数据处理效率再升级。
</div> 
来源：https://www.cnblogs.com/devilzh/p/19532209

頁: [1]

琼殿技术论坛's Archiver

10万行数据1秒内排序，智表 ZCELL 让你轻松驾驭数据秩序