Свойство рендеринга jQWidgets jqxDataTable
jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.
Рендеринг свойство — это функция обратного вызова, которая вызывается перед возвратом строк отображаемой таблицы jqxDataTable. Это функциональный тип, и его значение по умолчанию — «null».
Синтаксис:
Установить рендеринг имущество.
$("Selector").jqxDataTable({ rendering: null });
Вернуть рендеринг имущество.
var rendering = $("Selector").jqxDataTable("rendering");
Связанные файлы: Загрузите 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. свойство в 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 rendering 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({ rendering: function () { $("#jqxbtn"). click(function () { $("#log").text("Function invoked!") }); }, 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 }); }); </ script > </ body > </ html > |
Выход:
Пример 2. Ниже приведен еще один пример рендеринга 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 rendering 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({ rendering: 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 r = $("#Data_Table").jqxDataTable( "rendering" ); if (r != null) { $("#log").text("Rendering!"); } else { $("#log").text(r); } }); }); </ script > </ body > </ html > |
Выход:
Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm