Kendo Treelist顶部的额外排

Question

我们有一个工作正常的Kendo TreeList。数据显示，一切都在层次结构中正确显示。问题是，我们需要将每两列分成另一列＆＃34;超集＆＃34;基。

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

我尝试在TreeList上面添加一个HTML表格，但这看起来并不合适。如果用户调整列的大小，它就不起作用。此外，工具栏（用于Excel导出）会妨碍它，因此它看起来甚至不像是TreeList的一部分。

我还看过将文字包装在栏​​目中，但从我所看到的情况来看，这也非常不合适。

如上所示，似乎是一个额外的行（能够合并某些列，就像使用HTML表一样）是最好的方法。尽管在网上搜索，我还是找不到办法做到这一点。这是否可以使用Kendo TreeList？

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>

这就是它的全部！