Событие jQWidgets jqxDataTable cellEndEdit

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

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

Событие cellEndEdit активируется всякий раз, когда пользователь завершает редактирование ячейки, где необходимо установить свойство editSettings , а также его подсвойство, для editSingleCell должно быть установлено значение «true».

Синтаксис:

$("Selector").on("cellEndEdit", function (event) {
      // Code
});

Связанные файлы: Загрузите 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 cellEndEdit в 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 cellEndEdit event
        </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>
  
        <br>
        <div id="log"></div>
    </center>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Data_Table").jqxDataTable({
                editable: true,
                editSettings: {
                    editSingleCell: true,
                    editOnDoubleClick: true,
                    saveOnEnter: true,
                },
                columns: [{
                    text: "Employee_Name",
                    dataField: "Employee_Name",
                    width: 190
                }, {
                    text: "Company",
                    dataField: "Company",
                    width: 160
                }, {
                    text: "Designation",
                    dataField: "Designation",
                    width: 190
                }]
            });
            $("#Data_Table").on("cellEndEdit", function (event) {
                $("#log").html("Cell editing ended!");
            });
        });
    </script>
</body>
  
</html>

Выход:

Пример 2: Ниже приведен еще один пример события jqxDataTable cellEndEdit в 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 cellEndEdit event
        </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>
  
        <br>
        <div id="log"></div>
    </center>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Data_Table").jqxDataTable({
                editable: true,
                editSettings: {
                    editSingleCell: true,
                    editOnDoubleClick: true,
                    saveOnEnter: true,
                },
                columns: [{
                    text: "Employee_Name",
                    dataField: "Employee_Name",
                    width: 190
                }, {
                    text: "Company",
                    dataField: "Company",
                    width: 160
                }, {
                    text: "Designation",
                    dataField: "Designation",
                    width: 190
                }]
            });
            $("#Data_Table").on("cellEndEdit", function (event) {
                var args = event.args;
                var i = args.index;
                if (i === null) {
                    $("#log").text("Null!");
                }
                else {
                    $("#log").text("Editing ended!");
                }
  
            });
        });
    </script>
</body>
  
</html>

Выход:

Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm