教你开发可一键粘贴数据的表单页面，真可粘贴

最新推荐文章于 2025-09-03 16:51:19 发布

原创最新推荐文章于 2025-09-03 16:51:19 发布 · 425 阅读

CC 4.0 BY-SA版权

文章标签：

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

一、下载插件并引入

下载插件后，在head内添加引用。注意引用路径是相对路径。

<!-- 添加zcell插件引用--start -->
    <script type="text/javascript" src="./zcell/ZCell.min.js"></script>
    <script type="text/javascript" src="./zcell/ZCell.licenseKey.js"></script>
    <!-- 添加zcell插件引用--end -->

二、插入页面元素，并设置插件容器

插入页面标题和按钮元素：

<div class="form-group">
      <h2
        class="modal-title"
        class="form-control"
        style="width: 80%; height: 30px; color: #3498db"
      >
        编辑员工信息
      </h2>
      <button id="selBtn" class="btn btn-primary">保存</button>
      <button id="expbtn" class="btn btn-primary" onclick="expexcel()">
        导出EXCEL
      </button>
      <button id="addBtn" class="btn btn-primary">返回</button>
    </div>

插入智表插件容器

<div>
      <!-- 插件容器 -->
      <div id="tt1" style="width: 100%; height: 100%">
        <div
          id="zcell-container"
          style="width: 100%; height: 500px; margin: auto"
        ></div>
      </div>
    </div>

三、插件表格初始化

截止目前需要准备工作已经完成，我们就可以开始编写JS，来初始化插件了。

首先初始化一个工作簿，在指定的容器内进行创建，注意这里设置状态栏默认不显示

 //初始化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);

四、设置数据项名称标签与样式

字段名的设置，类似在EXCEL中对单元格样式的设置，可以通过代码实现，也可以通过设计器实现，保存为模板后使用时直接加载，这里可以将非录入区域设置为只读，我这里只把数据项标签设置为只读，其他单元格类似。

通过代码实现如下：

//设置表头 文本和样式
        sheet.SetCellValue(1, 1, "书籍：");
        sheet.SetCellValue(1, 5, "作者：");
        sheet.SetCellValue(3, 1, "角色：");
        sheet.SetCellValue(3, 5, "特征值1：");
        sheet.SetCellValue(5, 1, "特征值2：");
        sheet.SetCellValue(5, 5, "特征值3：");
        sheet.SetCellValue(7, 1, "特征值4：");

        //设置样式
        sheet.SetCellStyle(1, 1, lablestyle1);
        sheet.SetCellStyle(1, 5, lablestyle1);
        sheet.SetCellStyle(3, 1, lablestyle1);
        sheet.SetCellStyle(3, 5, lablestyle1);
        sheet.SetCellStyle(5, 1, lablestyle1);
        sheet.SetCellStyle(5, 5, lablestyle1);
        sheet.SetCellStyle(7, 1, lablestyle1);

        //设置只读
        let rdflag = "1";
        sheet.SetCellReadOnly(1, 1, rdflag);
        sheet.SetCellReadOnly(1, 5, rdflag);
        sheet.SetCellReadOnly(3, 1, rdflag);
        sheet.SetCellReadOnly(3, 5, rdflag);
        sheet.SetCellReadOnly(5, 1, rdflag);
        sheet.SetCellReadOnly(5, 5, rdflag);
        sheet.SetCellReadOnly(7, 1, rdflag);

        // 设置列宽;
        sheet.SetColWidth(2, 2, 10); //设置列宽
        sheet.SetColWidth(3, 3, 200); //设置列宽
        sheet.SetColWidth(6, 6, 10); //设置列宽
        sheet.SetColWidth(7, 7, 200); //设置列宽

五、数据准备

字段标签设置完成后，就可以准备数据了，数据可以是通过数据库查询出来的集合，也可以通过内存进行初始化，我这里通过内存初始化，生成了一个数据集合，因为是卡片页面，这里用单条数据来做演示

var data = {
          book: "西游记",
          auth: "吴承恩",
          name: "徒弟1",
          label1: "特征11",
          label2: "特征21",
          label3: "特征31",
          label4: "特征41",
        };

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

创建指定名称数据源，并设置每个单元格绑定数据字段值。

        //#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");

七、设置数据录入框样式

每个数据录入框的样式，相当于我们页面的的文本框格式，我这里只设置边框

//设置绑定单元格样式
        let border1 = {
          borderLeft: { color: "#808080", style: "thin" }, //左边框
          borderRight: { color: "#808080", style: "thin" }, //右边框
          borderTop: { color: "#808080", style: "thin" }, //上边框
          borderBottom: { color: "#808080", style: "thin" }, //下边框
        };

        sheet.SetCellBorder(1, 3, border1);
        sheet.SetCellBorder(1, 7, border1);
        sheet.SetCellBorder(3, 3, border1);
        sheet.SetCellBorder(3, 7, border1);
        sheet.SetCellBorder(5, 3, border1);
        sheet.SetCellBorder(5, 7, border1);
        sheet.SetCellBorder(7, 3, border1);

八、绑定数据源

以上设置全部完成后，只需要将表格绑定数据源，插件会自动按照表格设置加载数据。

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

九、导出EXCEL功能

为了方便验证粘贴效果，这里增加导出EXCEL功能，方便导出后修改数据，再粘贴回来。

        var expoption = {
          filename: "员工信息表单", //文件名字，不能为空
        };
        //导出
        zcell.ExportExcel(expoption);

小结

至此页面基本功能已经完成，大致效果如下

测试效果

首先点击导出按钮到EXCEL中修改数据，修改后选中数据区域（也可从左上角开始选中），按CTRL+C进行复制。

回到表单页面，选中数据区左上角，按CTRL+V进行一键粘贴，可以观察数据粘贴后效果。

可以看出，所有文本框内数据值已经按照修改后的更新了（字段标签设置只读的，粘贴时会自动跳过），达到了快速录数的目标，在一些线下收集数据的场景，能够大幅提高效率。

以上就是全部内容了，希望能够为你提供一点参考。如有其他更好的建议，欢迎评论。