Question

我有以下代码：

$("#grid").kendoGrid({
        dataSource: {
            data: setData(),
            pageable: false
        },
        scrollable: true,
        sortable: true,
        selectable: true,
        columns: [
            { field: "Name", title: "Name", width: 230" },
            { field: "Sex", title: "Sex", width: 50},
            { field: "Ca", title: "C.A." , width: 55},
            { field: "TotalScore", title: "Total Score", width: 100},
            { field: "Rank", title: "Rank", width: 60 }
        ]
    });

    $("#button1").on("click", function() {
       // show 1st 25 records
    });

    $("#button2").on("click", function() {
       // show 1st 50 records
    });

现在我想要的是，当我点击一个按钮“button1”时，它只会显示前25个记录，或者当我点击“button2”时它只会显示前50个记录。

这可能吗？

由于

Answer 1

创建一个名为bindGrid的函数：

function bindGrid(data) {

if ($("#grid").data("kendoGrid"))
    $("#grid").data("kendoGrid").destory()

$("#grid").empty();
$("#grid").kendoGrid({
    dataSource: {
        data: data,
        pageable: false
    },
    scrollable: true,
    sortable: true,
    selectable: true,
    columns: [
    { field: "Name", title: "Name", width: 230 },
    { field: "Sex", title: "Sex", width: 50 },
    { field: "Ca", title: "C.A.", width: 55 },
    { field: "TotalScore", title: "Total Score", width: 100 },
    { field: "Rank", title: "Rank", width: 60 }
    ]
});
}

将网格数据存储在全局变量中并调用bindGrid函数：
```
var gridData=setData();
bindGrid(gridData);
```

现在处理按钮点击并重新绑定网格

$("#button1").on("click", function () {
// show 1st 25 records
var newDataSource = [];
$.each(gridData, function (i, item) {
    if (i < 25) {
        newDataSource.push(item);
    }
});
//rebind grid
bindGrid(newDataSource); });

$("#button2").on("click", function () {
// show 1st 50 records
var newDataSource = [];
$.each(gridData, function (i, item) {
    if (i < 50) {
        newDataSource.push(item);
    }
});
//rebind grid
bindGrid(newDataSource); });

Answer 2

$("#grid").kendoGrid({
    dataSource: {
        data: setData(),
        pageable: false
    },
    scrollable: true,
    sortable: true,
    selectable: true,
    columns: [
        { field: "Name", title: "Name", width: 230" },
        { field: "Sex", title: "Sex", width: 50},
        { field: "Ca", title: "C.A." , width: 55},
        { field: "TotalScore", title: "Total Score", width: 100},
        { field: "Rank", title: "Rank", width: 60 }
    ]
});

$("#button1").on("click", function() {
   $("#grid").data("kendoGrid").dataSource.pageSize(25);
});

$("#button2").on("click", function() {
   $("#grid").data("kendoGrid").dataSource.pageSize(50);
});

此处示例：http://dojo.telerik.com/aQID

在剑道网格上显示前25记录或前50记录

2 个答案: