「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。
一、介绍
智表(zcell)是一款浏览器仿 excel 表格的 jquery 插件。智表可以为你提供 excel 般的智能体验，支持双击编辑、设置公式、设置显示小数精度、下拉框、自定义单元格、复制粘贴、不连续选定、合并单元格、拆分单元格、插入行列、删除行列、隐藏行列、键盘操作等。
二、依赖
- jquery-3.1.1
- ZCell-2.2.0
三、实现
1、引入脚本库
在项目目录的 assest 文件夹中引入 jQuery 和 ZCELL：
2、新建 HTML
新建一个 zcell_demo.html 文件，并在该文件中新建一个 id 为 “testTableWrap” 的 div 标签（必需）：
<!-- 表格容器 -->
<div id="testTableWrap">
</div>
样式：
<style>
body {
padding: 10px;
}
#testTableWrap{
width:1200px;
height:200px;
border:1px solid #DDECFE;
overflow:hidden;
}
</style>
3、引入 CSS
在 zcell_demo.html 的 head 中引入css：
<link rel="stylesheet" type="text/css" href="./assest/zcell/ZCell.min.css">
4、引入 JS
<!-- jquery -->
<script type="text/javascript" src="./assest/jquery-3.1.1.min.js"></script>
<!-- zcell -->
<script type="text/javascript" src="./assest/zcell/ZCell.min.js"></script>
<script type="text/javascript" src="./assest/zcell/ZCell.register.js"></script>
5、渲染 ZCELL 表格
要想成功渲染 ZCELL 表格，除了需要一个有 id 的 div 作为容器以外，渲染时，以下4个步骤是必不可少的：
- 使用 new ZCell 创建智表对象
- 使用 InserSheet 创建表页对象
- 使用 GetSheet 获取表页对象
- 使用 LoadArrData 从数组加载数据
具体语法可参考官方文档，这里不做解释。
<script>
// 定义的表格数据样例
var tableData = [
["ID", "Name", "Creator", "Time"],
[1, "test01", "admin", "2021-10-24"],
[2, "test02", "admin", "2021-10-25"]
];
var zcell1
$(document).ready(function () {
// 1.使用 ZCell 创建智表对象
zcell1 = new ZCell(document.getElementById("testTableWrap"));
// 2.使用 InserSheet 创建表页对象
zcell1.InserSheet(0, 5, 5);
// 3.使用 GetSheet 获取表页对象，并使用 LoadArrData 从数组加载数据
zcell1.GetSheet(0).LoadArrData(tableData);
})
</script>
6、浏览器中运行效果
以上内容是渲染一个 ZCELL 表格的基本内容，除此以外，ZCELL 还提供其他强大的功能，下面我们来一一研究。
四、其他功能
在这里，我只介绍常用功能，剩下的有兴趣的可以去研究。
1、插入列、追加列、删除列
新增插入列、追加列与删除列按钮：
<div class="btnWarp">
<button onclick="insercol()" type="button">插入列</button>
<button onclick="appendcol()" type="button">追加列</button>
<button onclick="delcol()" type="button">删除列</button>
</div>
分别点击按钮，实现代码如下：
<script>
//插入列：在第二列位置插入2列
function insercol() {
zcell1.GetSheet(0).InsertCol(2, 2);
}
//追加列：在最后面追加2列
function appendcol() {
zcell1.GetSheet(0).AppendCol(2);
}
//删除列：在第一列位置删除2列
function delcol() {
zcell1.GetSheet(0).DeleteCol(1, 2);
}
</script>
效果如下：
2、插入行、追加行、删除行
新增插入行、追加行与删除行按钮：
<!-- 按钮容器 -->
<div class="btnWarp">
<button onclick="insertrow()" type="button">插入行</button>
<button onclick="appendrow()" type="button">追加行</button>
<button onclick="delrow()" type="button">删除行</button>
</div>
分别点击按钮，实现代码：
<script>
//插入行：在第二行位置插入2行
function insertrow() {
zcell1.GetSheet(0).InsertRow(2, 2);
}
//追加行：在最后面追加2行
function appendrow() {
zcell1.GetSheet(0).AppendRow(2);
}
//删除行：在第一行位置删除2行
function delrow() {
zcell1.GetSheet(0).DeleteRow(1, 2);
}
</script>
效果如下：
