Angular ui-grid 2.0 与 3.0 版本区别
来源:互联网 发布:linux 查看总cpu使用率 编辑:程序博客网 时间:2024/06/12 21:47
这两天用到了Angular的ui-grid插件。网上能搜到的教程基本上是基于2.0版本的,现把3.0版本的不同点列出来,以免入坑。
Upgrading from 2.x to 3.0
ui-grid 3.0 is a substantial upgrade from ng-grid 2.x, with the majority of the code base having been rewritten. Where possible the configuration is backward compatible, but some concepts have changed in ways that require code change to integrate.
This tutorial covers the key elements that may require adjusting in your application.
Module Name
Previously you included the grid within your application using:
- angular.module( 'yourApplication', [
- 'ngGrid'
- ]);
You now include ui.grid instead, and may optionally also include the modules for features that you choose to enable:
- angular.module( 'yourApplication', [
- 'ui.grid',
- 'ui.grid.edit'
- ]);
Grid Directive
Similarly, the directive name has changed, and you may choose to include additional features within your grid.
Previously you had:
- <div class="gridStyle" ng-grid="gridOptions"></div>
You now include multiple directives for each of the features you wish to use:
- <div class="gridStyle" ui-grid="gridOptions" ui-grid-edit></div>
Update columnDefs
All columns must have a name or a field. If you have columns that have neither you need to define one. Name will be derived from field if not present.
- $scope.gridOptions = {
- columnDefs: [
- {field: 'id', displayName: 'Id'},
- {field: 'name', displayName: 'Name'},
- {displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" >Edit</button> '}
- ]
- };
Becomes:
- $scope.gridOptions = {
- columnDefs: [
- {field: 'id', displayName: 'Id'},
- {field: 'name', displayName: 'Name'},
- {name: 'edit', displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="edit(row.entity)" >Edit</button> '}
- ]
- };
String values are no longer supported for columns defs:
- $scope.myColDefs = {[...]};
- $scope.gridOptions.columnDefs = 'myColDefs'
or
- $scope.gridOptions.columnDefs = $scope.myColDefs = [...];
- $scope.gridOptions.columnDefs = [...];
Accessing cell values
In 2.x you would use row.getProperty(col.field)
within a cellTemplate to get the value of a cell. In 3.0 this has changed to grid.getCellValue(row, col)
.
Grid now uses isolate scope
The grid now uses an isolate scope, meaning that the scope on your controller is not directly accessible to widgets that you include in the grid. You can get the parent scope used by the ui-grid element in any template with the grid.appScope property.
- $scope.gridOptions = {
- columnDefs: [
- {field: 'id', displayName: 'Id'},
- {field: 'name', displayName: 'Name'},
- {name: 'edit', displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="edit(row.entity)" >Edit</button> '}
- ]
- };
becomes:
- $scope.gridOptions = {
- columnDefs: [
- {field: 'id', displayName: 'Id'},
- {field: 'name', displayName: 'Name'},
- {name: 'edit', displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="grid.appScope.edit(row.entity)" >Edit</button> '}
- ]
- };
Separate features
Many elements included by default in ng-grid have now been shifted into separate features, allowing the core ng-grid to be kept smaller and faster. Features are enabled only when included, inclusion of a feature requires both including the module in your application and adding the feature directive onto the grid definition.
Features include:
- column resizing
- selection
- cell navigation and selection of individual cells
- editing in place
For example, to include the selection feature, you would include the module:
- angular.module( 'yourApplication', [
- 'ui.grid',
- 'ui.grid.selection'
- ]);
and include the relevant directive on the grid that you wish to have access to the feature:
- <div class="gridStyle" ui-grid="gridOptions" ui-grid-edit ui-grid-selection></div>
Filtering and Sorting
The filtering api changes substantially, as filters are now per-column rather than for the grid as a whole. Refer the filtering documentation, the key change is that filters are now stored on the individual columns rather than as a single filterOptions element.
Sorting behaviour changes somewhat, and again sort options are moved onto the individual columns, along with provision of a "priority" element within the sortOptions.
- Angular ui-grid 2.0 与 3.0 版本区别
- angular-ui-grid IE8版本简介
- angular ui-grid行单选
- angular ui-grid 中文设置
- angular ui-grid之过滤器设置
- angular ui-grid 表格插件配置项
- Angular学习-ng-route与ui-router路由的区别
- angular grid
- angular单元测试与自动化UI测试实践
- angular 1与angular2区别
- vue与angular的区别
- AngularJS与Angular的区别
- AngularJS与Angular的区别
- Angular与React的区别
- vue与angular的区别
- AngularJS与Angular的区别
- angular-ui-grid merge cells in column(合并列上的单元格)
- Angular路由 ng-route和ui-router的区别
- MySQL数据库迁移(直接复制文件)
- POI 读写Excel
- cocos studio 将界面生成json 文件
- Python获取本机外网IP
- python循环遍历文件操作
- Angular ui-grid 2.0 与 3.0 版本区别
- ArcMap常用工具
- CSS3 HTML5动画
- searchBar背景框的取消
- js继承原理
- 火狐Firefox浏览器安装Selenium_IDE的步骤以及其使用规则
- Lua的局部变量
- 交互设计师学习之路:第一天 色彩学习
- pat(A) 1061. Dating&&pat(B)1014. 福尔摩斯的约会