还在手撸在线EXCEL功能？智表ZCELL帮你省掉80%代码，用户满意度翻倍！

“*你的系统数据录入太慢了！ *”，“*你的系统就不能像EXCEL一样灵活设置公式和导入导出！ *”，您是否正在忍受客户吐槽而头疼，那么赶快来关注智表zcell插件吧，智表致力于打造一款 “ 轻量级Excel插件，无缝嵌入Web，让你的用户在浏览器上也能感受到EXCEL般极致的操作体验！ ”

一、认识智表 ZCELL 插件

智表 ZCELL 是一款前端 EXCEL 插件，可以为客户提供excel般的智能体验，并带有灵活的单元格选中功能，强大的复制与粘贴功能，以及灵活的外观样式设置，内置370余项公式函数，同时具备强大的导入导出、极致的数据加载性能。基于canvas+jquery开发，兼容当前主流浏览器，适应性好，简单、灵活、易上手，使用门槛极低，体积小，运行速度快，可满足千万级数据加载。

二、智表应用场景实例

1、开发可编辑前端列表页面，让你的用户直接粘贴录入数据

在所有的web页面开发过程中，列表都是必不可少的，列表数据的采集，一般都是要通过新增表单页实现，用户数据录入的效率都是非常低的，这里通过实现可编辑列表页，让用户通过列表页直接维护数据，且可以直接通过粘贴方式实现，不用逐行手工维护，大幅提高数据录入速度，为终端用户提供最优体验。 效果如下：

核心代码如下：

• 插件表格初始化

    //初始化SHEET
        let sheetoption = {
          name: "sheet01",  //表格名
          rowCount: 50,  //行数
          colCount: 10,   // 列数
          showRowLab: 0,  //行标签不显示
          showColLab: 0,  //列标签不显示
          rowHSize: 30,  //默认行高
          colWSize: 100,  //默认列宽
          freezeTop: 1,  //顶部冻结
          freezeLeft: 1,  //左侧冻结
          showFreezeLine: 0,  //冻结线不显示
        };
        sheet = zcell.AppendSheet(sheetoption);    

• 创建数据源，并设置列绑定关系

let option2 = {
          name: "data1",
          type: 1, //0- datacard，1是 datatable
          data: datas,
          startrow: 2, //  datatable 式需要设置
          startcol: "A", //  datatable 式需要设置
        };
        let ds = sheet.CreatDataSource(option2);  //创建数据源
 
        //设置列绑定关系
        ds.Mapping("A", "cn"); //列名必须大写，插入行列时，绑定关系会随动
        ds.Mapping("B", "book");
        ds.Mapping("C", "auth");
        ds.Mapping("D", "name");
        ds.Mapping("E", "label1");
 
        ds.Mapping("F", "label2");
        ds.Mapping("G", "label3");
        ds.Mapping("H", "label4");
        ds.Mapping("I", "operate");
        ds.Mapping("J", "operate");

• 绑定 数据源

//绑定数据源
sheet.BindDataSource(ds);

2、开发可编辑表单页面，用户可一键粘贴整个表单页面数据

表单页面是web应用系统最基础的功能，表单页面上一般都有很多标签和数据输入组件构成，一个页面20~30个输入项是正常的数据量，多的甚至上百个，用户输入数据时，需要逐个数据框进行输入，数据录入的效率非常低，通过智表zcell插件,可以实现表单页所有数据一键复制（可从EXCEL表复制，也可从另一个zcell表单页面上复制），可大幅提高用户是数据录入的效率。 效果如下：

核心代码如下：

• 插件表格初始化

//初始化ZCELL
        var options = {
          container: document.getElementById("zcell-container"),
          statusBarVisible: false, //状态栏设置默认不显示
        };
        
           //初始化SHEET
        let sheetoption = {
          name: "sheet01", //表格名
          rowCount: 12, //行数
          colCount: 10, // 列数
          showRowLab: 0, //行标签不显示
          showColLab: 0, //列标签不显示
          rowHSize: 30, //默认行高
          colWSize: 100, //默认列宽
          GridVisible: false, //网格线不显示
        };
        sheet = zcell.AppendSheet(sheetoption);

• 创建 数据源 ，并设置列绑定关系

  //#region  --------准备数据源--------
        let option1 = {
          name: "person",
          type: 0, //0- datacard，1是 datatable
          data: data,
        };
        let ds = sheet.CreatDataSource(option1);
 
        //#endregion  --------准备数据源--------
 
        //设置单元格映射关系
        ds.Mapping("D2", "book"); //单元格名必须大写，插入行列时，绑定关系会随动
        ds.Mapping("H2", "auth");
        ds.Mapping("D4", "name");
        ds.Mapping("H4", "label1");
        ds.Mapping("D6", "label2");
        ds.Mapping("H6", "label3");
        ds.Mapping("D8", "label4");

3、370多种 Excel 计算公式，可满足用户大量数据在线实时计算要求

针对财务、销售等需要大量数据计算功能时，370多种 Excel 计算公式，可以实现大量复杂数据计算场景，且支持用户自定义、内置公式等，满足各类复杂业务场景。示例如下：

核心代码如下：

• 设置计算公式示例

  sheet.SetFormula(6, 3, "D8+D9");
  sheet.SetFormula(6, 4, "E8+E9");
  sheet.SetFormula(6, 5, "F8+F9");
  sheet.SetFormula(6, 6, "ABS(G8)+G9"); //支持直接使用公式函数，详细参考函数清单

  sheet.SetCellValue(6, 1, "合计值");
  sheet.SetFormula(6, 2, "SUM(D7:G7)*3-TEST1(1,2)"); // TEST1 为自定义函数，注意函数名、单元格名必须大写。

4、强大的导入导出功能，帮用户快速导出页面数据、边框、样式、格式等。

数据的导入导出是web应用最常用的功能，智表支持导入导出EXCEL、本地文件保存打开、远程模板加载，极简的一行代码，就可帮您实现数据的输入输出，再也不用为导入导出的繁琐头疼。导入导出功能，为纯js实现，不依赖其他安装插件。示例如下：

实现一个导出功能，只有简单的一个方法直接调用即可：

 var expoption = {
    filename: "导出test", //文件名字，不能为空
    // expindex: 0, //导出表单索引，默认 -1为全部
    // expstyle: false, //导出样式 默认 true
    // expformula: false, //导出公式 默认 true
    // expfreeze: false, //导出冻结行列 默认 true
  };
  zcell.ExportExcel(expoption); 执行导出

三、智表主要功能概览

• 主要功能明细：

• 功能演示：

四、智表核心优势

当前市场上主流EXCEL插件产品对比如下，相对于其他产品，智表zcell定位轻量级，主打性价比。

|

五、智表快速调用

您可以将下面代码保存为html文件进行查看。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智表快速测试</title>
    <!-- 添加zcell插件引用--start -->
    <script
      type="text/javascript"
      src="http://www.zcell.net/zcelldemo/pro/zcell/ZCell.min.js"
    ></script>
    <script
      type="text/javascript"
      src="http://www.zcell.net/zcelldemo/pro/zcell/ZCell.licenseKey.js"
    ></script>
    <!-- 添加zcell插件引用--end -->
  </head>
  <body>
    <div>
      <!-- 插件容器 -->
      <div id="tt1" style="width: 100%; height: 100%">
        <div id="zcell-container" style="width: 100%; height: 600px"></div>
      </div>
    </div>
  </body>

  <script>
    var zcell; //声明全局变量
    var sheet; //声明全局变量
    //页面加载时执行
    window.onload = function () {
      //创建智表对象
      var options = {
        container: document.getElementById("zcell-container"),
      };
      zcell = new ZCell.WorkBook(options);

      //创建工作表对象
      let sheetoption = {
        name: "sheet01",
        rowCount: 50,
        colCount: 20,
      };
      sheet = zcell.AppendSheet(sheetoption);

      //合并单元格
      sheet.MergeCell(0, 0, 0, 8);
      //设置单元格文本
      sheet.SetCellValue(
        0,
        0,
        "欢迎体验智表zcell，保存本页面到本地用浏览器打开即可操作体验，或者访问右侧官网体验更多功能。"
      );

      //链接按钮--官网
      var ctype_link2 = {
        code: "linkbutton",
        object: {
          text: "智表（ZCELL）官网",
          fun: function openurl(e, data) {
            window.open("http://www.zcell.net", "_blank"); //_self
          },
        },
      };
      sheet.SetCellType(0, 9, ctype_link2);
      sheet.MergeCell(0, 9, 0, 10);
      sheet.SetCellStyle(0, 9, {
        fontColor: "#0000FF",
        hAlign: "center",
        fontUnderline: 1,
      });
    };
  </script>
</html>

六、快速进阶通道

通过以上介绍，相信您已经对智表有了一个基础的了解，如果您想快速解放自我，尽快让您的客户满意，那么快来访问智表插件官网快速查看插件相关资料和教程，网站有演示程序页面供您亲身体验感受丰富的插件功能，智表还有QQ交流群755407212（加群注明“智表咨询”），随时等待您的加入。