添加自定义命令到 Kendo UI 动态数据源/网格

Question

我在 ASP.NET MVC 应用程序中使用 Kendo UI javascript 框架。

我必须在我的 Kendo UI 网格中加载由我的服务器提供的动态数据，所以我不想使用数据源模式和列定义，在任何情况下。

我的数据示例是：
PersonID、Data1、Data2、Date3 ...

要在 Kendo UI 网格中加载动态数据，我使用以下代码：(JsFidlle Example)

var grid = $("#grid").kendoGrid({ 
    scrollable: false,
    sortable: true
}).data("kendoGrid"); 

var ds = grid.dataSource;
grid.columns = [];    
ds.data([{one: 1, two: 1, three: 3, four: 4}]);

从这个例子开始，我很想知道，通过这种管理，我是否可以在每一行中放置一个命令/自定义命令，如“删除”。 (Example)

最后，我该如何处理命令的行为？（点击命令后看到确认 window 会很高兴）

感谢关注！

Answer 1

先获取数据，然后根据数据为网格列创建一个数组，并为按钮添加一列。

创建网格并将处理程序附加到每个按钮。

http://jsfiddle.net/cp67fpw1/2/

正在创建网格：

var columns = [],
    data = [{
        one: 1,
        two: 1,
        three: 3,
        four: 4,
        five: 5
    }],
    grid;

for (var cx in data[0]) {
    if (data[0].hasOwnProperty(cx)) {
        columns.push({
            field: cx
        })
    }
}

columns.push({
    field: '',
    template: '<a class="k-button" command="doit">do it</a><a class="k-button" command="doitagain">do it again</a>'
});

grid = $("#grid").kendoGrid({
    columns: columns,
    dataSource: new kendo.data.DataSource({
        data: data
    }),
    scrollable: false,
    sortable: true
}).data("kendoGrid");

添加按钮处理程序：

$('#grid').on('click', '[command="doit"]', doit);

function doit(e) {
    var dataItem = grid.dataSource.getByUid($(this).closest('tr').data('uid'));
}

Answer 2

我解决了这个问题：https://jsfiddle.net/Endrik/smLfh67e/1/

它与 Frederic 解决方案非常相似，但变化不大。

1) 我从数据源对象开始，因为我将从远程获取数据
如果更改 DataSource 对象中的数据加载类型，该示例应该同样有效。

var myDataSource = new kendo.data.DataSource({
    data: [{
            one: "1",
            two: "2",
            three: "3",
            four: "4"
        }, {
            one: "5",
            two: "6",
            three: "7",
            four: "8"
        }]
    });

    myDataSource.fetch();

2) 为了拥有动态列，我必须将数据源对象中存在的数据转换为值数组。（比如 Frederic 的启动对象集合）

var myDataSourceRowsNumber = myDataSource.total();

var rows = [];
var columns = null;
var columnsCount = 0;

for (var i = 0; i < myDataSourceRowsNumber; i++) {
    var entryArray = [];
    var dataItem = myDataSource.at(i);

    columns = [];

    for (var field in dataItem) {
        if (dataItem.hasOwnProperty(field) && 
            field != 'parent' && 
            field != 'uid' && 
            field != '_events') {

            columns.push({
               field: field,
               value: dataItem[field.toString()]
            });
        }
    }

    columnsCount = columns.length;
    for (var j = 0; j < columnsCount; j++) {
        entryArray.push(dataItem[columns[j].field]);
    }

    rows.push(kendo.observable({
        entries: entryArray
    }));
}

var viewModel = kendo.observable({
    gridRows: rows
});

3) 最后，我用我定义的列创建了一个新的 Kendo UI 网格。

var finalColumns = [];
for (var k = 0; k <= columnsCount; k++) {
    var entryIndex = "entries[" + k + "]";
    if (k != columnsCount) {
        finalColumns.push({
            field: entryIndex,
            title: columns[k].field
        });
    } else {
        finalColumns.push({
            command: [{
                name: "CustomDelete",
                text: "Delete",
                className: "custom-delete-btn ",
                imageClass: "k-icon k-i-close",
                click: ManageDeleteButtonClick
            }],
            title: "Actions"
        });
    }
}

var configuration = {
    editable: true,
    sortable: true,
    scrollable: false,
    columns: finalColumns
};

function ManageDeleteButtonClick(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.target).closest("tr"));
    if (confirm('Are you sure you want to delete this record ?')) {
        // AJAX CALL
        var dataSource = $("#grid").data("kendoGrid").dataSource;
        dataSource.remove(dataItem);
    }
}

var myGrid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel);

添加自定义命令到 Kendo UI 动态数据源/网格

Add custom command to Kendo UI dynamic datasource / grid

kendo-ui

kendo-grid

kendo-datasource