文档章节

Angularjs ng-grid 升级到 UI-Grid

whitelover
 whitelover
发布于 2016/05/03 10:28
字数 1129
阅读 4627
收藏 4

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.

从ng-grid 2.x 到ui-grid 3.0是一个重大升级。大部分的代码被重构,配置可能会向后面的版本兼容,一些思想方式已经改变, 需要对集成代码进行修改。

This tutorial covers the key elements that may require adjusting in your application.

本教程涵盖了在应用程序中可能需要调整的关键元素。

Module Name  module名称ngGrid 改为 ui.grid

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:

 你现在用ui.grid 代替,可以选择包含要启用的模块功能,如下添加了 ui.grid.edit 模块:

angular.module( 'yourApplication', [
  'ui.grid',
  'ui.grid.edit'
]);

Grid Directive   grid 指令修改

Similarly, the directive name has changed, and you may choose to include additional features within your grid.

同样,指令的名称也改变了,你可以选择包含grid 的其它功能,如ui-grid-edit;

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  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

所有的列必须有name或者field属性,(name或field属性不能为空)。如果列没有定义这两个其中一个属性,那么name 属性将不能得到;

$scope.gridOptions = {
    columnDefs: [
      {field: 'id', displayName: 'Id'},
      {field: 'name', displayName: 'Name'},
      {displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" >Edit</button> '}
    ]    
  };

String values are no longer supported for columns defs:

字符串值不在支持列定义:

$scope.myColDefs = {[...]};
$scope.gridOptions.columnDefs = 'myColDefs'
$scope.gridOptions.columnDefs = $scope.myColDefs = [...];

  or

$scope.gridOptions.columnDefs = [...];

Accessing cell values  获取cell 值方式修改

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).

在2.x 版本中使用cellTmmplate 中使用row.getProperty(col.field) 获取一个cell 值。在3.0版本变成了

grid.getCellValue(row,col)。 

Grid now uses isolate scope   grid 现在将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.

grid 现在将grid 作用域隔离,这意味着控制器中不能直接访问grid 中的属性。可以在template 中使用ui-grid 的父作用域grid.appScope

ng-grid 用法如下:

$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:

ui-grid 用法改变后如下:

$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.

许多ng-grid 以前默认的功能,现在都已经变成了独立的插件,保留了ng-grid 的核心功能,使grid 更小运行更快。要启用这些插件功能时,需要在js 中引入这些模块和在html 中添加这些指令。

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:

例如,包含selection 插件,需要引入ui.grid.selection 模块:

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:

并且在html 中加入要用到的指令 ui-grid-selection:

<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.

过滤api 同样也有大的改变,过滤器是过滤grid 的每一列而不是过滤整个grid。参考过滤文档,关键变化是现在是每个列都有一个过滤器,而可不是以前一个gird只有一个filterOptions 元素;

Sorting behaviour changes somewhat, and again sort options are moved onto the individual columns, along with provision of a "priority" element within the sortOptions.

排序也有变化,排序移动到了列选项中,并提供一个排序优先级 sortOptions 元素。

© 著作权归作者所有

上一篇: ui-grid 使用讲解
下一篇: zabbix 监控mongodb
whitelover
粉丝 13
博文 26
码字总数 10236
作品 0
私信 提问
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
54
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0
谷歌提出渐进式 web 开发概念,Angular Ignite UI 实现

所有的企业开发团队肯定都愿意花更少的钱办更多的事,Angular和渐进式web应用程序让这一切成为可能。 在过去一年,Angular在web开发者社区取得了巨大增长。该框架正在成为面向公众的从微软到...

周其
2017/11/22
4K
15
2017-05-17日志

1.放弃使用jqGrid,使用angular-ui-grid 2.angular-ui-grid在某些情况下不能自适应伸缩(https://github.com/angular-ui/ui-grid/issues/3590) 3.与中源具体商议首次下单减免5元的详情...

test2013
2017/05/17
4
0
推荐 15 个 Angular.js 应用扩展指令

几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性。官方新闻发布稿覆盖了绝大部分,这同样值得放于官方...

oschina
2015/06/04
9.8K
16

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部