Kendo ui 剑道树上额外的一排

Kendo ui 剑道树上额外的一排,kendo-ui,kendo-asp.net-mvc,kendo-treeview,Kendo Ui,Kendo Asp.net Mvc,Kendo Treeview,我们有一个剑道剑术师,效果很好。数据显示,层次结构中的所有内容都正确显示。问题是,我们需要将每两列分成另一个“超集”组 列标题(上面的名称不是真实的)如果未按所示分组,则太长,并且会丢失有用的上下文 我尝试在树列表上方添加一个HTML表,但看起来不太对劲。如果用户调整列的大小,它就不起作用。此外,工具栏(用于Excel导出)也挡住了去路,因此它看起来甚至不像是树列表的一部分 我还研究了在列中包装文本,但从我所看到的情况来看,这也很不确定 看起来,如上所示的一个额外的行(具有合并某些列的能力,如

我们有一个剑道剑术师,效果很好。数据显示,层次结构中的所有内容都正确显示。问题是,我们需要将每两列分成另一个“超集”组

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

我尝试在树列表上方添加一个HTML表,但看起来不太对劲。如果用户调整列的大小,它就不起作用。此外,工具栏(用于Excel导出)也挡住了去路,因此它看起来甚至不像是树列表的一部分

我还研究了在列中包装文本,但从我所看到的情况来看,这也很不确定


看起来,如上所示的一个额外的行(具有合并某些列的能力,如HTML表)是最好的方法。尽管在网上搜索,我还是找不到这样做的方法。剑道树人也能做到这一点吗?

这个问题已经解决了。不是我,而是我们团队中另一位精通JavaScript的开发人员

诀窍是通过JavaScript编辑树列表的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>

$(文档).ready(函数(){
//当页面加载时,这里的任何内容都将被执行
addtoprowtorelist();
});
函数addtoprowtorelist(){
//抓住thead部分
//您的HTML可能不同
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=头子女.children('tr');
var topRow=$('').attr('role','row');
//底部单元格应在左侧绘制边框
最下面一行。children('th')。eq(0)。addClass('k-first');
//添加空白单元格
var myNewCell=$('').addClass('k-header').attr('colspan','1'))
var headerString='';
var headerText=$('').addClass('k-link').text(headerString);
追加(headerText);
追加(myNewCell);
//…添加剩余的单元格,如上图所示
头儿童。预弯(顶行);
}
就这些