阿里云新用户优惠

三十五、Column Moving列移动

· 120 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：Tutorial: 217 Column Moving

ui.grid.moveColumns允许将列移动到其他位置。 要启用，必须引入ui.grid.moveColumns模块，并在grid元素上包含ui-grid-move-columns指令。 api文档中提供了moveColumns特性的文档，特别是：

  • columnDef
  • gridOptions
  • publicApi

默认情况下，启用后所有列均可移动，可以通过参数gridColumnMoving来禁用全部列的移动。也可在columnDefs中设置参数enableColumnMoving来针对某个列设置是否移动。

可以通过拖放将列放到特定位置来调整列。或者，使用gridApi方法gridApi.colMovable.moveColumn（oldPosition，newPosition）也可用于移动列。 列位置范围从0（最左边）到表格中的可见列数（最右边）。

为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件：

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.move-columns.min.js"></script>
  • index.html
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl as $ctrl">
    <div class="grid" ui-grid="$ctrl.gridOptions" ui-grid-move-columns></div>
    </div>
  </body>
</html>
  • main.css
.grid {
  width: 100%;
  height: 400px;
}
  • app.js
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.moveColumns']);
app.controller('MainCtrl', function ($scope, $http) {
  var vm = this;

  vm.gridOptions = {
    columnDefs: [
      { name: 'id'},
      { name: 'name'},
      { name: 'age'},
      { name: 'gender'},
      { name: 'email'},
    ]
  };

  $http.get('http://ui-grid.info/data/500_complex.json')
    .then(function(response) {
      vm.gridOptions.data = response.data;
    });
});

关注微信公众号，与我交流吧~

分享