Question

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

我读过这篇文章 Upload jQuery Handsontable input

有没有集成解决方案？等等集成到jquery验证插件，如果没有，使用onbeforechange（）方法怎么样？

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

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

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

如何删除所有空行？

Answer 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
});

Answer 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); 
});

Answer 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或数字这样的程序，他们就会把表格留在那里。如果您只是查看，我只会根据您存储的数据重建数据。

验证数据jQuery Handsontable输入

3 个答案: