剑道树列表顶部的额外行

Question

我们有一个可以正常工作的 Kendo TreeList。数据显示，一切都正确显示在层次结构中。问题是，我们需要将每两列分组到另一个“超集”组中。

如果未按所示分组，列标题（上面的名称不是真实的）太长，并且它们会失去有用的上下文。

我尝试在 TreeList 上方添加一个 HTML 表格，但这看起来不正确。如果用户调整列的大小，它就不起作用。工具栏（用于 Excel 导出）也很碍事，所以它甚至不像是 TreeList 的一部分。

我还研究了将文本包装在列中，但据我所见，这也很不靠谱。

上面显示的额外行（能够合并某些列，例如 HTML 表格）似乎是最好的方法。尽管搜索了网络，但我找不到这样做的方法。剑道树列表甚至可以做到这一点吗？

Answer 1

这个问题已经解决了。不是我，而是我们团队中另一个非常擅长 JavaScript 的开发人员。

诀窍是通过 JavaScript 编辑 TreeList 的 HTML 和 CSS。您可以绑定到任何事件，但我们会在页面加载时进行：

<script>
$(document).ready(function () {
    // anything in here will get executed when the page is loaded
    addTopRowToTreeList();
});

function addTopRowToTreeList() {

    // grab the thead section
    // your HTML may be different
    var foo = $('#MyTreeList').children('div.k-grid-header').children('div.k-grid-header-wrap');
    var tableChild = foo.children('table');
    var headChild = tableChild.children('thead');

    var bottomRow = headChild.children('tr');
    var topRow = $('<tr>').attr('role', 'row');

    // bottom cell should draw a border on the left
    bottomRow.children('th').eq(0).addClass('k-first');

    // add blank cell 
    var myNewCell = $('<th>').addClass('k-header').attr('colspan', '1')
    var headerString = '';
    var headerText = $('<span>').addClass('k-link').text(headerString);
    myNewCell.append(headerText);
    topRow.append(myNewCell);

    // ... add remaining cells, like above

    headChild.prepend(topRow);
}
</script>

仅此而已！