javascript - Kendo UI 网格 - 分组表标题

Question

我想为分组的 Kendo UI 网格实现全部折叠/展开功能(在 AngularJs 中)并将其添加到网格的标题中。您知道如何将我的功能放在那里(请参阅附件)。谢谢!

Dojo with a normal grid with grouping activated

Answer 1

您可以在 k-group-cell k-header 元素上动态创建 button 元素:

var expandCollapseAll = document.createElement('button');
expandCollapseAll.innerHTML = ">";
var elementToAppend = document.getElementsByClassName("k-group-cell k-header");
elementToAppend[0].appendChild(expandCollapseAll);
expandCollapseAll.onclick = toggleExpandCollapse;

toggleExpandCollapse 函数会触发所有 .k-icon.k-collapse 和 .k-icon 的 click 事件.k-expand 网格上的元素。

折叠全部:

$("#grid").find(".k-icon.k-collapse").trigger("click");

展开全部:

$("#grid").find(".k-icon.k-expand").trigger("click");

我创建了一个sample JSFiddle以实际行动演示上述内容。

注意:按钮的 CSS 有点偏差，但这应该足以让您继续操作:)