Статьи

Динамическое изменение имен заголовков в JQwidgets JQX Grid

Сентябрь 24, 2017

В этом посте мы увидим, как мы можем динамически изменять имена заголовков в сетке JQwidgets JQX. Недавно я столкнулся с ситуацией, когда нужно изменить текст столбцов заголовка сетки динамически, когда пользователь изменяет содержимое текстового поля. Поэтому я выполнил это требование, используя некоторые встроенные функциональные возможности сетки JQWidget JQX. Здесь я собираюсь поделиться с вами этим. Я надеюсь, вам понравится.

Чтобы загрузить сетку из JSON, вы можете выполнить шаги, описанные в этой статье: Загрузить JQWidget JQX Grid From JSON

Фон

Если вы новичок в JQWidget JQX Grid, узнайте здесь: http://sibeeshpassion.com/category/jqwidgets/

Использование кода

Я надеюсь, что вы реализовали свою сетку, как показано в этой статье. Теперь я думаю, что ваша страница будет выглядеть так:


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change Header Names Dynamically In JQwidgets JQX grid - Sibeesh Passion</title>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
    <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data =
            {
                datatype: "json",
                datafields: [{ "name": "AreaCode", "type": "string" }, { "name": "Revenue", "type": "number" }],
                //id: 'id',
                url: "jsonData.txt"
            };
            $("#jqxgrid").jqxGrid(
                  {
                      source: data,
                      columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d" }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
                      pageable: true,
                      filterable: true,
                      sortable: true
                  });
        });
    </script>
</head>
<body class='default'>
    <h2>Change Header Names Dynamically In JQwidgets JQX grid - Sibeesh Passion</h2>
    <div id="jqxgrid"></div>
</body>
</html>

Теперь давайте убедимся, что сетка работает нормально. Пожалуйста, запустите свой проект.

Название изображения

Круто, так что сетка загружена. Теперь нужно добавить элемент управления select, в который мы собираемся загрузить имена заголовков сетки, чтобы пользователь мог выбрать, какой заголовок должен быть изменен, и текстовое поле, где пользователь может ввести текст, который будет изменен для выбранного заголовка. Это нормально?

  <select id="selectOptions"></select>
    <input type="text" id="changeName" />

Следующее, что нам нужно, это добавить опции в элемент управления select. Правильно? Мы можем получить свойства столбца сетки JQX как $ («# jqxgrid»). JqxGrid («столбцы»). Records. Теперь мы создадим готовую функцию в настройках сетки и добавим значения. Ниже приведен код для этого:

 ready: function () {
                          var options = "<option value='0'>--Select Header--</option>";
                          var headerNames = $("#jqxgrid").jqxGrid('columns').records;
                          for (var i = 0; i < headerNames.length; i++) {
                              options += "<option value = '" + headerNames[i].datafield + "'>" + headerNames[i].text + " </option>";
                          }
                          $("#selectOptions").html(options);
                      }

Что дальше? Да, нам нужно запустить событие изменения текстового поля.

$("#changeName").change(function (e) {
                $("#jqxgrid").jqxGrid('setcolumnproperty', $('#selectOptions option:selected').val(), 'text', $('#changeName').val());
            });

Вы можете видеть, что текст заголовка столбца был изменен с «Код города» на «Новый код города».

В событии изменения текстового поля мы написали код для изменения свойства текста столбца заголовка.

Здесь мы используем метод setcolumnproperty, который уже доступен в библиотеке JQWidget.

Теперь пришло время посмотреть, как это работает.

Название изображения

Это все, что мы сделали.

Полный код


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change Header Names Dynamically In JQwidgets JQX grid - Sibeesh Passion</title>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
    <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data =
            {
                datatype: "json",
                datafields: [{ "name": "AreaCode", "type": "string" }, { "name": "Revenue", "type": "number" }],
                //id: 'id',
                url: "jsonData.txt"
            };
            $("#jqxgrid").jqxGrid(
                  {
                      source: data,
                      columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d" }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
                      pageable: true,
                      filterable: true,
                      sortable: true,
                      ready: function () {
                          var options = "<option value='0'>--Select Header--</option>";
                          var headerNames = $("#jqxgrid").jqxGrid('columns').records;
                          for (var i = 0; i < headerNames.length; i++) {
                              options += "<option value = '" + headerNames[i].datafield + "'>" + headerNames[i].text + " </option>";
                          }
                          $("#selectOptions").html(options);
                      }
                  });
            $("#changeName").change(function (e) {
                $("#jqxgrid").jqxGrid('setcolumnproperty', $('#selectOptions option:selected').val(), 'text', $('#changeName').val());
            });
        });
    </script>
</head>
<body class='default'>
    <h3>Change Header Names Dynamically In JQwidgets JQX grid - Sibeesh Passion</h3>
    <br />
    <div id="jqxgrid"></div>
    <br />
    <br />
    <select id="selectOptions"></select>
    <input type="text" id="changeName" />
</body>
</html>

Вывод

Я что-то упустил, что вы думаете, что нужно? Вы когда-нибудь хотели выполнить это требование? Вы уже пробовали jQWidget? Не могли бы вы найти этот пост полезным? Надеюсь, вам понравилась эта статья. Пожалуйста, поделитесь своими ценными предложениями и отзывами.

Твой ход. Что вы думаете?

Блог не блог без комментариев, но постарайтесь оставаться в теме. Если у вас есть вопрос, не связанный с этим постом, лучше оставить его на C # Corner, Code Project, Stack Overflow, форуме Asp.Net, а не комментировать здесь. Чирикать или написать мне ссылку на ваш вопрос там, и я обязательно постараюсь помочь, если смогу.

28
Share: