jQWidgets Свойство jqxDataTable exportSettings

Опубликовано: 31 Декабря, 2022

jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.

Свойство exportSettings используется для установки или возврата настроек экспорта данных, которые используются отображаемой таблицей jqxDataTable всякий раз, когда вызывается метод exportData. Это тип объекта, и его значение по умолчанию: { columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: «jqxDataTable»}.

Список используемых здесь параметров следующий:

columnsHeader: используется, чтобы определить, следует ли экспортировать заголовок столбца или нет.
hiddenColumns: используется, чтобы определить, нужно ли экспортировать скрытые столбцы или нет.
serverURL: используется для определения URL-адреса сервера.
characterSet: используется для определения кодировки.
recordsInView: используется для определения того, все ли записи должны быть экспортированы или фильтрация и сортировка также учитываются.
fileName: используется для определения имени файла.

Синтаксис:

Установите свойство exportSettings .

$("Selector").jqxDataTable({ 
    exportSettings: { hiddenColumns: true }
});

Возвратите свойство exportSettings .

var exportSettings = 
    $("Selector").jqxDataTable("exportSettings");

Связанные файлы: Загрузите 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 exportSettings в 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
            exportSettings 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({
                exportSettings: {
                    columnsHeader: true
                },
                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 es = $("#Data_Table")
                    .jqxDataTable("exportSettings");
                $("#log").text(es.columnsHeader);
            });
        });
    </script>
</body>
  
</html>

Выход:

Пример 2. Ниже приведен еще один пример свойства jqxDataTable exportSettings в 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
            exportSettings 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({
                exportSettings: {
                    hiddenColumns: 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 es = $("#Data_Table")
                    .jqxDataTable("exportSettings");
                if (es === null) {
                    $("#log").text("Null!");
                }
                else {
                    $("#log").text("Not null!");
                }
            });
        });
    </script>
</body>
  
</html>

JQuery

jQWidgets Свойство jqxDataTable exportSettings

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ