标签: ng-grid

如何使用ng-grid中的分组设置聚合

我希望看到网格中每个组的总计(或通常是任何聚合函数).

这是请求和关闭,如问题所述:https://github.com/angular-ui/ng-grid/issues/95(但遗憾的是没有任何示例).

我可以通过配置选项重新定义默认模板https://github.com/angular-ui/ng-grid/blob/master/src/templates/aggregateTemplate.htmlaggregateTemplate.但我不知道如何正确扩展它.

此模板正在ng-grid范围内进行评估,我不知道如何触发我的自定义聚合函数.我想创建类似'''totalChildren'''的功能(来自https://github.com/angular-ui/ng-grid/blob/master/src/classes/aggregate.js)

有任何想法吗?

angularjs angular-ui ng-grid

7
推荐指数
1
解决办法
2万
查看次数

ng-grid headerRowTemplate - 有没有人用过这个?

我的团队想要使用ng-grid的这个功能.但是它似乎没有在任何地方记录.我们想要做的是在ng-grid的标题区域的最后一列放置一个"加号"图标.

有没有人找到一个很好的方法来做到这一点?

angularjs ng-grid

7
推荐指数
1
解决办法
1万
查看次数

如何在ng-grid中制作复选框单元格编辑模板?

我是ng-grid的新手.我正在学习带有编辑模板选项的ng-grid.我创建了带有编辑复选框选项的网格.但我不知道如何在编辑复选框后获得该网格中的值?谢谢.

在这里 JSfiddle.

var myapp = angular.module('myapp', ["ui", "ngGrid"]);

myapp.controller('myctrl', function($scope, $http) {

    $scope.testInfo= "TestInfo";

  $scope.data = {
    persons: [],
    selected:[],
    load: function () {
      $http.get("/echo/json/").success(function(data) {
      $scope.data.persons = [
          {id:1, name:"Max", number:51323.512,value:'on'},
            {id:2, name:"Adam", number:7245.2,value:'on'},
            {id:3, name:"Betty", number:828,value:'off'},
            {id:4, name:"Sara", number:23452.45182,value:'on'}
          ];

        $scope.data.selected[0] = $scope.data.persons[0];

      });
    }
  };

   var cellTemplate = "<div ng-class=\"'ngCellText colt' + $index\">"
                    + " <span ng-cell-text>{{COL_FIELD}}</span>"
                    + "</div>";
    var cellEditTemplate = '<input type="checkbox" ng-checked="row.entity.value==\'on\'" ng-input="COL_FIELD" /></div>';

  $scope.grid = {
    options: {
      data: "data.persons",
      selectedItems: …
Run Code Online (Sandbox Code Playgroud)

angularjs ng-grid

7
推荐指数
1
解决办法
9178
查看次数

将类添加到ng-grid行

我正在使用ng-grid来显示正在上传的文件集合(每个文件都有自己的行).

如果一个/任何文件无法上传,我想修改该行并在其上放置一个类以显示它无法上传.

我如何将一个类添加到整行?

javascript angularjs ng-grid

7
推荐指数
1
解决办法
1万
查看次数

使用ng-grid的列菜单的z-index问题

当我在同一页面上放置两个ng-grid并打开第一个网格的colum菜单时,第二个网格的标题将重叠,如此屏幕截图所示:

ng-grid截图

我已经尝试将z-index列菜单设置为非常高的值,但它没有任何效果.我尝试了其他几种方法,但我显然遗漏了一些东西.有什么建议?Plunker展示了这里的行为:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

html5 z-index css3 angularjs ng-grid

7
推荐指数
1
解决办法
2269
查看次数

是否可以使ng-grid响应?

我正在使用Angular.js的'ng-grid'数据网格,并试图使其行为响应.当我调整屏幕大小时,我更喜欢网格列自动堆叠,而不是保持网格固定宽度.

我发现一些链接提到了一个已经废弃的东西ngGridLayoutPlugin,这些都导致了GitHub的死胡同.我也看过其他网格,angular-deckgrid但我对改变网格不感兴趣.

反正有ng-grid反应吗?

angularjs ng-grid

7
推荐指数
1
解决办法
1万
查看次数

angularjs中$ cookiestore和$ cookies之间的差异

angularjs $cookiestore和之间有什么区别$cookies.

我看到了angularjs这份文件.

$ cookiestore和$ cookies正在做同样的想法,但唯一的区别是

$ cookiestore - 可以通过angular的toJson/fromJson自动序列化序列化从此存储中放入或检索的对象.但 $ cookies - 无法执行此操作

唯一的区别是什么?或其他什么?

javascript angularjs ng-grid angular-ui-grid

7
推荐指数
1
解决办法
4251
查看次数

在ng-grid列cellTemplate中使用行值

我正在尝试添加一个链接到另一个页面的列(是一个ng-grid表).该链接包含该行的一个值

我试过这样的事情:

$scope.columns = [
  {field:'id', displayName:'#'},
  {field:'name', displayName:'Name'},
  {field:'view', displayName:'Action', cellTemplate: '<a href="http://foo.com/person/' +  {row.getProperty(col.id)} + '">[View Details]</a>'}
];
Run Code Online (Sandbox Code Playgroud)

但是没有工作,有什么想法吗?

angularjs ng-grid

6
推荐指数
1
解决办法
1万
查看次数

角度ui-grid/ng-grid filter更换频繁

我正在尝试使用服务器端排序,服务器端分页和服务器端过滤来实现角度网格.使用ui-grid(不稳定),我添加了ui.grid.paging并使所有内容都运行起来.非常好,对开发人员的称赞.

但是.... $ scope.gridApi.core.on.filterChanged正在为每个按下的键触发,因此当我在givenname列中搜索"Patrick"时,会触发七个事件并且七个get-requests命中我的服务器.更糟糕的是,因为它是一个很大的集合,我正在过滤,这个操作相当昂贵,结果我甚至相互超越,就像最特定的过滤器获得最快的结果,在处理不太具体的结果之前触发成功.

我想放慢速度,比如"进入后停火".我是javascript和REST的新手,这是我的第一个真实世界项目.我真的很感激如何处理这个问题的任何想法.这感觉就像一个常见的场景,因此可能会有一些我缺少的标准解决方案或最佳实践.

你的,帕特里克.

angularjs ng-grid angular-ui-grid

6
推荐指数
2
解决办法
5970
查看次数

ngGrid 2.0.14行选择不适用于新版Google Chrome和ngAnimate

几天前(2015年5月),谷歌Chrome发布了新版本(43.0.2357.65米).
使用此新版本,ng-grid功能已停止工作:

症状:
单击某行时,该行不会突出显示

运行一些测试后,我设法从零重现问题:

  1. 创建一个需要ng-grid 2.0.14和ngAnimate的角度应用程序.
  2. 使用旧的Google Chrome版本,该行正确突出显示.
    使用新版Google Chrome,该行不会突出显示(尽管已选中)

我创造了两个掠夺者:

Plunkr 1:没有ngAnimate的应用程序
http://plnkr.co/edit/2pSBX9K0QaeaSihMKnGG?p=preview
选择行时,无论Chrome版本如何,行都会突出显示

Plunkr 2:应用程序使用ngAnimate
http://plnkr.co/edit/hyRO4fTwglSCL8KCTgHA?p=preview
选择行时,该行会在旧的Chrome版本中突出显示,但在新的Chrome版本中,这不起作用!

此外,如果您在选择一行后使用Chrome Inspector检查Plunkr 2,您可以看到该行确实获得了该类.ngRow.selected(此类通过更改其背景颜色突出显示该行)但Chrome是一个无法直观表示该行的人改变(此类收购)

我怎么解决这个问题?任何线索?



编辑:
我创建了第三个plunkr:http://plnkr.co/edit/cWMlKEz39n8K52VWH9q8?p = preview


这是第二个plunkr的一个分支,我已经为每个没有该类的项目禁用了动画"angular-animate",即:

app1.config(['$animateProvider', function($animateProvider){
   $animateProvider.classNameFilter(/angular-animate/);
}]);
Run Code Online (Sandbox Code Playgroud)

这有效(现在选择后会突出显示行),但如果您在应用中使用动画,这将主要打破其他所有动画!比如bootstrap-ui模态.所以,这不是一个解决方案,而是一个想法:我只需要禁用ng-grid的动画.我如何实现这一目标?

classNameFilter(x)仅为包含其中类的项目启用动画x.是否有类似功能禁用某些项目的动画?

google-chrome angularjs ng-grid

6
推荐指数
1
解决办法
597
查看次数