0

我在表格显示中实现了一个剑道 UI ListView，如下所示：

Name           user1   user2    user3  
country        usa     uk       germany  
production     5000    6000     1000  
Sales          200     400      100

我想强调 6000 单元格，它是 user2 的生产数据。我可以使用下面的代码突出显示整个列，但我只想突出显示单个项目（单元格）。我正在为 asp.net MVC 使用 Kendo UI。如何使用 JavaScript/jquery 做到这一点？

<script>
    $(function () {
TestHub.client.highlightValue = function (id) {
        var listView = $("#ListView_Test").data("kendoListView");
        listView.element.children("[data-uid='" + listView.dataSource.view()[2].uid + "']").effect("highlight", { color: Red}, 500);
})
};
</script>


    <div class="k-widget">
                <dl>
                    <dd>Name</dd>
                    <dd>Country</dd>
                    <dd>Production</dd>
                    <dd>Sales</dd>
                </dl>
            </div>
@(Html.Kendo().ListView<Test.Models.TestViewModel>()
    .Name("Test_LV")
    .TagName("div")
    .ClientTemplateId("templateTestLV")
                    .DataSource(dataSource => dataSource
                        .SignalR()
                        .Transport(tr => tr
                            .Promise("hubStart")
                                .Hub("TestHub")
                                .Client(c => c.Read("TestLV_Read").Update("TestLV_Update"))
                                .Server(s => s.Read("TestLV_Read").Update("TestLV_Update"))
                            )
                      .Schema(schema => schema
                        .Model(m =>
                        {
                            m.Id(p => p.Id);

                            m.Field(p => p.Name).Editable(false);
                            m.Field(p => p.Country).Editable(false);
                            m.Field(p => p.Production).Editable(false);
                            m.Field(p => p.Sales).Editable(false);
                        })
                     )
                    )
                            .Editable(editable => editable.TemplateName("TestLVEditor"))
            )
<script type="text/x-kendo-tmpl" id="templateTestLV">
    <div>
        <dl>
            <dd>#=Name</dd>
            <dd>#=Country</dd>
            <dd>#=Production</dd>
            <dd>#=Sales</dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
        </div>
    </div>
</script>
4

1 回答 1

1

突出显示单元格就像为它分配一个类一样简单（在客户端模板中）：

<script type="text/x-kendo-tmpl" id="templateTestLV">
    <div>
        <dl>
            <dd>#=Name</dd>
            <dd>#=Country</dd>
            <dd class="highlighted">#=Production</dd>
            <dd>#=Sales</dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
        </div>
    </div>
</script>

然后，您可以将任何您想要的样式应用到.highlighted您的 css 文件中的类。但是，我假设您想根据标准突出显示该单元格。在这种情况下，您可以在视图模型中添加一个新的布尔标志，如果需要根据标准突出显示产品，则在控制器中将该标志设置为 true，并且.highlighted仅在标志设置为 true 时添加类。如下所示：

<script type="text/x-kendo-tmpl" id="templateTestLV">
    <div>
        <dl>
            <dd>#=Name</dd>
            <dd>#=Country</dd>
            <dd class="#=(IsHighlighted == true ? \"highlighted\" : \"\")#">#=Production</dd>
            <dd>#=Sales</dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
        </div>
    </div>
</script>
于 2016-05-12T14:32:06.527 回答