二十三、UI-Grid 调整列大小
2017-04-17 11:56
337 查看
原文:204 Column Resizing
“调整列大小” 功能允许调整每个列的大小。
要启用, 必须包含 “ui.grid.resizeColumns” 模块, 并且必须在表格元素上包括 ui-grid-resize-columns 的指令。
“调整列大小” 功能的文档在 api 文档中提供, 特别是:
columnDef
gridOptions
publicApi
可以将单独的列设置为not resizeable,如果这样做, 建议将这些列设置固定的像素宽度,否则, 如果其他列的大小减小,则可能会自动调整大小以填满剩余空间,并且不会再减小其宽度。
当调整列的大小时 其他具有固定宽度或已调整大小的列会保留其宽度。所有其他列都调整大小以占用剩余空间。只要左边列有一个可变列, 表格的列将不会减少到整个表格宽度以内,但一旦调整了所有列的大小, 最终就可以得到小于表格宽度的总列宽。
如果出于某种原因, 希望使用 ui-grid-resize-columns的指令, 但不允许进行列调整, 则可以显式将该选项设置为 false。这可以防止表格调整大小, 而不需要在 colDef 选项中单独设置。
通过将 enableColumnResizing 属性设置为 false, 可以在列定义中禁用它。
代码
index.html
main.css
app.js
Demo
列服从设置中的 minWidth 或 maxWidth 约束。
水平有限,不当之处敬请指正。
“调整列大小” 功能允许调整每个列的大小。
要启用, 必须包含 “ui.grid.resizeColumns” 模块, 并且必须在表格元素上包括 ui-grid-resize-columns 的指令。
“调整列大小” 功能的文档在 api 文档中提供, 特别是:
columnDef
gridOptions
publicApi
可以将单独的列设置为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 约束。
水平有限,不当之处敬请指正。
相关文章推荐
- ui-grid应用(调整了表格行高)+指定列模糊查询+联动搜索
- jQuery Easy UI Resizable(调整大小)组件
- 【Unity&NGUI】PS裁剪UI把部分图片留着透明的部分&新建图集&调整NGUI的Sprite大小
- jQuery Gridly 一个jQuery插件,允许拖放,以及在grid上调整大小。
- jQuery Easy UI Resizable(调整大小)组件
- 如何调整UIPickerView,UISwitch等无法通过frame调整大小的大小
- 多个iframe自动调整大小的问题
- 调整eclipse或sts类存大小
- 八、UI-Grid 单页上的多个表格
- COM组件开发实践(七)---多线程ActiveX控件和自动调整ActiveX控件大小(上)
- 算法(第四版)学习笔记之java实现可以动态调整数组大小的栈
- Jquery根据浏览器窗口改变调整大小的方法
- wpf无边框窗体移动和大小调整
- kendo ui grid只需要更新按钮分页控件不需要
- 十四、UI-Grid HeaderCellClass
- 调整hadoop的守护进程大小
- iOS开发--根据文字动态调整按钮(UI…
- 敏捷开发一千零一问系列之二十三: UI设计怎么做到敏捷呢?(兼谈对UI热的理解)(下)
- linux调整home分区和root分区大小
- 第05章 自动旋转和自动调整大小