Событие jQWidgets jqxDataTable rowCollapse

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

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

Событие rowCollapse активируется всякий раз, когда строка отображаемой таблицы jqxDataTable сворачивается.

Синтаксис:

$("Selector").on("rowCollapse", 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 rowCollapse в 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-1.11.1.min.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 rowCollapse Event
        </h3>
  
        <div id="jqxdt"></div>
        <br>
        <div id="log"></div>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            var d = new Array();
            var subjectNames =
                ["C++", "Scala", "Java", "C", "R", "JavaScript"];
  
            var pageNumber =
                ["7", "8", "12", "11", "10", "19"];
  
            for (var j = 0; j < 6; j++) {
                var r = {};
                r["subjectnames"] =
                    subjectNames[Math.floor(Math.random() * subjectNames.length)];
  
                r["pagenumber"] =
                    pageNumber[Math.floor(Math.random() * pageNumber.length)];
                d[j] = r;
  
            }
            var src = {
                localdata: d,
                datatype: "array",
            };
            var ird = function (i, drow, e, rowinfo) {
                var td = null;
                var info = null;
                var note = null;
                rowinfo.detailsHeight = 100;
                e.append($(
                    "<div style="margin: 9px;">" +
                    "<ul style="margin-left: 29px;">" +
                    "<li class="title">T</li><li>Marks</li></ul>" +
                    "<div class="information"></div><div class="note"></div></div>"));
                td = $(e.children()[0]);
                if (td != null) {
                    info = td.find(".information");
                    note = td.find(".pagenumber");
                    var t = td.find(".title");
                    t.text(drow.subjectnames);
                    var c = $("<div style="margin: 6px;"></div>");
                    c.appendTo($(info));
                    var lc = $("<div style="float: left; width: 41%;"></div>");
                    var rc = $("<div style="float: left; width: 42%;"></div>");
                    c.append(lc);
                    c.append(rc);
                    var subjectnames = "<div style="margin: 10px;"><b>Subject:</b> "
                        + drow.subjectnames + "</div>";
                    $(lc).append(subjectnames);
                    var nc = $("<div style="white-space: normal; margin: 6px;"><span>"
                        + drow.pagenumber + "</span></div>");
                    $(note).append(nc);
  
                    $(td).jqxTabs({
                        theme: "energyblue",
                        width: 500,
                        height: 160
                    });
                }
            }
            var data_Adapter = new $.jqx.dataAdapter(src);
            $("#jqxdt").jqxDataTable({
                source: data_Adapter,
                height: 170,
                rowDetails: true,
                initRowDetails: ird,
                columns: [
                    {
                        text: "Subject Name",
                        datafield: "subjectnames",
                        width: "120px",
                    },
                    {
                        text: "Page No.",
                        datafield: "pagenumber",
                        width: "120px",
                    },
                ],
            });
            $("#jqxdt").jqxDataTable("showDetails", 0);
            $("#jqxdt").on("rowCollapse", function (event) {
                $("#log").text("Row collapsed!");
            });
        });
    </script>
</body>
</html>

Выход:
Пример 2. Ниже приведен еще один пример события jqxDataTable rowCollapse в 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-1.11.1.min.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 rowCollapse Event </h3>
  
        <div id="jqxdt"></div>
        <br>
        <div id="log"></div>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            var d = new Array();
            var subjectNames =
                ["C++", "Scala", "Java", "C", "R", "JavaScript"];
  
            var pageNumber =
                ["7", "8", "12", "11", "10", "19"];
  
            for (var j = 0; j < 6; j++) {
                var r = {};
                r["subjectnames"] =
                    subjectNames[Math.floor(Math.random() * subjectNames.length)];
  
                r["pagenumber"] =
                    pageNumber[Math.floor(Math.random() * pageNumber.length)];
                d[j] = r;
  
            }
            var src = {
                localdata: d,
                datatype: "array",
            };
            var ird = function (i, drow, e, rowinfo) {
                var td = null;
                var info = null;
                var note = null;
                rowinfo.detailsHeight = 100;
                e.append($(
                    "<div style="margin: 9px;">" +
                    "<ul style="margin-left: 29px;">" +
                    "<li class="title">T</li><li>Marks</li></ul>" +
                    "<div class="information"></div><div class="note"></div></div>"));
                td = $(e.children()[0]);
                if (td != null) {
                    info = td.find(".information");
                    note = td.find(".pagenumber");
                    var t = td.find(".title");
                    t.text(drow.subjectnames);
                    var c = $("<div style="margin: 6px;"></div>");
                    c.appendTo($(info));
                    var lc = $("<div style="float: left; width: 41%;"></div>");
                    var rc = $("<div style="float: left; width: 42%;"></div>");
                    c.append(lc);
                    c.append(rc);
                    var subjectnames = "<div style="margin: 10px;"><b>Subject:</b> "
                        + drow.subjectnames + "</div>";
                    $(lc).append(subjectnames);
                    var nc = $("<div style="white-space: normal; margin: 6px;"><span>"
                        + drow.pagenumber + "</span></div>");
                    $(note).append(nc);
  
                    $(td).jqxTabs({
                        theme: "energyblue",
                        width: 500,
                        height: 160
                    });
                
            

                            

                    
                                            JQuery
                                    

                        

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

                

                                            

                            
Как получить данные атрибутов пользовательских элементов в jQuery?

                            
20 Февраля, 2023

                        

                                            

                            
Объясните роль функции обратного вызова в AJAX.

                            
20 Февраля, 2023

                        

                                            

                            
Объясните технологии, используемые AJAX.

                            
20 Февраля, 2023

                        

                                            

                            
Метод jQuery undelegate()

                            
16 Февраля, 2023

                        

                                            

                            
jQuery метод остановки()

                            
16 Февраля, 2023

                        

                                            

                            
Метод jQuery slideUp()

                            
16 Февраля, 2023

                        

                                            

                            
Метод jQuery mousedown()

                            
16 Февраля, 2023

                        

                                            

                            
Метод jQuery mouseenter()

                            
16 Февраля, 2023