如何使一個treeview表響應

嗨下面是我的樹表結構我想使這個作爲響應table.i有樹格在我的表中雖然datatable響應應用響應不工作擴展崩潰不工作如何使一個treeview表響應

<table class="tree display responsive no-wrap"> 
 
    <thead> 
 
    <tr> 
 
    <th>name</th> 
 
    <th>class</th> 
 
    <th>Remark</th> 
 
    <th>xyz</th> 
 
    <th>zyz</th> 
 
    <th>zyz</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-02-06 Lier

您可以使用引導程序來創建響應表。

Examlpe：

<head> 
 
<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<div class="table-responsive container"> 
 
<table class="table table-inverse"> 
 
    <tbody> 
 
    <th>name<th> 
 
    <th>class<th> 
 
    <th>Remark<th> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
    </div>

來源

2017-02-06 06:50:41 sachin

沒有在這個scenarion方式@sachin我有approxmatly 12 TR的它需要得到崩潰 – Lier

格式的HTML正確地（正常如圖&末<th>）<tr>...</tr>周圍<th>..</th> &添加<thead>..</thead>周圍頭& <tbody>...</tbody>圍繞身體和添加代碼自動添加失蹤<td></td>：

$(document).ready(function() { 
 
    // Add missing <td></td> according to number of columns found in head 
 
    var numTd = $('th').length; 
 
    console.log('Number of columns found in head =: ', numTd); 
 
    $('tbody tr').each(function() 
 
    { 
 
     var i = $(this).find('td').length; 
 
     while(i < numTd) 
 
     { 
 
      $(this).append('<td></td>'); 
 
      i++; 
 
     } 
 
    }); 
 
    
 
    $('.tree').DataTable(); 
 
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /> 
 
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> 
 

 
<table class="tree display responsive no-wrap"> 
 
    <thead> 
 
    <tr> 
 
    <th>name</th> 
 
    <th>class</th> 
 
    <th>Remark</th> 
 
    <th>xyz</th> 
 
    <th>zyz</th> 
 
    <th>zyz</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    <tr> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigThing</td> 
 
    <td>somethigvalue</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-02-06 09:28:26

請檢查更新 - 忘記responive LIB - 現在加入 –

我感謝您的支持，但遺憾地說，它不工作的DataTable是應用程序，但在700px後的事情解決方案並不是所有的響應式事物都是靜態的。 – Lier

圖像中的（+）表明響應正在工作 - 但標題下未對齊的數據使我認爲存在錯誤的html格式。你能提供你使用的代碼與圖像中的xyz 123數據嗎？（你運行了我的代碼的代碼片段，看到（+）正在工作嗎？） –

如何使一個treeview表響應

回答

相關問題