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上的額外行

回答

相關問題