Question

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

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

我的数据的一个例子是：
PersonID，Data1，Data2，Date3 ......

要在Kendo UI Grid中加载动态数据，请使用以下代码：（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)

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

感谢您的关注！

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/

它与弗雷德里克解决方案非常相似，但几乎没有变化。

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）为了拥有动态列，我必须将数据源对象中存在的数据转换为值数组。（就像弗雷德里克的创业对象集合一样）

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动态数据源/网格

2 个答案: