Question

我在应用程序中有kendo网格，并且它有可过滤的真正选项。我的要求是当我们将过滤应用于列时，列标题字体样式将更改为斜体。如何做？如果有任何人有想法请告诉我..

Answer 1

我个人没有使用过kendo网格，但我很快就尝试了演示here，并发现它将“k-state-active”类添加到＆lt; a＆gt; ＆lt; th＆gt;内的元素元件。

但是，标题文字不在＆lt; a＆gt;内。元件。您需要的是parent selector which current CSS does not support。

据我所知，这在纯CSS中是不可能的

你需要一些javascript。以下是使用jQuery的可能解决方案：

// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
  setTimeout(function() {
    // first make all headers normal, then make the filtered column header italic
    $('th.k-header.k-filterable').css('font-style', 'normal').filter(
      ':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
  }, 100);
})

使用setTimeout是因为仅在过滤数据后才添加“k-state-active”类。同样，我不熟悉kendo网格，所以我不知道是否有办法为过滤器提供回调方法。您可能需要对此进行调查，因为如果您拥有庞大的数据集，那么100毫秒的延迟可能不够长。

我对jQuery特定解决方案表示歉意。啊......没有jQuery，我什么都做不了。羞。

但希望这对你有所帮助！如果您需要任何进一步的帮助，请告诉我。

Answer 2

这可以通过一个CSS行：

.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}

无需使用java脚本。

如何将字体样式应用于筛选的列标题？

2 个答案: