前端EXCEL插件智表ZCELL数据源功能详解

一、数据源功能介绍 前端EXCEL插件[智表ZCELL](http://www.zcell.net)提供了强大的数据源管理功能，使开发者能够灵活地在电子表格中集成和管理结构化数据。数据源功能主要分为两种类型： 卡片式数据源：适合展示和编辑单个数据记录 表格式数据源：适合处理表格形式的多行数据 二、核心API详解 1. 创建数据源 (CreatDataSource) 功能：初始化数据源对象，支持卡片式和表格式两种类型。 参数： { name: "数据源名称", //必填 type: 0, //0-卡片式，1-表格式 data: jsondata, //数据集 // 表格式特有参数 startrow: 22, //起始行索引(从0开始) startcol: "G", //起始列索引(从A开始) autoBindColumn: true //是否自动绑定列(可选) } 示例代码： // 创建卡片式数据源 var jsondata = { name: "哪吒", age: 15, address: "陈塘关" }; let option1 = { name: "motong", type: 0, data: jsondata }; let ds = sheet.CreatDataSource(option1); // 创建表格式数据源 var persons = []; for (let i = 0; i < 3; i++) { let p = { cn: (i + 1).toString().padStart(3, "0"), book: "西游记", auth: "吴承恩", name: "徒弟" + (i + 1), operate: "" }; persons.push(p); } let option = { name: "person", type: 1, data: persons, startrow: 22, startcol: "G" }; let ds = sheet.CreatDataSource(option); 2. 设置映射关系 (Mapping) 功能：建立数据字段与表格单元格/列的对应关系。 参数： 卡片式：cname(单元格名), field(字段名) 表格式：colname(列名), field(字段名) 示例代码： // 卡片式映射 ds.Mapping("D23", "name"); //单元格名必须大写 // 表格式映射 ds.Mapping("G", "cn"); //列名必须大写 3. 设置列样式 (SetColumnInfo) 功能：为表格式数据源的列设置样式，新增行时会自动应用这些样式。 参数： colname: 列名 coloption: 列样式设置对象 cellType: 单元格类型 cellStyle: 单元格样式 cellBorder: 单元格边框 cellFormat: 单元格数值格式 示例代码： ds.SetColumnInfo("G", { cellStyle: colstyle1, cellBorder: border1 }); 4. 绑定数据源 (BindDataSource) 功能：将数据源对象与表页对象绑定。 示例代码： sheet.BindDataSource(ds); 5. 获取数据源 (GetDataSource) 功能：通过名称获取已创建的数据源对象。 示例代码： let ds1 = sheet.GetDataSource("motong"); 三、数据操作功能 1. 新增数据行 (AddRow) 功能：为表格式数据源添加新行。 参数： count: 新增行数 order: 新增顺序("asc"-尾部增加，"desc"-首行增加) 示例代码： let ds1 = sheet.GetDataSource("person"); if (ds1 != null) { ds1.AddRow(2, "asc"); //在尾部新增2行 } 2. 获取变更数据 ZCELL提供了多种获取变更数据的方法： // 获取新增行 let drows = ds1.GetInsertRows(); // 获取变更行 let drows = ds1.GetChangRows(); // 获取删除行 let drows = ds1.GetDeleteRows(); // 获取变更单元格(卡片式) let ccs = ds1.GetChangeCells(); 3. 清空变更记录 (ClearChange) 功能：手工清空变更记录，标记为已提交状态。 示例代码： let ds = sheet.GetDataSource("person"); if (ds != null) { ds.ClearChange(); } 四、最佳实践 完整工作流程示例 // 1. 创建表格式数据源 var products = [ { id: "001", name: "笔记本电脑", price: 5999, stock: 100 }, { id: "002", name: "智能手机", price: 3999, stock: 150 } ]; let option = { name: "product", type: 1, data: products, startrow: 5, startcol: "B" }; let ds = sheet.CreatDataSource(option); // 2. 设置列映射 ds.Mapping("B", "id"); ds.Mapping("C", "name"); ds.Mapping("D", "price"); ds.Mapping("E", "stock"); // 3. 设置列样式 let priceStyle = { cellFormat: "¥#,##0.00", cellStyle: { fontColor: "#FF0000", fontWeight: "bold" } }; ds.SetColumnInfo("D", priceStyle); // 4. 绑定数据源 sheet.BindDataSource(ds); // 5. 添加新行 ds.AddRow(1, "asc"); // 6. 获取变更(通常在保存时调用) let newRows = ds.GetInsertRows(); let changedRows = ds.GetChangRows(); // 7. 清空变更记录 ds.ClearChange(); 五、注意事项 单元格和列名在映射时必须使用大写字母。 表格式数据源必须指定startrow和startcol参数。 新增行时会自动继承列样式设置。 变更记录只在调用ClearChange前有效。 一个表页可以绑定多个数据源。 通过本教程，您应该已经掌握了ZCELL插件数据源功能的核心使用方法。这些功能可以大大简化电子表格中的数据管理任务，特别适合需要将结构化数据与电子表格结合的应用场景。