剣道部の余分な行

Question

剣道のTreeListがあります。データが示すとおり、すべてが正しく階層に表示されます。問題は、各2つの列を別の「スーパーセット」グループにグループ化する必要があることです。

列見出しは、（上記の名前は本物ではない）が長すぎる示すようにグループ化されていない場合であり、それらは有益なコンテキストを失います。

TreeListの上にHTMLテーブルを追加しようとしましたが、正しく表示されません。また、ユーザーが列のサイズを変更しても機能しません。また、ツールバー（Excelのエクスポート用）が途中にあり、TreeListの一部であるようにも見えません。

私はまた、列のテキストを折り返して見ましたが、私が見たことから、それも本当にiffyです。

上記の余分な行（HTML表のようないくつかの列をマージする機能を持つ）が最善の方法です。ウェブを精練しているにもかかわらず、私はこれを行う方法を見つけることができませんでした。これは、剣道のツリーリストでも可能ですか？

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> 

これだけです。