Kendo Treelist上的额外行

我们有一个Kendo TreeList，它工作正常。数据显示，一切正确显示在层次结构中。问题是，我们需要将每两列分成另一个“超集”组。Kendo Treelist上的额外行

的列标题（上面的名称，是不是真正的）太长，如果如图所示不分组，他们失去了有益的参考。

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

我也看着包装在列中的文本，但从我所看到的，这也是非常不错的。

它看起来像上面显示的一个额外的行（能够合并一些列，如使用HTML表）是最好的方式。尽管在网上冲浪，我找不到办法做到这一点。这甚至可以用Kendo树列表吗？

来源

2017-07-18 Frecklefoot

这已经解决了。不是由我，而是由我们团队中擅长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>

这就是它的全部！

来源

2017-07-20 01:42:27 Frecklefoot

Kendo Treelist上的额外行

回答

相关问题