kendo-ui - Kendo Tree 列表顶部的额外行

Question

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



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

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

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

看起来像上面所示的额外行(具有合并某些列的能力，如 HTML 表)是最好的方法。尽管搜索了网络，但我找不到这样做的方法。这甚至可以用 Kendo Tree 列表吗？

Answer 1

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

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

<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>

这里的所有都是它的!