二十三、UI-Grid 调整列大小

最新推荐文章于 2024-10-03 20:16:40 发布

西柚叨叨

最新推荐文章于 2024-10-03 20:16:40 发布

阅读量6.5k

点赞数 1

分类专栏： angularjs ui-grid中文api 文章标签： angularjs ui-grid ui-grid中文 ui-grid中文版

原文链接：https://xiyoudaodao.gitee.io/ui-grid/ui-grid-column-resizing/

版权

angularjs ui-grid中文api 专栏收录该内容

35 篇文章 11 订阅

订阅专栏

原文：204 Column Resizing

“调整列大小” 功能允许调整每个列的大小。

要启用, 必须包含 “ui.grid.resizeColumns” 模块, 并且必须在表格元素上包括 ui-grid-resize-columns 的指令。

“调整列大小” 功能的文档在 api 文档中提供, 特别是:

可以将单独的列设置为not resizeable，如果这样做, 建议将这些列设置固定的像素宽度，否则, 如果其他列的大小减小，则可能会自动调整大小以填满剩余空间，并且不会再减小其宽度。

当调整列的大小时其他具有固定宽度或已调整大小的列会保留其宽度。所有其他列都调整大小以占用剩余空间。只要左边列有一个可变列, 表格的列将不会减少到整个表格宽度以内，但一旦调整了所有列的大小, 最终就可以得到小于表格宽度的总列宽。

angular.module('yourApp', ['ui.grid', 'ui.grid.resizeColumns']);

<div ui-grid="gridOptions" class="grid" ui-grid-resize-columns></div>

如果出于某种原因, 希望使用 ui-grid-resize-columns的指令, 但不允许进行列调整, 则可以显式将该选项设置为 false。这可以防止表格调整大小, 而不需要在 colDef 选项中单独设置。

$scope.gridOptions = {
  enableColumnResizing: false
};

通过将 enableColumnResizing 属性设置为 false, 可以在列定义中禁用它。

$scope.gridOptions = {
  enableColumnResizing: true,
  columnDefs: [
    { field: 'name' },
    { field: 'gender', enableColumnResizing: false },
    { field: 'company' }
  ]
};

代码
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <strong>Drag</strong> a the column separator to resize; <strong>double-click</strong> to size according to rendered column contents.
      <br>
      <br>
      The column will obey any <i>minWidth</i> or <i>maxWidth</i> constraints you give it.
      <br>
      <br>
      <div ui-grid="gridOptions" class="grid" ui-grid-resize-columns ui-grid-move-columns></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns']);
 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', minWidth: 200, width: 250, enableColumnResizing: false },
      { field: 'gender', width: '30%', maxWidth: 200, minWidth: 70 },
      { field: 'company', width: '20%' }
    ]
  };
 
  $http.get('/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

Demo
列服从设置中的 minWidth 或 maxWidth 约束。
这里写图片描述