Question

我有一个kendo网格，我想在每次执行ajax调用时更改行颜色。为此，我创建了一个javascript函数，效果很好，这个函数在ajax成功之前改变了行颜色。

function runCommand(command) {
    //Selecting Grid
    var gview = $("#grid").data("kendoGrid");
    //Getting selected rows
    var rows = gview.select();
    var rowOldClass;
    if (rows.size() == 0) alert("Please select an area");
    else {
        //Iterate through all selected rows
        rows.each(function (index, row) {

            // Get an item
            var selectedItem = gview.dataItem(row);

            // Call the API Controler to start the command on the selected area
            var params = {
                AreaId: selectedItem.Id,
                Command: command
            };
            var areaName = selectedItem.Name;
            $.ajax({
                type: 'POST',
                url: 'myapi',
                data: JSON.stringify(params),
                dataType: 'json',
                contentType: "application/json",

                beforeSend: function () {
                    //Change row color
                    var row = $("#grid").data("kendoGrid")
                               .tbody
                               .find("tr[data-uid='" + selectedItem.uid + "']");

                    // Set the background Color to yellow
                    row.css("background-color", "#FDB913");
                },
                success: function (data) {
                    // Put the result into the output textarea
                    var result = $("#output").val();
                    $("#output").val(result+"\n"+data);
                    //A trick to go back to the previous css
                    selectedItem.set("Name", "");
                    selectedItem.set("Name", areaName);
                }
            }).fail(function () {
                alert("error: cannot execute the command.");
                //A trick to go back to the previous css
                selectedItem.set("Name", "");
                selectedItem.set("Name", areaName);
            });
        });
    }
}

正如您所看到的，在更改行的颜色后，我使用这两行返回上一个状态。

selectedItem.set("Name", "");
selectedItem.set("Name", areaName);

我的功能问题在于，当我在多个区域上运行多个动作时，我希望每一行都挂在它上面的前一种颜色而不刷新（黄色），然后只有当它停止时才返回默认颜色AJAX调用已完成。在当前的实现中，当我在不同的行上运行多个AJAX调用时，完成它的第一行AJAX调用将更新所有不可接受的网格因为我只想要那行完成了要更新的AJAX调用，而不是所有网格，因为更新网格，将导致所有行更新。有没有解决这个问题的方法？谢谢！

Answer 1

您可以使用＆＃34;数据＆＃34;重新发回更新项目的ID，以便成功{} 您可以通过查找该ID来获取已成功修改的选择行。

Answer 2

您可以使用 kendoGrid.dataSource.bind 这样的事件

$('#grid').data().kendoGrid.dataSource.bind('change', function(e) {
                    //this event will get call on page/sort/group/filter/create/read/update/delete events.
                    setColor();
                });

我希望这对你有帮助..

Kendo Grid - 交替行颜色，无需刷新所有网格

2 个答案: