Свойство jQWidgets jqxDataTable autoRowHeight
jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.
Свойство autoRowHeight используется для установки или возврата, если отображаемая таблица jqxDataTable спонтанно оценивает высоту строк, а также закрывает текст ячейки. Это логический тип, и его значение по умолчанию равно true.
Синтаксис:
Установите свойство autoRowHeight :
$("Selector").jqxDataTable({ autoRowHeight: false });Вернуть свойство autoRowHeight :
var autoRowHeight = $("Selector").jqxDataTable("autoRowHeight");Связанные файлы: Загрузите jQWidgets по данной ссылке. В файле HTML найдите файлы сценариев в загруженной папке.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
Пример 1. В приведенном ниже примере показано свойство jqxDataTable autoRowHeight в jQWidgets.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/> <script type="text/javascript" src="scripts/jquery.js"> </script> <script type="text/javascript" src="jqwidgets/jqxcore.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdata.js"> </script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"> </script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"> </script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdatatable.js"> </script></head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxDataTable autoRowHeight Property </h3> <div id="#Data_Table"></div> <table id="Data_Table" border="1"> <thead> <tr> <th>Employee_Name</th> <th>Company</th> <th>Designation</th> </tr> </thead> <tbody> <tr> <td>Rohit</td> <td>GeeksforGeeks</td> <td>HR</td> </tr> <tr> <td>Rahul</td> <td>Capgemini</td> <td>Software Engineer</td> </tr> <tr> <td>Vivek</td> <td>CESC</td> <td>Electrical Engineer</td> </tr> <tr> <td>Amit</td> <td>Apple</td> <td>Manager</td> </tr> </tbody> </table> <input type="button" style="margin: 29px;" id="jqxbtn" value="Click here" /> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { $("#Data_Table").jqxDataTable({ autoRowHeight: false, columns: [{ text: "Employee_Name", dataField: "Employee_Name", width: 190 }, { text: "Company", dataField: "Company", width: 160 }, { text: "Designation", dataField: "Designation", width: 190 }] }); $("#jqxbtn").jqxButton({ width: 280 }); $("#jqxbtn").on("click", function () { var arh = $("#Data_Table").jqxDataTable( "autoRowHeight" ); $("#log").text(arh); }); }); </script></body> </html> |
Выход:
Пример 2. Ниже приведен еще один пример свойства autoRowHeight jqxDataTable, для которого задано значение «null».
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/> <script type="text/javascript" src="scripts/jquery.js"> </script> <script type="text/javascript" src="jqwidgets/jqxcore.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdata.js"> </script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"> </script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"> </script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdatatable.js"> </script></head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxDataTable autoRowHeight Property </h3> <div id="#Data_Table"></div> <table id="Data_Table" border="1"> <thead> <tr> <th>Employee_Name</th> <th>Company</th> <th>Designation</th> </tr> </thead> <tbody> <tr> <td>Rohit</td> <td>GeeksforGeeks</td> <td>HR</td> </tr> <tr> <td>Rahul</td> <td>Capgemini</td> <td>Software Engineer</td> </tr> <tr> <td>Vivek</td> <td>CESC</td> <td>Electrical Engineer</td> </tr> <tr> <td>Amit</td> <td>Apple</td> <td>Manager</td> </tr> </tbody> </table> <input type="button" style="margin: 29px;" id="jqxbtn" value="Click here" /> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { $("#Data_Table").jqxDataTable({ autoRowHeight: null, columns: [{ text: "Employee_Name", dataField: "Employee_Name", width: 190 }, { text: "Company", dataField: "Company", width: 160 }, { text: "Designation", dataField: "Designation", width: 190 }] }); $("#jqxbtn").jqxButton({ width: 280 }); $("#jqxbtn").on("click", function () { var arh = $("#Data_Table").jqxDataTable( "autoRowHeight" ); if (arh === null) { $("#log").text(arh); } else { $("#log").text("Not null!"); } }); }); </script></body> </html> |
Выход:
Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm