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

梅克 · 2025-6-28 11:34:05

在所有的web页面开发过程中，列表都是必不可少的，列表数据的采集，一般都是要通过新增表单页实现，用户数据录入的效率都是非常低的，这里通过实现可编辑列表页，让用户通过列表页直接维护数据，且可以直接通过粘贴方式实现，不用逐行手工维护，大幅提高数据录入速度，为终端用户提供最优体验。我的实现是通过引入智表ZCELL插件实现的，当然你也可以引入其他在线EXCEL插件，看个人需要。下面看看我的实现方式，希望能为你提供有价值的参考：一、下载插件并引入

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

复制代码

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

插入查询条件和查询按钮元素：

查询新增

复制代码

插入智表插件容器

复制代码

三、插件表格初始化

截止目前需要准备工作已经完成，我们就可以开始编写JS，来初始化插件了。
首先初始化一个工作簿，在指定的容器内进行创建

//初始化ZCELL
var options = {
container: document.getElementById("zcell-container"),
};
zcell = new ZCell.WorkBook(options);

复制代码

然后创建一个表格，指定表格的初始化参数

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

复制代码

四、设置表头格式与样式

插件表头的设置，类似在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是 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");

复制代码

七、设置数据区列外观样式

也就是表体中，每列的样式，包括单元格类型、单元格样式、单元格边框、单元格数值格式。

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表中多行多列数据，直接粘贴到表格上，实现用户数据的批量录入。
以上就是全部内容了，希望能够为你提供一点参考。如有其他更好的建议，欢迎评论。

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除

账号		自动登录	找回密码
密码			立即注册

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

相关帖子

浏览过的版块

签约作者

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

相关帖子

相关推荐

浏览过的版块

签约作者