在弹窗中显示workbook

问题：怎么在弹窗中显示workbook

背景

在项目开发过程中，有小伙伴想实现点击按钮弹出一个带有workbook的模态窗。通过这样方式，展示原始workbook条目上的更多相关信息。

另一个场景是，将原始的workbook的行头、列头以及网格线隐藏起来，使其在页面上看起来像个前端组件，而不是一个表单。这样在原始的workbook上只做一个纯展示的列表，真正要编辑或是查看的表单，在点击按钮之后由模态窗的workbook展现。模态窗的workbook最终实现类似下图的效果

解决方案

可以两种方式实现弹出workbook，

一种是用按钮单元格配合监听ButtonClicked事件实现；另一种是监听单元格EditStarting事件实现。

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

<div class="modal fade" id="subEditor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" gcUIElement="gcEditingInput">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
             <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New Spread</h4>
             </div>
        <div class="modal-body">
             <form>
                   <div class="form-group" id="dia"></div>
             </form>
         </div>
         <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
     </div>
    </div>
    </div>

我们需要获取两个Spread对象实例，一个是初始化时展示的表单，一个是模态窗的表单。

这是利用按钮单元格的ButtonClicked事件实现弹出的关键代码

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

这是利用EditStarting事件实现弹出的关键代码

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

对于提到的另一个额外需求隐藏工作簿的行头、列头以及网格线。我们也可以通过如下代码在初始化的时候设置

activeSheet.options.gridline.showHorizontalGridline = false;
activeSheet.options.gridline.showVerticalGridline = false;
activeSheet.options.colHeaderVisible = false;
activeSheet.options.rowHeaderVisible = false;

可以在这里下载完整的demo

作者: GrapeCity China | 审核：Richard.Ma | 更新时间：2023.11.15