SpreadJS 实现弹窗workbook

背景：在项目开发过程中，有小伙伴想实现点击按钮弹出一个带有workbook的模态窗。通过这样方式，展示原始workbook条目上的更多有关信息。
或者是将原始的workbook的行头、列头以及网格线隐藏起来，使其在页面上看起来像个前端组件，而不是一个表单。这样在原始的workbook上只做一个纯展示的列表，真正要编辑或是查看的表单在点击按钮之后由模态窗的workbook展现。



本文将介绍两种方式实现弹出workbook，一种是用按钮单元格配合监听ButtonClicked事件实现；另一种是监听单元格EditStarting事件实现。

这是绘制模态窗的html代码：

1. <div class="modal fade" id="subEditor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" gcUIElement="gcEditingInput">
   
2.    <div class="modal-dialog" role="document">
   
3.        <div class="modal-content">
   
4.              <div class="modal-header">
   
5.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
   
6.                     <h4 class="modal-title" id="exampleModalLabel">New Spread</h4>
   
7.              </div>
   
8.         <div class="modal-body">
   
9.              <form>
   
10.                    <div class="form-group" id="dia"></div>
    
11.              </form>
    
12.          </div>
    
13.          <div class="modal-footer">
    
14.                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    
15.           </div>
    
16.      </div>
    
17.     </div>
    
18.     </div>

复制代码

我们需要获取两个Spread对象实例，一个是初始化时展示的表单，一个是模态窗的表单。另外，我们通过如下代码将初始化的工作簿的行头、列头以及网格线隐藏起来。

1. activeSheet.options.gridline.showHorizontalGridline = false;
   
2.                     activeSheet.options.gridline.showVerticalGridline = false;
   
3.             activeSheet.options.colHeaderVisible = false;
   
4.             activeSheet.options.rowHeaderVisible = false;

复制代码

这是利用按钮单元格实现的关键代码

1. spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args) {
   
2.    var sheet = args.sheet, row = args.row, col = args.col;
   
3.    var cell = sheet.getCell(args.row, args.col);
   
4.    var cellType = activeSheet.getCellType(row, col);
   
5.    if (cellType instanceof GC.Spread.Sheets.CellTypes.Button) {
   
6.         $('#recipient-name').val(cell.value());
   
7.         $('#subEditor').modal('show')
   
8.      }
   
9.             });

复制代码

这是利用EditStarting实现的关键代码

1. activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, function(sender, args) {
   
2.    var sheet = args.sheet;
   
3.    var cell = sheet.getCell(args.row, args.col);
   
4.    if (cell.tag() && cell.tag().isSubEditor) {
   
5.        $('#recipient-name').val(cell.value());
   
6.        $('#subEditor').modal('show')
   
7.     }
   
8. });

复制代码

下载附件可查看完整的demo