如何防止剑道网格中的页面更改

Question

我正在尝试验证剑道网格列中的空输入。我想在您转到其他页面之前验证当前页面。我的问题是当我得到空输入时，我无法阻止页面更改。

$(function () {       
    bindPaging();        
});


function bindPaging() {
  var grid = $('#paramsGrid').data('kendoGrid');
  var pager = grid.pager;
  pager.bind('change', onPageChange);
}


function onPageChange(e) {
    var empty = $("#paramsGrid").find("input").filter(function () {
        return this.value === "" || this.value === "null";
    });
    if (empty && empty.length) {
        for (var i = 0; i < empty.length; i++) {
            $("#" + empty[i].id).addClass("input-validation-error");
        }
        e.preventDefault();        
    }   

}

“e.preventDefault”不起作用。

Answer 1

尝试将e.preventDefault();写为函数的第一行。

function onPageChange(e) {
    e.preventDefault(); // Pull this line as a first line of code in the function.
    var empty = $("#paramsGrid").find("input").filter(function () {
        return this.value === "" || this.value === "null";
    });
    if (empty && empty.length) {
        for (var i = 0; i < empty.length; i++) {
            $("#" + empty[i].id).addClass("input-validation-error");
        }        
    }   

}

Answer 2

或者您可以使用网格的page 事件

当用户要通过分页器 UI 更改 DataSource 的当前页面索引时触发。

事件处理函数上下文（可通过 this 关键字获得）将被设置为小部件实例。

function bindPaging() {
  var grid = $('#paramsGrid').data('kendoGrid');
  grid.bind('page', onPageChange);
}

Answer 3

我终于得到了解决方案。该事件必须是“pageChange”而不是“change”。所以这是正确的代码：

pager.bind('pageChange', onPageChange);

代替：

pager.bind('change', onPageChange);