如何在设计器中动态创建空数据源实现全自动数据填报

背景

---

填报场景往往是很多报表系统需要遇到的，目前SpreadJSV17新增的ReportSheet可以完美实现模板的设计，用户填写的信息的获取，已有数据的交叉展示。

但是老版本只能使用数据绑定来实现这个功能，很多小伙伴知道，我们的数据绑定是一个双向绑定的设计，绑定的单元格需要对应一个数据源，单元格中信息变化，数据源对应的数据也就会产生变化，这样咱们开发人员只要获取数据源中内容就可以实现数据的收集，而不用一个一个单元格的获取数据了，因此在正常填报情况下，我们是需要为我们的工作表添加一个数据源后再让业务人员去填写内容，具体实现可以参考我们这篇知识库文章：https://demo.grapecity.com.cn/spreadjs/help/docs/faqs/data-binding/worksheet-binding/get-filling-data-with-databiding

但是上面这种操作方式会存在一个弊端，即每个table绑定，我们要为数据源添加一个table的绑定信息，这个是无法避免的。万一用户在填报时还要添加一个表格绑定，这就要了老命，业务人员没办法给这个数据源添加一个table的绑定路径。那么有没有一个事件可以监听到用户添加了绑定信息呢？

答案是，没有，我们没有事件可以监听用户设置了绑定信息，但是，这不代表我们不能去实现这样一个需求，因为Designer中右侧字段列表实际也就是一个dom，左侧工作簿也是在一个dom里实现的，我们完全可以借助JS原生的一些事件通过监听该dom上的拖动动作，动态的为当前工作表创建数据源

实现方式

---

1. var spreadHost = spread.getHost();// 获取工作表元素
   
2. // 监听SpreadJS所在dom元素的drop事件，用于确定拖放位置
   
3. spreadHost.addEventListener('drop', function (event) {
   
4. var sheet = spread.getActiveSheet();
   
5. var cellInfo = spread.hitTest(event.offsetX, event.offsetY);// 获取松开位置单元格信息
   
6. var cellRow = cellInfo.worksheetHitInfo.row;
   
7. var cellCol = cellInfo.worksheetHitInfo.col;
   
8. var temp = {}
   
9. if (sheet.getDataSource()) {// 判断当前是不是有数据源，如果没有，得新建一个，如果有，就拿去对应数据源
   
10.     temp = sheet.getDataSource().getSource()
    
11. }
    
12. setTimeout(function () {
    
13.     // 要让拖动处理结束后再执行这段逻辑,因为拖动结束后才会创建表格，以及给表格设置绑定路径
    
14.     var table = sheet.tables.find(cellRow, cellCol);
    
15.     if (table && table.bindingPath()) {
    
16.         temp[table.bindingPath()] = [{}];
    
17.     }
    
18.     var source = new GC.Spread.Sheets.Bindings.CellBindingSource(temp);
    
19.     sheet.setDataSource(source);
    
20. }, 0)
    
21. })

复制代码

完整代码

---

Designer右侧字段树拖放监听.html (4.49 KB, 下载次数: 238)

2024-4-16 12:11 上传

点击文件名下载附件