Thay đổi tên tiêu đề một cách linh hoạt trong lưới JQwidgets JQX


Ngô Đăng Khôi
4 năm trước
Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 9293

Trong bài đăng này, chúng ta sẽ thấy làm thế nào chúng ta có thể thay đổi tên tiêu đề một cách linh hoạt trong lưới JQX JQX. Gần đây tôi đã gặp một tình huống thay đổi văn bản cột tiêu đề của lưới nên được thay đổi linh hoạt, khi người dùng thay đổi nội dung hộp văn bản. Vì vậy, tôi đã thực hiện yêu cầu này bằng cách sử dụng một số chức năng được xây dựng của lưới jQWidget JQX. Ở đây tôi sẽ chia sẻ với bạn rằng. Tôi hy vọng bạn sẽ thích nó.

Để tải lưới từ JSON, bạn có thể làm theo các bước như được thảo luận trong bài viết này: Tải lưới JQWidget JQX từ JSON

Lý lịch

Nếu bạn chưa quen với JQX Grid JQX, vui lòng tìm hiểu tại đây: http://sibeeshpassion.com/c Ab / jqwidgets /

Sử dụng mã

Tôi hy vọng bạn đã thực hiện lưới của bạn như trong bài viết đó. Bây giờ tôi đoán trang của bạn sẽ trông như thế này:


<!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>

Bây giờ hãy để chúng tôi đảm bảo rằng lưới đang hoạt động tốt. Hãy chạy dự án của bạn.

Mát mẻ, vì vậy lưới được tải. Bây giờ cần thêm một điều khiển chọn trong đó chúng ta sẽ tải tên tiêu đề lưới để người dùng có thể chọn tiêu đề nào phải thay đổi và hộp văn bản nơi người dùng có thể nhập văn bản cần thay đổi cho tiêu đề đã chọn. Như vậy có được không?

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

Điều tiếp theo là chúng ta cần thêm các tùy chọn vào điều khiển chọn. Đúng? Chúng ta có thể lấy các thuộc tính cột của lưới JQX là $ (Nhật ký # jqxgrid). JqxGrid ('cột'). Bây giờ chúng ta sẽ tạo một hàm sẵn sàng trong cài đặt lưới và nối các giá trị. Sau đây là mã cho rằng:

 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);
                      }

Tiếp theo là gì? Vâng, chúng ta cần phải kích hoạt sự kiện thay đổi hộp văn bản.

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

Bạn có thể thấy rằng văn bản cột tiêu đề đã được thay đổi từ 'Mã vùng' thành 'Mã vùng mới'.

Trong sự kiện thay đổi hộp văn bản, chúng tôi đã viết mã để thay đổi thuộc tính văn bản cột tiêu đề.

Ở đây chúng tôi đang sử dụng phương thức setcolumnproperty đã có sẵn trong thư viện JQWidget.

Bây giờ là lúc để xem làm thế nào nó hoạt động.

Đó là tất cả những gì chúng tôi đã làm nó.

Mã hoàn chỉnh


<!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>

Phần kết luận

Tôi đã bỏ lỡ bất cứ điều gì mà bạn có thể nghĩ là cần thiết? Bạn đã bao giờ muốn làm yêu cầu này? Bạn đã thử jQWidget chưa? Bạn có thể tìm thấy bài viết này là hữu ích? Tôi hy vọng bạn thích bài viết này. Hãy chia sẻ cho tôi những gợi ý và phản hồi có giá trị của bạn.

Lượt của bạn. Bạn nghĩ sao?

Một blog không phải là một blog mà không có ý kiến, nhưng hãy cố gắng duy trì chủ đề. Nếu bạn có một câu hỏi không liên quan đến bài đăng này, tốt hơn hết bạn nên đăng nó trên C # Corner, Code Project, Stack Overflow, Asp.Net Forum thay vì bình luận ở đây. Tweet hoặc gửi email cho tôi một liên kết đến câu hỏi của bạn ở đó và tôi chắc chắn sẽ cố gắng giúp đỡ nếu tôi có thể.

Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 9293