Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在剑道网格的客户端过滤网格时,如何获取事件处理程序?_Javascript_Jquery_Html_Kendo Ui_Kendo Grid - Fatal编程技术网

Javascript 在剑道网格的客户端过滤网格时,如何获取事件处理程序?

Javascript 在剑道网格的客户端过滤网格时,如何获取事件处理程序?,javascript,jquery,html,kendo-ui,kendo-grid,Javascript,Jquery,Html,Kendo Ui,Kendo Grid,我在这里创建了一个简单的网格,我想在本地过滤网格时重新计算列的和。我不想计算列或模板,因为我想更新标签,并且在本地过滤网格时,我必须在页面中执行一些其他操作 var data = [ { item: "item1", weight: 15 }, { item: "item2", weight: 22 }, { item: "item3", weight: 43 }, { item: "item4", weight: 37 }, { item: "item5

我在这里创建了一个简单的网格,我想在本地过滤网格时重新计算列的和。我不想计算列或模板,因为我想更新标签,并且在本地过滤网格时,我必须在页面中执行一些其他操作

var data = [
    { item: "item1", weight: 15 },
    { item: "item2", weight: 22 },
    { item: "item3", weight: 43 },
    { item: "item4", weight: 37 },
    { item: "item5", weight: 33 }
];
$("#grid").kendoGrid({
    columns: [
        { field: "item" },
        { field: "weight" }
    ],
    filterable: true,                       
    sortable: true,
    pageable: true,
    resizable:true, 
    selectable: "row",
    columnMenu: true,
    dataSource:data ,
    change: function(e) {
        var grid = e.sender;
        var selected = grid.dataItem(this.select());
        alert(selected.item);
        getSum();
    }
});
getSum();
function getSum() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();
    var sum = 0;
    for ( var i = 0; i<= (data.length-1);i++)
    {
        sum = sum + data[i].weight;    
    }
    $("#weight-label").text(sum);   
}

在客户端过滤网格时,如何获取事件处理程序

在计算总和的函数中,应使用grid.dataSource.view而不是grid.dataSource.data

您的JSFIDLE已在此处修改:

根据剑道UI文档:数据

返回获取数据源的数据项

鉴于观点

返回与当前页面、筛选器、排序和组配置相对应的数据项


然后,如果您想自动更新标签,您可以从网格数据绑定事件处理程序调用getSum,就像在JSFIDLE的另一个版本中一样:

我只对代码做了几个小的更改,当我们可以在生成剑道修订/生成的javascript字符串之前注入自己的自定义javascript时,这些更改适应了剑道命令的方式:


你试过数据绑定或数据绑定事件挂钩吗?OnaBai,过滤器现在根本不工作,出了什么问题?我很困惑。你说它不工作是什么意思?您试图设置的过滤条件是什么?试试这个:是的,我忘记了数据源中的模型定义。现在它工作了,谢谢!。这不是答案,因为它在这里不起作用,你是对的,在这种情况下,我所做的更改只是在用户单击网格元素时运行/修复你的代码,而这不是你的问题,你正在/正在寻找连接到过滤器生命周期,@OnaBai提供grid.dataSource.view作为解决方案是正确的。
var data = [{
    item: "item1",
    weight: 15
}, {
    item: "item2",
    weight: 22
}, {
    item: "item3",
    weight: 43
}, {
    item: "item4",
    weight: 37
}, {
    item: "item5",
    weight: 33
}];
$("#grid").kendoGrid({
    columns: [{
        field: "item"
    }, {
        field: "weight"
    }],
    filterable: true,
    sortable: true,
    pageable: true,
    resizable: true,
    selectable: "row",
    columnMenu: true,
    dataSource: data,
    change: function (e) {
        var grid = e.sender;
        var selected = grid.dataItem(this.select());
        alert(selected.item);
        var s = getSum();

        $("#weight-label, .k-pager-info").text('The Sum is: ' + s);
    }
});
//getSum();

function getSum() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();
    var sum = 0;
    for (var i = 0; i <= (data.length - 1); i++) {
        sum = sum + data[i].weight
    }
    return sum
}