如何使用固定列在数据表中组合treetable

时间:2015-11-01 17:28:51

标签: javascript jquery datatables treetable fixed-header-tables

您好我面临的问题是在扩展和折叠时使用固定列将数据表中的treetable组合在一起。

这是我尝试过的代码。请帮我解决这个问题。



$("#example").treetable({expandable:true});
$('#example').DataTable( {
        scrollX:        true,
        fixedColumns:   true,
          "scrollX": true,
	} );

<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" />
<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet" />
<link href="http://cdn.datatables.net/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.1.0/js/dataTables.fixedColumns.min.js"></script>
<script src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th rowspan="2">Level</th>
         <th colspan="4">Main Header 1</th>
         <th colspan="3">Main Header 2</th>
         <th colspan="4">Main Header 3</th>
      </tr>
      <tr>
         <th>Sub Header 11</th>
         <th>Sub Header 12</th>
         <th>Sub Header 13</th>
         <th>Sub Header 14</th>
         <th>Sub Header 21</th>
         <th>Sub Header 22</th>
         <th>Sub Header 23</th>
         <th>Sub Header 31</th>
         <th>Sub Header 32</th>
         <th>Sub Header 33</th>
         <th>Sub Header 34</th>

      </tr>
   </thead>

   <tbody>
      <tr data-tt-id='1'>
         <td>Place 1</td>
         <td>Data1</td>
         <td>Data2</td>
         <td>Data3</td>
         <td>Data4</td>
         <td>Data5</td>
         <td>Data6</td>
         <td>Data7</td>
         <td>Data8</td>
         <td>Data9</td>
         <td>Data10</td>
         <td>Data11</td>
      </tr>
      <tr data-tt-id='1-1' data-tt-parent-id='1'>
         <td>Child 1</td>
         <td>Data1</td>
         <td>Data2</td>
         <td>Data3</td>
         <td>Data4</td>
         <td>Data5</td>
         <td>Data6</td>
         <td>Data7</td>
         <td>Data8</td>
         <td>Data9</td>
         <td>Data10</td>
         <td>Data11</td>
      </tr>
      <tr data-tt-id='1-1-1' data-tt-parent-id='1-1'>
         <td>Sub-Child 2</td>
         <td>Data1</td>
         <td>Data2</td>
         <td>Data3</td>
         <td>Data4</td>
         <td>Data5</td>
         <td>Data6</td>
         <td>Data7</td>
         <td>Data8</td>
         <td>Data9</td>
         <td>Data10</td>
         <td>Data11</td>
      </tr>
      <tr data-tt-id='1-2' data-tt-parent-id='1'>
         <td>Child 2</td>
         <td>Data1</td>
         <td>Data2</td>
         <td>Data3</td>
         <td>Data4</td>
         <td>Data5</td>
         <td>Data6</td>
         <td>Data7</td>
         <td>Data8</td>
         <td>Data9</td>
         <td>Data10</td>
         <td>Data11</td>
      </tr>
      <tr data-tt-id='2'>
         <td>Place 2</td>
         <td>Data1</td>
         <td>Data2</td>
         <td>Data3</td>
         <td>Data4</td>
         <td>Data5</td>
         <td>Data6</td>
         <td>Data7</td>
         <td>Data8</td>
         <td>Data9</td>
         <td>Data10</td>
         <td>Data11</td>
      </tr>
   </tbody>
</table>
&#13;
&#13;
&#13;

0 个答案:

没有答案