Question

我也在剑道论坛上发布了这个问题并等待回复。

我正在使用kendo网格为我的ui和分页/排序工作正常，直到我在我的thead中添加多行（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 id=@geMapDetail.MapDetailID>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
           }
       ]
   }


   );

Answer 1

我认为Grid不支持多个标题行（所谓的multi-column headers除外），特别是当它从现有表创建时。据我所知，在这种情况下会发生JavaScript错误。

我可以建议在网格初始化后在标头中注入额外的表行。或者，您可以尝试多列标题，每个父列只有一个子列。

<!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>

Answer 2

我所做的是将一行中的所有3/4行合并并用＆＃34; br＆＃34;标签

<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 id=@geMapDetailHead.MapDetailID>@firstText<br /><b>@secText</b><br />@thirdText<br /><font size="1">@fourthText</font></th>

            }
       }

服务于同样的目的。

当存在多个标题行时，Kendo网格分页不起作用

2 个答案: