SpreadJS 实现弹窗workbook

收藏

本帖最后由 DerrickJiao 于 2020-9-27 15:37 编辑

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

本文将介绍两种方式实现弹出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对象实例，一个是初始化时展示的表单，一个是模态窗的表单。另外，我们通过如下代码将初始化的工作簿的行头、列头以及网格线隐藏起来。

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

复制代码

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

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')
}
});

复制代码

下载附件可查看完整的demo

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

SpreadJS 实现弹窗workbook

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证