可编辑前端列表页面，让你的用户直接粘贴录入数据
在所有的web页面开发过程中，列表都是必不可少的，列表数据的采集，一般都是要通过新增表单页实现，用户数据录入的效率都是非常低的，这里通过实现可编辑列表页，让用户通过列表页直接维护数据，且可以直接通过粘贴方式实现，不用逐行手工维护，大幅提高数据录入速度，为终端用户提供最优体验。我的实现是通过引入智表ZCELL插件实现的，当然你也可以引入其他在线EXCEL插件，看个人需要。下面看看我的实现方式，希望能为你提供有价值的参考：
一、下载插件并引入
下载插件后，在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"><inputtype="text"id="nameInput"class="form-control"placeholder="姓名"/><inputtype="text"id="positionInput"class="form-control"placeholder="职位"/><inputtype="text"id="departmentInput"class="form-control"placeholder="部门"/><inputtype="email"id="emailInput"class="form-control"placeholder="邮箱"/><button id="selBtn" class="btn btn-primary">查询</button><button id="addBtn" class="btn btn-primary">新增</button></div>插入智表插件容器
<div><!-- 插件容器 --><div id="tt1" style="width: 100%; height: 100%"><divid="zcell-container"style="width: 100%; height: 500px; margin: auto"></div></div></div>三、插件表格初始化
截止目前需要准备工作已经完成，我们就可以开始编写JS，来初始化插件了。
首先初始化一个工作簿，在指定的容器内进行创建
//初始化ZCELLvar options = {container: document.getElementById("zcell-container"),};zcell = new ZCell.WorkBook(options);然后创建一个表格，指定表格的初始化参数
//初始化SHEETlet 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);四、设置表头格式与样式
插件表头的设置，类似在EXCEL中对单元格样式的设置，可以通过代码实现，也可以通过设计器实现，保存为模板后使用时直接加载。
通过代码实现如下：
//#region ------设置表头 文本和样式-----sheet.SetCellValue(0, 0, "序号");sheet.SetCellValue(0, 1, "书籍");sheet.SetCellValue(0, 2, "作者");sheet.SetCellValue(0, 3, "角色");sheet.SetCellValue(0, 4, "特征值");sheet.SetCellValue(1, 4, "特征1");sheet.SetCellValue(1, 5, "特征2");sheet.SetCellValue(1, 6, "特征3");sheet.SetCellValue(1, 7, "特征4");sheet.SetCellValue(0, 8, "操作");sheet.SetCellValue(0, 9, "操作");//合并单元格sheet.MergeCell(0, 0, 1, 0);sheet.MergeCell(0, 1, 1, 1);sheet.MergeCell(0, 2, 1, 2);sheet.MergeCell(0, 3, 1, 3);sheet.MergeCell(0, 4, 0, 7);sheet.MergeCell(0, 8, 1, 9);//表头样式let headstyle1 = {hAlign: "center",fontBold: 1,backColor: "#3498db",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(1, 4, headstyle1);sheet.SetCellStyle(1, 5, headstyle1);sheet.SetCellStyle(1, 6, headstyle1);sheet.SetCellStyle(1, 7, headstyle1);sheet.SetCellStyle(0, 8, headstyle1);sheet.SetCellStyle(0, 9, headstyle1);//设置只读let rdflag = "1";sheet.SetCellReadOnly(0, 0, rdflag);sheet.SetCellReadOnly(0, 1, rdflag);sheet.SetCellReadOnly(0, 2, rdflag);sheet.SetCellReadOnly(0, 3, rdflag);sheet.SetCellReadOnly(0, 4, rdflag);sheet.SetCellReadOnly(1, 4, rdflag);sheet.SetCellReadOnly(1, 5, rdflag);sheet.SetCellReadOnly(1, 6, rdflag);sheet.SetCellReadOnly(1, 7, rdflag);sheet.SetCellReadOnly(0, 8, rdflag);sheet.SetCellReadOnly(0, 9, rdflag);//设置列宽sheet.SetColWidth(3, 3, 200); //设置列宽完成后效果如下图，样式美化可以根据自己需要再进行美化。
五、数据集准备
表头设置完成后，就可以准备数据集了，数据集可以是通过数据库查询出来的集合，也可以通过内存进行初始化，我这里通过内存初始化，生成了一个数据集合，
var datas = [];for (let i = 0; i < 50; i++) {let p = {cn: (i + 1).toString(),book: "西游记",auth: "吴承恩",name: "徒弟" + (i + 1),label1: "特征1" + (i + 1),label2: "特征2" + (i + 1),label3: "特征3" + (i + 1),label4: "特征4" + (i + 1),};datas.push(p);}六、创建数据源，并设置列绑定关系
创建指定名称数据源，并设置每列绑定数据字段值。
let option2 = {name: "data1",type: 1, //0- datacard，1是 datatabledata: 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");
七、设置数据区列外观样式
也就是表体中，每列的样式，包括单元格类型、单元格样式、单元格边框、单元格数值格式。
let colstyle1 = {hAlign: "center",fontColor: "#000000",};let colstyle3 = {hAlign: "left",fontColor: "#000000",};let colstyle2 = {hAlign: "center",fontColor: "#0000FF",};let border1 = {borderLeft: { color: "#808080", style: "thin" }, //左边框borderRight: { color: "#808080", style: "thin" }, //右边框borderTop: { color: "#808080", style: "thin" }, //上边框borderBottom: { color: "#808080", style: "thin" }, //下边框};//定义链接按钮类型var ctype_link1 = {code: "linkbutton",object: {text: "详情",fun: function openurl(e, data) {alert("查看当前行");},},};var ctype_link2 = {code: "linkbutton",object: {text: "删除",fun: function openurl(e, data) {alert("删除当前行");},},};//设置列单元格样式 可以对部分列单元格设置部分属性，也可以都不设置。// 支持以下设置： cellType 单元格类型； cellStyle 单元格样式； cellBorder 单元格边框;cellFormat 单元格数值格式ds.SetColumnInfo("A", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("B", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("C", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("D", { cellStyle: colstyle3, cellBorder: border1 });ds.SetColumnInfo("E", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("F", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("G", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("H", { cellStyle: colstyle1, cellBorder: border1 });ds.SetColumnInfo("I", {cellType: ctype_link1,cellStyle: colstyle2,cellBorder: border1,});ds.SetColumnInfo("J", {cellType: ctype_link2,cellStyle: colstyle2,cellBorder: border1,});八、绑定数据源
以上设置全部完成后，只需要将表格绑定数据源，插件会自动按照表格设置加载数据。
//绑定数据源
sheet.BindDataSource(ds);小结
至此表格功能已经完成，大致效果如下
在选中单个位置，按CTRL+V进行批量粘贴
可以看出，可以将EXCEL表中多行多列数据，直接粘贴到表格上，实现用户数据的批量录入。
以上就是全部内容了，希望能够为你提供一点参考。如有其他更好的建议，欢迎评论。