Kendo ui 更新后如何通过颜色变化突出显示剑道网格单元

我正在使用带有MVC和Signaler的剑道Ui网格。我可以使用SignalR在网格上成功执行CRUD操作。我想通过突出显示（通过更改单元格颜色）更新的单元格来通知客户。如何使用以下代码实现这一点：

@(Html.Kendo().Grid<Webapplication1.Models.ShipViewModel>()
.Name("ShipGrid")
.Columns(c =>{
    c.Bound(m => m.Id).Hidden();
    c.Bound(m => m.LocationViewModel)
        .Title("Location1");
    c.Bound(m => m.Location2ViewModel)
        .Title("Location2");
    c.Bound(m => m.boxSent);
    c.Command(p =>
    {
        p.Edit().Text(" ").UpdateText(" ").CancelText(" ");
        p.Destroy().Text(" ").HtmlAttributes(new { @title = "Cancel" });
    });
})
.ToolBar(toolbar =>
{
    toolbar.Create().Text("").HtmlAttributes(new { @title = "Add" });
})
.Editable(editable => editable
    .DisplayDeleteConfirmation("DELETE.")
    .Mode(Kendo.Mvc.UI.GridEditMode.PopUp)
    .TemplateName("abcEditor")
    )
.Events(events =>
{
    events.Edit("edit");
}) 
.DataSource(dataSource => dataSource 
    .SignalR()        
    .Transport(tr => tr
        .Promise("hubStart")
        .Hub("mainHub")
        .Client(c => c.Read("abc_Read").Create("abc_Insert").Update("abc_Update").Destroy("abc_Delete"))
        .Server(s => s.Read("abc_Read").Create("abc_Insert").Update("abc_Update").Destroy("abc_Delete")))
  .Schema(schema => schema  
    .Model(m => {
        m.Id(p => p.Id);
        m.Field(p => p.Location1ViewModel).DefaultValue(ViewData["DefaultLocation1"] as Webapplication1.Models.Location1ViewModel);
        m.Field(p => p.Location2ViewModel).DefaultValue(ViewData["DefaultLocation2"] as Webapplication1.Models.DeliveryLocationViewModel);
    })
 )
)

@（Html.Kendo（）.Grid（））
.名称（“船舶电网”）
.列（c=>{
c、 绑定（m=>m.Id）.Hidden（）；
c、 绑定（m=>m.LocationViewModel）
.名称（“地点1”）；
c、 绑定（m=>m.Location2ViewModel）
.名称（“地点2”）；
c、 绑定（m=>m.boxSent）；
c、 命令（p=>
{
p、 Edit（）.Text（“”）。UpdateText（“”）。CancelText（“”）；
p、 Destroy（）.Text（“”）.HtmlAttributes（新的{@title=“Cancel”}）；
});
})
.ToolBar（ToolBar=>
{
toolbar.Create（）.Text（“”.HtmlAttributes（新的{@title=“Add”}）；
})
.可编辑（可编辑=>可编辑
.DisplayDeleteConfirmation（“删除”）
.Mode（Kendo.Mvc.UI.GridEditMode.PopUp）
.TemplateName（“abcEditor”）
)
.Events（Events=>
{
事件。编辑（“编辑”）；
}) 
.DataSource（DataSource=>DataSource
.signar（）
.运输（tr=>tr
.承诺（“hubStart”）
.Hub（“mainHub”）
.Client（c=>c.Read（“abc\u-Read”）。创建（“abc\u-Insert”）。更新（“abc\u-Update”）。销毁（“abc\u-Delete”））
.Server（s=>s.Read（“abc_-Read”）。创建（“abc_-Insert”）。更新（“abc_-Update”）。销毁（“abc_-Delete”））
.Schema（Schema=>Schema
.Model（m=>{
m、 Id（p=>p.Id）；
m、 字段（p=>p.Location1ViewModel）.DefaultValue（作为Webapplication1.Models.Location1ViewModel的ViewData[“DefaultLocation1”]）；
m、 字段（p=>p.Location2ViewModel）.DefaultValue（作为Webapplication1.Models.DeliveryLocationViewModel的ViewData[“DefaultLocation2”]）；
})
)
)

)

---

我想在此突出显示正在更新的单元格。有点像股市数据闪烁。我怎样才能做到这一点呢？

我也做过类似的事情。我不知道这是否对你有帮助。在默认视图模型中，添加一个额外属性，将“Updated”表示为布尔值。现在，每次更新一行时，将“Updated”作为true

在剑道网格中添加一个新的数据绑定事件

.Events(events => events.DataBound("onDataBound"))

现在在JS上使用如下内容：

function onDataBound(arg) {

    var itemsInActivityGrid = $("#ShippingGrid").data().kendoGrid.dataSource.data().length;

    for (i = 0; i < itemsInActivityGrid; i++) {
        if ($("#ShippingGrid").data().kendoGrid.dataSource.data()[i].Updated == true) {
            $("#ShippingGrid .k-grid-content tr[data-uid='" + $("#ShippingGrid").data().kendoGrid.dataSource.data()[i].uid + "']").css("background-color", "orange");
        }
    }
}

函数onDataBound（arg）{
var itemsInActivityGrid=$（“#ShippingGrid”）.data（）.kendoGrid.dataSource.data（）.length；
对于（i=0；i

更新：我不知道你的逻辑。就你发表评论而言，你想做一些类似于在线分享交易网站的事情。无论如何，尽我所能，如果您想突出显示一行中的单个单元格，请添加另一个字段，即“Column”和“Updated”；它可能是一根绳子。在这里，您可以标记要从后端放置背景颜色的单元格。假设我们得到它的值为“2”

（i=0；i { var TableUID=$（“#ShippingGrid”）.data（）.kendoGrid.dataSource.data（）[i].uid； var TableToColour=$（“#ShippingGrid.k-grid-content tr[data-uid='“+TableUID+']”）parent（）.parent（）[0]； var ColumnToColor=$（“#ShippingGrid”）.data（）.kendoGrid.dataSource.data（）[i].Column； $（TableToColour.rows[0]。单元格[“+ColumnToColor+”]）。选择（）.attr（“样式”，“背景色：蓝色”） } 在这种情况下，您需要高亮显示同一行中的多个单元格，在列中发送类似“1,2,3,5”的内容；其中1、2、3和5表示同一行上的列号。在ColumnToColor做了一些字符串解析之后，将其放入for循环或其他东西中，并添加颜色

---

希望这有帮助。谢谢。

我已经实现了以下目标，并且工作正常：

在my.cshtml页面中

myHub.client.highlightRow = function (id) {
        var data = $("#MyGrid").data("kendoGrid").dataSource.data();
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            if (dataItem.id == id) {
                //alert(dataItem.uid);
                $("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
            }
        }
    };

---

我认为这会改变行的背景颜色，但我只想通过闪烁更新行的颜色来通知，就像股票市场数据改变一样。谢谢Mahib。急切地等待你的回应，抱歉耽搁了，伙计。希望这有帮助。嗨，马希布，我试过了，但对我不起作用。可能是因为信号器，OnDatabound事件（AJAX）没有触发，或者可能是我没有正确理解它。无论如何，我只是通过jquery实现了它。我已经把我的答案贴在这里了。

myHub.client.highlightRow = function (id) {
        var data = $("#MyGrid").data("kendoGrid").dataSource.data();
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            if (dataItem.id == id) {
                //alert(dataItem.uid);
                $("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
            }
        }
    };

Clients.Others.highlightRow(mygridViewModel.Id);