Событие jQWidgets jqxPivotGrid pivotitemmousedown

Опубликовано: 15 Августа, 2022

jQWidgets — это среда JavaScript для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxPivotGrid — это мощный и легкий виджет визуализации данных, полностью написанный на языке JavaScript. Этот виджет предлагает множество расширенных функций и легко настраивается для различных нужд.

Событие pivotitemmousedown запускается, когда происходит наведение курсора мыши на элемент сводной сетки.

Синтаксис:

$("#jqx_Pivot_Grid").on("pivotitemmousedown", function () {
    $("#log").html("Mousedown over a pivot grid item occured");
});

Связанные файлы: Загрузите 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/jqxsortable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpivot.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpivotgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Пример. Пример ниже иллюстрирует событие jQWidgets jqxPivotGrid pivotitemmousedown .

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/jqxmenu.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxpivot.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxpivotgrid.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqx-all.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxPivotGrid pivotitemmousedown Event
        </h3>
        <div id="jqx_Pivot_Grid" style="height: 160px; 
                                        width: 270px;">
        </div>
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = new Array();
                var i = 0;
                while (i <= 2) {
                    var Column = ["Company"];
                    var Domain = ["Progamming",
                        "CS subjects",
                        "GATE preparation"];
                    var Rank = ["Ranking"];
                    var row = {};
                    row["Domain"] = Domain[i];
                    row["Column"] = "Company";
                    row["Rank"] = "Domain";
                    data.push(row);
                    i++;
                }
                var dataAdapter = new $.jqx.dataAdapter({
                    localdata: data,
                    datafields:
                        [
                            { name: "Rank", type: "string" },
                            { name: "Domain", type: "string" },
                            { name: "Column", type: "string" },
                        ]
                });
                var pivotDataSource = new $.jqx.pivot(
                    dataAdapter,
                    {
                        values: [
                            { text: "GeeksforGeeks" }
                        ],
                        columns: [{ dataField: "Column" }],
                        rows: [{ dataField: "Rank" },
                        { dataField: "Domain" }],
                    }
                );
                $("#jqx_Pivot_Grid").jqxPivotGrid({
                    source: pivotDataSource
                });
                $("#jqx_Pivot_Grid").on("pivotitemmousedown", 
                                        function () {
                    $("#log").html("Mousedown over a "
                        + "pivot grid item has occured");
                });
            });
        </script>
    </center>
</body>
  
</html>

Выход:

Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxpivotgrid/jquery-pivotgrid-api.htm?search=

JQuery

Событие jQWidgets jqxPivotGrid pivotitemmousedown

HTML

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