Метод jQWidgets jqxDataTable hideDetails()

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

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

Метод hideDetails() используется для скрытия сведений о строке из отображаемой таблицы jqxDataTable. Он возвращает Нет.

Синтаксис:

$("#Selector").jqxDataTable("hideDetails", rowIndex);

Параметры:

rowIndex: это указанный индекс строки, который имеет числовой тип.

Связанные файлы: Загрузите 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 hideDetails() в 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
            hideDetails() Method
        </h3>
  
        <div id="jqxdt"></div>
        <br>
        <input type="button" style="margin:29px;" 
            id="jqxbtn" value="Click here" />
        <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",
                    },
                ],
            });
            $("#jqxbtn").jqxButton({
                width: 280
            });
            $("#jqxdt").jqxDataTable("showDetails", 0);
            $("#jqxbtn").on("click", function () {
                $("#jqxdt").jqxDataTable("hideDetails", 0);
                $("#log").text("Details hidden!");
            });
        });
    </script>
</body>
  
</html>

Выход:

Пример 2: Ниже приведен еще один пример метода jqxDataTable hideDetails() в 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
            hideDetails() Method
        </h3>
  
        <div id="jqxdt"></div>
        <br>
        <input type="button" style="margin:29px;" 
               id="jqxbtn" value="Click here" />
        <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]);
               
            

                    
                                            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


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2025. Все права защищены.