SpreadJS 单元格子编辑框（SubView）

在填报数据时，可能需要对数据进行查询然后再填入单元格中，那么我们可以使用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">&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')
})