2017-03-17 3 views
4

enter image description hereこの質問は剣道フォーラムにも投稿されています。複数のヘッダー行が存在する場合、剣道グリッドページングは​​機能しません。

剣道のグリッドを使用して私のUIとページング/並べ替えがうまくいくまで、私は複数の行(tr:2とtr:3)を私の犠牲に追加します。どうすればこの問題を解決できますか?周りに道があるのですか?私は単純な行だけをグループ化しているわけではありません。

<table> 
<thead> 
      <tr> 
       <th data-field="firstname">First Name</th> 
       <th data-field="surname">Surname</th> 
       <th>Class</th> 
       <th>Current Age</th> 
       @foreach (MapDetail geMapDetail in Model.mapDetails) 
       { 

         <th [email protected]>Growth</th> 

       } 
      </tr> 
      <tr> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <!--get from mapdetails--> 
       @foreach (MapDetail geMapDetail in Model.mapDetails) 
       { 

        <th id="Year-Sem-Term">@geMapDetail.year</th> 
       } 
      </tr> 

      <tr> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <!--get from mapdetails--> 
       @foreach (MapDetail geMapDetail in Model.mapDetails) 
       { 

         <th>@geMapDetail.shortDescription</th> 

       } 
      </tr> 
     </thead> 
    <tbody></tbody> 
<table/> 

私のjqueryのスクリプト

$("#MapDetails").kendoGrid(
    { 

     sortable: true, 
     dataSource: { 
      pageSize: 5 
     }, 
     pageable:true, 
     resizable: true, 
     columns: [{ 
      field: "firstname", 
      width: 150, 
      locked: false 
      } 
     ] 
    } 


    ); 
+0

あなたが使っている剣道のバージョンは? jsbinや他のWebツールでこれを再現できますか?あなたがそれを行うことができれば、例のリンクを与えてください。あなたを援助したいと思う人にとっては素晴らしいことです –

答えて

3

私は1つの行にすべての3/4の行を合併し、「BR」タグでそれらを間隔を置いて配置しているです。

<table class="table table-bordered table-striped table-bordered" id="MapDetails"> 

<thead> 
    <tr class=""> 
     <th data-field="firstname">First Name</th> 
     <th data-field="surname">Surname</th> 
     <th data-field="class">Class</th> 
     <th data-field="age">Current Age</th> 
     @{ 

      foreach (MapDetail geMapDetailHead in Model.mapDetails) 
      { 
       string firstText, secText, thirdText, fourthText; 
       //...set all 4 header row values in the above variables 
       <th [email protected]>@firstText<br /><b>@secText</b><br />@thirdText<br /><font size="1">@fourthText</font></th> 

      } 
     } 

同じ目的を果たしました。

4

私はそれは、既存のテーブルから作成された場合は特に、(multi-column headersいわゆる除く)グリッドのサポート、複数のヘッダー行を考えていません。私が見る限りでは、このような場合にJavaScriptエラーが発生します。

グリッドの初期化後にヘッダーに追加のテーブル行を挿入することをお勧めします。また、複数列ヘッダーを試して、親列ごとに1つの子列しか持たないようにすることもできます。私が行っている何

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <div id="example"> 
 
     <table id="grid"> 
 
     <colgroup> 
 
      <col /> 
 
      <col /> 
 
      <col style="width:110px" /> 
 
      <col style="width:120px" /> 
 
      <col style="width:130px" /> 
 
     </colgroup> 
 
     <thead> 
 
      <tr> 
 
      <th data-field="make">Car Make</th> 
 
      <th data-field="model">Car Model</th> 
 
      <th data-field="year">Year</th> 
 
      <th data-field="category">Category</th> 
 
      <th data-field="airconditioner">Air Conditioner</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>Volvo</td> 
 
      <td>S60</td> 
 
      <td>2010</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Audi</td> 
 
      <td>A4</td> 
 
      <td>2002</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>BMW</td> 
 
      <td>535d</td> 
 
      <td>2006</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>BMW</td> 
 
      <td>320d</td> 
 
      <td>2006</td> 
 
      <td>Saloon</td> 
 
      <td>No</td> 
 
      </tr> 
 
      <tr> 
 
      <td>VW</td> 
 
      <td>Passat</td> 
 
      <td>2007</td> 
 
      <td>Saloon</td> 
 
      <td>No</td> 
 
      </tr> 
 
      <tr> 
 
      <td>VW</td> 
 
      <td>Passat</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Peugeot</td> 
 
      <td>407</td> 
 
      <td>2006</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Honda</td> 
 
      <td>Accord</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>No</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Alfa Romeo</td> 
 
      <td>159</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>No</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Nissan</td> 
 
      <td>Almera</td> 
 
      <td>2001</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Mitsubishi</td> 
 
      <td>Lancer</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Opel</td> 
 
      <td>Vectra</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Toyota</td> 
 
      <td>Avensis</td> 
 
      <td>2006</td> 
 
      <td>Saloon</td> 
 
      <td>No</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Toyota</td> 
 
      <td>Avensis</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Toyota</td> 
 
      <td>Avensis</td> 
 
      <td>2008</td> 
 
      <td>Saloon</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Audi</td> 
 
      <td>Q7</td> 
 
      <td>2007</td> 
 
      <td>SUV</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Hyundai</td> 
 
      <td>Santa Fe</td> 
 
      <td>2012</td> 
 
      <td>SUV</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Hyundai</td> 
 
      <td>Santa Fe</td> 
 
      <td>2013</td> 
 
      <td>SUV</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Nissan</td> 
 
      <td>Qashqai</td> 
 
      <td>2007</td> 
 
      <td>SUV</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Mercedez</td> 
 
      <td>B Class</td> 
 
      <td>2007</td> 
 
      <td>Hatchback</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Lancia</td> 
 
      <td>Ypsilon</td> 
 
      <td>2006</td> 
 
      <td>Hatchback</td> 
 
      <td>Yes</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 

 
     <script> 
 
     $(document).ready(function() { 
 
      $("#grid").kendoGrid({ 
 
      sortable: true, 
 
      pageable: true, 
 
      dataSource: { 
 
       pageSize: 5 
 
      } 
 
      }); 
 
      
 
      $("#grid").data("kendoGrid").thead.append('<tr><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th></tr>'); 
 
     }); 
 
     </script> 
 
    </div> 
 

 
    </body> 
 
</html>

関連する問題