利用模态窗实现数据验证的弹出窗口

背景：有小伙伴想实现类似在线表格编辑器上数据验证不通过时的弹出框提示效果，并且在数据验证不通过时不显示错误的内容，等待用户按照要求输入后，方可继续编辑下一个单元格。

在原生的SpreadJS中是没有此功能，但是由于SpreadJS有着优秀的可拓展性，SpreadJS可以配合bootstrap实现此功能。另外，用户可以根据自己的需求定制不同颜色样式的弹出窗。

首先，我们需要定义弹出框的DOM对象

1. <div class="modal fade" id="subEditor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" gcUIElement="gcEditingInput">
   
2.     <div class="modal-dialog" role="document">
   
3.         <div class="modal-content">
   
4.             <div class="modal-header">
   
5.                 <h4 class="modal-title" id="exampleModalLabel">数据验证</h4>
   
6.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
   
7.                
   
8.             </div>
   
9.             <div class="modal-body">
   
10.                 <form>
    
11.                     <div class="form-group">
    
12.                         <label for="recipient-name" class="control-label" id="recipient-t"></label></br>
    
13.                         <label for="recipient-name" class="control-label" id="recipient-msg"></label>
    
14.                     </div>
    
15.                 </form>
    
16.             </div>
    
17.             <div class="modal-footer">
    
18.                 <button type="button" class="btn btn-primary" id="setValue">确定</button>
    
19.                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    
20.             </div>
    
21.         </div>
    
22.     </div>
    
23. </div>

复制代码

接下来就是在js代码中给某一列创建数据验证

1. var dv1 = GC.Spread.Sheets.DataValidation.createTextLengthValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, "4", "20");
   
2.         dv1.showInputMessage(true);
   
3.         dv1.inputMessage("Number of characters must be greater than 4.");
   
4.         dv1.inputTitle("tip");
   
5.         dv1.errorTitle("输入长度不合法。")
   
6.         dv1.errorMessage("用户已经限制了此单元格输入长度。")
   
7. 
   
8.         sheet.setDataValidator(-1,0,-1,1,dv1,GC.Spread.Sheets.SheetArea.viewport);

复制代码

SpreadJS为我们提供了ValidationError事件，我们需要在此事件中实现我们的关键代码，下面的代码可以在不同的数据验证类型中弹出不同的提示框。我们可以根据validator的type去判断不同的数据验证

1. sheet.bind(GC.Spread.Sheets.Events.ValidationError, function (e, args) {
   
2. 
   
3.             setTimeout(function(){spread.focus(false)},0);
   
4.             var sheet = args.sheet;
   
5.             var cell = sheet.getCell(args.row, args.col);
   
6. 
   
7.             if(sheet.getDataValidator(args.row, args.col).type() == 6){
   
8.                 $('#recipient-t').text(dv1.errorTitle());
   
9.                 $('#recipient-msg').text(dv1.errorMessage());
   
10.                 $('#subEditor').modal('show')
    
11.             }
    
12.             if(sheet.getDataValidator(args.row, args.col).type() == 3){
    
13.                 $('#recipient-t').text(dv.errorTitle());
    
14.                 $('#recipient-msg').text(dv.errorMessage());
    
15.                 $('#subEditor').modal('show')
    
16.             }
    
17.                   
    
18.             args.validationResult = GC.Spread.Sheets.DataValidation.DataValidationResult.discard;
    
19. 
    
20.         });

复制代码

最后，当我们点击弹出框按钮后继续恢复编辑状态

1. $("#setValue").click(function(){
   
2.             spread.focus(true)
   
3.             sheet.startEdit(true);
   
4.             
   
5.             $('#subEditor').modal('hide')
   
6. 
   
7.         })

复制代码

下载附件可查看完整代码