Handsontable - 必填字段答案

【问题标题】：Handsontable - Required FieldHandsontable - 必填字段
【发布时间】：2015-06-12 03:59:19
【问题描述】：

我有handsontable，但我不知道需要什么事件来验证特定单元格是否为空。

从技术上讲，我有特定的单元格是必需的单元格，如果单元格为空，那么它将调用回调或在执行帖子后返回 false。

我以前使用过beforeChange() 函数，我认为这不是解决问题的合适事件。

这是image link。

【问题讨论】：

标签： validation handsontable

【解决方案1】：

您要做的是使用columns 设置中的validator 选项。

Here 是有关验证器的更多信息和一个示例，但下面是与之配套的代码。

emptyValidator = function(value, callback) {
    if (isEmpty(value)) { // isEmpty is a function that determines emptiness, you should define it
        callback(false);
    } else {
        callback(true);
    }
}

然后在columns 设置中，提供每一列，如果该列的所有单元格都不是空的，则提供它作为验证器，就像它们在handonstable 示例页面中显示的那样。

【讨论】：

【解决方案2】：

这是我的解决方法：http://jsfiddle.net/Yulinwu/s6p39uje/

首先，您可以在列设置中添加一个名为required 的自定义属性。

  hot = new Handsontable(container, {
    ...
    columns: [{
    ...
    }, {
      type: 'numeric',
      format: '$ 0,0.00',
      required: true,   // Add a new setting named required
      validator: Handsontable.NumericValidator
    }]
  });

然后，您可以使用addHook 为beforeValidate 事件添加一个侦听器，如果需要单元格但为空，则返回 false。

  hot.addHook('beforeValidate', function(value, row, prop, source) {
    var ifRequired = this.getCellMeta(row, prop).required;
    console.log(ifRequired);
    if (ifRequired && value === '') {
      return false
    } else {
      return 0
    }
  });

【讨论】：

【解决方案3】：

对该列使用allowEmpty:false，例如：-

 {
              data: 'EmpNo',
              type: 'numeric',
              allowInvalid: false,
              allowEmpty:false
              }

并且在handsontable的设置中使用afterValidate如下-

             afterValidate: function (isValid, value, row, prop, source) {
                    if (!isValid) {
                        $("#submitBtn").prop("disabled", true);
                        alert('Only non empty numbers are allowed');
                    }
                    else {
                            $("#submitBtn").prop("disabled", false);
                        }
                }

【讨论】：