📌  相关文章
📜  jQWidgets jqxGrid columnreordered 事件(1)

📅  最后修改于: 2023-12-03 15:02:18.961000             🧑  作者: Mango

jQWidgets jqxGrid columnreordered 事件介绍

jQWidgets jqxGrid 是一个高性能、响应快速、易于使用的 jQuery 数据表格插件。它提供了丰富的 API 和事件来使开发者能够轻松实现功能丰富的数据表格。

其中，columnreordered 事件是当列被重新排序时触发的事件。本文将为大家介绍该事件的使用方法和示例。

使用方法

该事件绑定在 jqxGrid 控件的实例上，当列被重新排序时，会触发该事件。该事件的回调函数接受两个参数，分别是原始列的索引和新的列的索引。

$('#jqxgrid').on('columnreordered', function (event) {
  var args = event.args;
  var oldIndex = args.oldindex;
  var newIndex = args.newindex;
  console.log('Column reordered from ' + oldIndex + ' to ' + newIndex);
});
示例

下面将为大家演示一个通过拖拽表头来重新排序列的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jqxGrid Column Reordered Event</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/styles/jqx.base.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxdata.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxbuttons.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxscrollbar.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxmenu.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxgrid.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets@9.1.5/dist/jqwidgets/jqxgrid.columnsreorder.js"></script>

  <style>
    #jqxgrid {
      margin: 10px;
    }
    .jqx-grid-columns-reorder-button {
      margin-right: 5px;
    }
  </style>

  <script>
    $(document).ready(function() {
      // prepare the data
      var data = Generatedata(200);

      // initialize jqxGrid
      $("#jqxgrid").jqxGrid({
        width: 800,
        height: 400,
        source: data,
        columnsreorder: true,
        columns: [
          { text: 'First Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Price', datafield: 'price', width: 90, cellsformat: 'c2', cellsalign: 'right' }
        ]
      });

      // bind the columnreordered event
      $('#jqxgrid').on('columnreordered', function (event) {
        var args = event.args;
        var oldIndex = args.oldindex;
        var newIndex = args.newindex;
        console.log('Column reordered from ' + oldIndex + ' to ' + newIndex);
      });
    });

    // generate sample data
    function Generatedata(rowscount) {
      var data = [];

      for (var i = 0; i < rowscount; i++) {
        var firstname = Math.floor(Math.random() * 26) + 65;
        var lastname = Math.floor(Math.random() * 26) + 65;
        var productname = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'][Math.floor(Math.random() * 5)];
        var price = Math.floor(Math.random() * 10000);
        var quantity = Math.floor(Math.random() * 9) + 1;

        var row = {
          firstname: String.fromCharCode(firstname) + '.',
          lastname: String.fromCharCode(lastname) + '.',
          productname: productname,
          price: price,
          quantity: quantity
        };

        data[i] = row;
      }
      return data;
    }
  </script>
</head>
<body>
  <div id="jqxgrid"></div>
</body>
</html>

在这个示例中，我们通过 columnsreorder: true 来开启列重新排序的功能，然后在 #jqxgrid 控件上绑定了 columnreordered 事件的回调函数，该函数会在列被重新排序时打印相关信息到控制台。在 Generatedata() 函数里生成了一些随机数据用于填充我们的表格。

总结

通过本文的介绍，我们了解到了 jQWidgets jqxGrid 的 columnreordered 事件的使用方法，并演示了一个通过拖拽表头来重新排序列的示例。该事件的使用可以帮助我们实现更丰富的数据表格功能。