三十五、Column Moving列移动

原文: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>

Example

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: 400;
}

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

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注