在填报数据时,可能需要对数据进行查询然后再填入单元格中,那么我们可以使用SubView的方式弹出一个子页面进行查找设置。

F5B0.tmp

为了简单起见,示例中我们使用了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">&times;</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