如何在 kendo ui 网格中标记新添加的行

Question

我正在处理 kendo UI 网格，它位于 whitin tabstrip (tabstrip.select(0))。输入字段位于第二个选项卡 (tabstrip.select(1)) 中。粗加工操作正常。我的按钮保存点击事件看起来是这样的：

function saveDataMasterGrid() {
    tabstrip.select(0);
    var field1 = $("#field1").val();
    var field2 = $("#field2").val();
    var field3 = $("#field3").val();
    var field4 = $("#field4").val();
    var field5 = $("#field5").val();
    var field6 = $("#field6").val();
    var field7 = $("#field7").val();
    var field8 = $("#field8").val();

    var gridData = $("#gridMaster").data("kendoGrid");
    var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));

    if (selectedRowData != null || selectedRowData != undefined) {
        gridData.dataSource.pushUpdate({
            Id: selectedRowData.Id,
            dataField1: field1,
            dataField2: field2,
            dataField3: field3,
            dataField4: field4,
            dataField5: field5,
            dataField6: field6,
            dataField7: field7,
            dataField8: field8
        });
    } else {
        gridData.dataSource.add({
            Id: gridData.dataSource.total() + 1,
            dataField1: field1,
            dataField2: field2,
            dataField3: field3,
            dataField4: field4,
            dataField5: field5,
            dataField6: field6,
            dataField7: field7,
            dataField8: field8
        });
    }

如何在 kendo ui 网格中标记新的 added/edited 行？任何帮助表示赞赏。提前谢谢你。

Answer 1

dataSource 的方法add()return新添加行的dataItem。所以你可以通过 uid 属性:

找到该行

// After calling add()...

$(grid.tbody)
    .find("tr").removeClass("new-row") // Remove recent added tr's .new-row classes
    .filter('tr[data-uid="' + newRow.uid + '"]').addClass("new-row"); // Add class to the new row

Demo

如何在 kendo ui 网格中标记新添加的行

How can mark newly added row in kendo ui grid

javascript

jquery

kendo-ui

kendo-ui-grid