验证数据 jQuery Handsontable 输入答案

【问题标题】：Validate Data jQuery Handsontable input验证数据 jQuery Handsontable 输入
【发布时间】：2012-06-13 02:25:13
【问题描述】：

Q1：在发送到服务器之前验证用户在 jQuery Handsontable 中输入的数据的最佳方法是什么？

我读过这篇文章 Upload jQuery Handsontable input

有没有集成解决方案？ etc 集成到 jquery 验证插件中，如果没有，使用 onbeforechange() 方法怎么样？

Q2：另外，我已经启动了一个100行的表，但是如果我使用下面的代码，用户可能只会输入50行：

$('#btnGo').click(function() { 
  var rowList = $("#example9grid").handsontable("getData"); 
  $('#simple').val(JSON.stringify(rowList)); 
  console.log(rowList); 
});

rowList 将返回 50 个数据行和 50 个空行。

如何删除所有空行？

【问题讨论】：

标签： javascript jquery jquery-plugins handsontable

【解决方案1】：

A1：感谢 Marcin 的回复，我已经通过以下代码解决了这个问题：

onBeforeChange: function (data) {
      for (var i = 0, ilen = data.length; i < ilen; i++) {
            if (data[i][0] > 0) { //if it is not first row
                if(data[i][1]==0){ //if it is the first column
                        //some validate logic here
            }else if(data[i][1]==1){//if it is the second column
                        //some validate logic here
                    }
            }
        }
      };

A2：我已使用以下代码删除了空行：

rowList = $("#dataTable").handsontable("getData");
rowList = $.grep(rowList,function(array,index){
            ...write your logic here
});

【讨论】：

较新版本的handsontable 已将“onBeforeChange”重命名为“beforeChange”

【解决方案2】：

试图抓住问题。如果您只是想在使用“getData”之前删除空行并将其发送到服务器，那么...只需遍历 DOM 并删除所有空行。

$('#btnGo').click(function() { 
  $('rowSelector:empty').each(function(){
    $(this).remove(); 
  });
  var rowList = $("#example9grid").handsontable("getData"); 
  $('#simple').val(JSON.stringify(rowList)); 
  console.log(rowList); 
});

【讨论】：

谢谢。这是一个解决方案，但是如果表格有5列，并且一个单元格是空的，它就不能正常工作。例如，$(this).remove();如果我重写为 $(this).parent().remove(); 它将删除元素； ,它将删除整行，即使其他4列也不为空。
使用jQuery.grep(array, callback, [invert])过滤上传数组，回调函数可以写你的业务逻辑。没关系！
也许这是一个菜鸟问题，但 rowSelector:empty 是什么？
@M.Octavio rowSelector 是一个随机变量，因为最初 OP 没有提供太多信息，所以您可以将 rowSelector 视为简单的 tr。 :empty 是一个 jQuery 伪选择器，可以处理空元素。
非常感谢@Ohgodwhy

【解决方案3】：

A1：在我看来，我会向数据服务器端发送 $.ajax 请求，然后在那里进行验证。

// your handsontable callback
    // i would use this callback
onChange : function(data){

    $.ajax({
        url : '/validate/',
        data : data,
        dataType : 'json',
        success : function(res){
            if(res.error){
                handleErrors(res.error);
            }else{
                successMsg(res);
            }
        }

    })


}

这样，您就可以在服务器端建立一堵墙，以防有人尝试手动添加自己的数据，而您无需重写验证系统。

还有一件事要注意最好将json数据发回，例如在php中它是这样的。

<?php
// do validating here
    // store if everything is good
    // send back error if thing are not
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
echo json_encode($callbackobj);
?>

这样结果就已经是 javascript 可以读取的完美形式了

A2：我会把它们留在那里，以便为新数据留出空间。如果您查看诸如 excel 或数字之类的程序，它们只会将表格留在那里。如果您以只读方式查看，我将使用您存储的数据重建数据。

【讨论】：

对于A1：服务端验证很好，但我的验证方法并不复杂，所以我想先在客户端验证数据。对于 A2：相反，我想使用 jQuery.grep(array, callback, [invert]) 来过滤上传数组。