在填报数据时,可能需要对数据进行查询然后再填入单元格中,那么我们可以使用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="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 message</h4></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="control-label">Recipient:</label><input type="text" class="form-control" id="recipient-name"></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary" id="setValue">Set 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);}});$("#setValue").click(function() {var cell = activeSheet.getCell(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
activeSheet.endEdit();cell.value($('#recipient-name').val());
$('#subEditor').modal('hide')})
Dome在线演示地址在:http://runjs.cn/detail/hdqt41zc
更多资源
SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples
SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html
如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs
如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn