我有一个在表格显示中实现的 kendo UI ListView,如下所示:
Name user1 user2 user3
country usa uk germany
production 5000 6000 1000
Sales 200 400 100
我想强调 6000 单元,它是 user2 的生产数据。我可以使用下面的代码突出显示整个列,但我只想突出显示单个项目(单元格)。我正在使用 Kendo UI for asp.net MVC。我怎样才能使用 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>
最佳答案
突出显示单元格就像为其分配一个类一样简单(在客户端模板中):
<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>
然后,您可以将任何您想要的样式应用到 css 文件中的 .highlighted
类。但是,我假设您想根据标准突出显示该单元格。在这种情况下,您可以向 View 模型添加一个新的 bool 标志,在 Controller 中将该标志设置为 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>
关于javascript - 如何突出显示 Kendo UI ListView 中的特定项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37185465/