“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Introduce a,

Zcell is a jquery plugin for the browser to copy excel tables. Smart table can provide you with excel like intelligent experience, support double click editing, setting formula, setting display decimal precision, drop-down box, custom cell, copy and paste, discontinuous selection, merge cell, split cell, insert row, delete row, hide row, keyboard operation and so on.

Click to visit official

Second, the reliance on

  • Jquery – 3.1.1
  • ZCell – 2.2.0

Three, implementation,

1. Introduce a script library

Add jQuery and ZCELL to the project directory’s Assest folder:

2. Create new HTML

Create a new zcell_demo.html file and create a new div tag in that file with the ID “testTableWrap” (required) :

<! <div id="testTableWrap"> </div>Copy the code

Style:

<style>
    body {
	padding: 10px;
    }
    #testTableWrap{
	width:1200px;
	height:200px;  
	border:1px solid #DDECFE; 
	overflow:hidden;
    }
</style>
Copy the code

3. Introduce CSS

Add CSS to the head of zcell_demo.html:

<link rel="stylesheet" type="text/css" href="./assest/zcell/ZCell.min.css">
Copy the code

4. Introduce JS

<! -- jquery --> <script type="text/javascript" SRC ="./assest/ jquery-31.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>Copy the code

5. Render ZCELL table

In addition to the need for a div with an ID as a container, the following four steps are essential for a successful rendering of the ZCELL table:

  • Create a smart table object with new ZCell
  • Use InserSheet to create table page objects
  • Get the table page object using GetSheet
  • Load data from an array using LoadArrData

Specific syntax can be referred to the official documents, not explained here.

< script > / / define the form data sample of var tableData = [[" ID ", "Name", "Creator", "Time"], [1, "test01", "admin", "2021-10-24"], [2, "test02", "admin", "2021-10-25"] ]; var zcell1 $(document).ready(function () { // 1. Zcell1 = new ZCell(document.getelementById ("testTableWrap")); Zcell1. InserSheet(0, 5, 5); Zcell1.getsheet (0).loadArrData (tableData); }) </script>Copy the code

6, the browser run effect

These are the basics of rendering a ZCELL table, but there are other powerful features ZCELL provides that we’ll explore.

Other functions

Here, I only introduce the common functions, the rest of the interest can go to research.

Insert column, append column, delete column

Add Insert column, Append column and Delete column buttons:

<div class="btnWarp"> <div onclick="insercol()" type=" insercol()" </ appendcol() > <button onclick="delcol()" type="button" </button>Copy the code

Click the buttons respectively, and the code is as follows:

Function insercol() {zcell1.getsheet (0).insertcol (2, 2); Function appendcol() {zcell1.getsheet (0).appendcol (2); Function delcol() {zcell1.getsheet (0).deletecol (1, 2); function delcol() {zcell1.getsheet (0).deletecol (1, 2); } </script>Copy the code

The effect is as follows:

Insert rows, append rows, delete rows

Add Insert row, append row and Delete row buttons:

<! <div class="btnWarp"> <div onclick="insertrow()" type=" insertrow "> </ div onclick="appendrow()" <button onclick="delrow()" type="button" </button>Copy the code

Click the button respectively, the implementation code:

Function insertrow() {zcell1.getsheet (0).insertrow (2, 2); Function appendrow() {zcell1.getsheet (0).appendrow (2); Function delrow() {zcell1.getsheet (0).deleterow (1, 2); function delrow() {zcell1.getsheet (0).deleterow (1, 2); } </script>Copy the code

The effect is as follows: