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

Question

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

$(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 的第一行。

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

或者你可以使用网格的页面事件

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

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

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

Answer 3

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

pager.bind('pageChange', onPageChange);

代替：

pager.bind('change', onPageChange);