前端表格控件SpreadJS 设置单元格子编辑框.pdf

前端表格控件 SpreadJS 设置单元格子编辑框 在填报数据时，可能需要对数据进行查询然后再填入单元格中，那么我们可以使 用 SubView 的方式弹出一个子页面进行查找设置。 为了简单起见，示例中我们使用了 BootStrap 的 Modal 组件，当用户双击单元 格进入编辑模式后即可开始 Modal ，用户输入内容点击提交，将输入值返回 Spread。 首先我们在页面中加入 SubView 的模板，这里我们为 modal 设置了 gcUIElement=gcEditingInput 的属性，这个属性的作用是告诉 Spread ，这 个 DOM 元素是 Spread 的编辑元素，设置了之后在此 div 中点击，Spread 都 不会退出编辑状态。 div class=modal fade id=subEditor tabindex=-1 role =dialog aria-labelledby=exampleModalLabel gcUIElement=gcEd itingInput div class=modal-dialog role=document div class=modal-content div class=modal-header button type=button class=close data-dismiss =modal aria-label=Closespan aria-hidden=truetimes;/s pan/button h4 class=modal-title id=exampleModalLabelN ew message/h4 /div div class=modal-body form div class=form-group label for=recipient-name class=control-l abelRecipient:/label input type=text class=form-control id=r ecipient-name /div /form /div div class=modal-footer button type=button class=btn btn-default da ta-dismiss=modalClose/button button type=button class=btn btn-primary id =setValueSet Value/button /div /div /div 然后，我们在进入编辑状态事件中获取单元格 Value ，赋值到subView。当 SubView 点击 set Value 时，再设置 Cell 新的 Value 同时退出编辑状态并关 闭 Modal。 activeSheet.bind(GcSpread.Sheets.Events.EditStarting, function (sender, args) { var sheet = args.sheet; var cell = sheet.getCell(args.row, args.col); if (cell.tag() cell.tag().isSubEditor) { console.log(show); $(#recipient-name).val(cell.value()); $(#subEditor).modal(show) setTimeout(function() { $(#recipient-name)[0].focus(); }, 100);