标签: ng-grid

Angular UI Grid - 如何自定义聚合行行为

分组时,ng-grid会创建与常规行不同的组行.特别是,组行不显示常规列,但显示由aggregateTemplate定义的单个合并行.我正在尝试做的是自定义组行以包括聚合列数据.例如:

列:
NAME | VALUE

数据:
name1 | 5
name1 | 5
name2 | 1

按NAME分组时显示的网格:
- name1 | 10(这是扩展的第一组行)
- name1 | 5(这些是实际的数据行)
- name1 | 5(这些是实际的数据行)
- name2 | 1(这是折叠的第二组行)

请注意,组行显示两列,其VALUE等于其子项的总和.
如果您熟悉ms excel数据透视表,那就是我正在尝试模拟的分组类型功能.

关于堆栈溢出的类似问题(如何使用ng-grid中的分组设置聚合)显示了如何进行子聚合计算的示例,但我仍然坚持如何让ng-grid像常规行一样显示输出有单独的列.看看ng-grid代码,它看起来不是一件容易的事.有人有这方面的经验吗?
谢谢!

aggregate angularjs ng-grid

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

AngularJS(ng-grid)"editableCellTemplate"在失去焦点时仍处于编辑模式

在最新版本的ng-grid(v2.0.7)中,当editableCellTemplate处于编辑模式并失去焦点时,它仍处于编辑模式.这是一个错误还是我错误地配置了网格?

下面是一个示例:http://plnkr.co/edit/OgEjk7wFaC982FrKbeHH?p = preview其中第0列包含editableCellTemplate.

angularjs ng-grid

8
推荐指数
1
解决办法
7744
查看次数

Angular-ui的工具提示无法在ng-grid中正确显示

我一直在寻找一些解决方案,用于在ng-grid上显示工具提示,但没有运气.当我在ng-grid上使用cellTemplate来自定义单元格以包含工具提示时,我遇到了各种各样的问题 - 工具提示要么没有显示出来,要么表现得很奇怪,如图所示:http://plnkr.co/edit/MFhwgOvSUFKcyJPse5wf .

我错过了什么吗?有没有人有一个在ng-grid中很好地显示工具提示的解决方案?

最好的祝福.

angularjs angular-ui-bootstrap ng-grid

8
推荐指数
2
解决办法
3万
查看次数

使用带有angularFire的ng-grid - 键命名问题

我现在已经玩过这个了,但是无法理解它:

(使用角度1.2.2,angularFire 0.5.0和最新的ng-grid)

所以我有一个firebase,我正在使用angularFire将我的数据提取到ng-grid组件中,如下所示:

//First I go get my data, in this case something called 'grades' from ..../db/grades
    var promise = angularFire(new Firebase($scope.fireBaseUrl), $scope, 'grades');
//When they're fetched I start up a watcher
    promise.then(function(grades) {
    startWatchGrade($scope, filterFilter, appSettings);
});

//Then I bind that grades as a datasource to my ng-grid
$scope.gridOptions = { 
data: 'grades',
enableCellSelection: false,
enableRowSelection: true,
etc....,
Run Code Online (Sandbox Code Playgroud)

效果很好,我已经完成了控制,将新项目添加到"成绩"(推送)和删除项目(拼接),所有内容都很好地反映到ng-grid.像这样:

//Adding new like this is ok
$scope.grades.push({some-new-data-here});

//Deleting old like this is ok
$scope.grades.splice(row.rowIndex, 1);
Run Code Online (Sandbox Code Playgroud)

但是这种方法会自动生成基于int的火钥匙,这些火钥匙在修改时会一直变化,所以我想控制钥匙,所以我改变了添加要使用的项目:

var fbRef = …
Run Code Online (Sandbox Code Playgroud)

angularjs firebase angular-ui ng-grid angularfire

8
推荐指数
1
解决办法
870
查看次数

如何使用鼠标在ng-grid控件内调整列的大小

你好,有一个简单的问题,我已经定义了属性resizable:true的列.如何让用户使用鼠标重新调整列大小,就像他们在大多数网格控件中一样?

ng-grid

8
推荐指数
1
解决办法
6334
查看次数

为什么嵌套的ng-grid高度不起作用?

我有一个嵌套的ng网格.

var faculty = angular.module('faculty', ['ngGrid']);

faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window)
{

$scope.facdata = [{

    examname: 'test'       
  },{

    examname: 'test2'
  }];

  $scope.gridOptions = {

    data: 'facdata',

    plugins: [new ngGridFlexibleHeightPlugin()],

    columnDefs: [
      {field: 'examname',displayName: 'Exam Name'},
      {field: '', displayName: 'Subjects' , cellTemplate: '<div  ng-grid="gridOptions1"  ></div>'
    }]
  };
$scope.fac1data = [{
    abc: 'value',
    def: 'value2'
  }, {

    abc: 'value3',
    def: 'value4'
  }, {
    abc: 'value1',
    def: 'value4'
  }, {
    abc: 'value2',
    def: 'value4'
  }, {
    abc: 'value34',
    def: 'value4'
  }, {

    abc: …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs ng-grid

8
推荐指数
1
解决办法
1524
查看次数

在ui-grid editableCellTemplate [ng-grid 3.x]中使用ng-option下拉列表

我正在使用ng-grid的新3.0版ui- grid在我的应用程序中创建一个网格.我正在尝试做的是在我的表格中创建一个可编辑单元格的ng-options下拉列表,其中填充了使用角度工厂检索的数据.

我试图通过使用ui-grid 的editableCellTemplate功能来实现这一点.

这是一些示例代码:

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
Run Code Online (Sandbox Code Playgroud)

控制器:

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};
Run Code Online (Sandbox Code Playgroud)

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>
Run Code Online (Sandbox Code Playgroud)

这是一个带代码的plunker.[ 注意:这只是示例代码.用于ng-options的数组正在实际代码中从角度工厂中提取,而不是在范围中声明.editDropdownOptionsArray可能无法正常工作,因为数据是动态的.]

是否可以使用ui-grid执行此操作?我想也许这是一个范围问题,因为如果我将ng-option代码放在​​我的HTML页面中它按预期工作,但我可以从ui-grid文档收集的是temp.html文件应该在范围内.我知道这些东西仍处于不稳定状态,但对此事的任何帮助都将不胜感激!


2015年3月31日更新: …

javascript grid angularjs ng-grid angular-ui-grid

8
推荐指数
2
解决办法
3万
查看次数

什么是u-grid中ng-grid的"beforeSelectionChange"的等价物?

ng-grid,我曾经以beforeSelectionChange下列方式使用:

当用户选择行时,执行ajax调用.虽然我设置了ajax调用$scope.doingAjaxCall = true,并且为了阻止用户更改选择,我在网格定义中有这个:

beforeSelectionChange: function () {
    return !($scope.doingAjaxCall);
},
Run Code Online (Sandbox Code Playgroud)

如果ajax调用正在发生,它会锁定/冻结选择.

现在,在ui-grid(又名ng-grid 3)中,我不知道相当于什么afterSelectionChange.

在文档的这一部分:
http://ui-grid.info/docs/#/api/ui.grid.selection.api : PublicApi
我看到两个事件:

  • rowSelectionChanges
  • rowSelectionChangedBatch.

这些似乎相当于旧的 afterSelectionChange

在文档的这一部分:
http://ui-grid.info/docs/#/api/ui.grid.selection.service : uiGridSelectionService
我看到这两个似乎与需求相关的方法:

  • raiseSelectionEvent(grid, changedRows, event)
  • decideRaiseSelectionEvent(grid, row, changedRows, event)

但我不明白如何使用它们

重要提示:
我正在使用multiSelect: false(即:只能选择一行)

angularjs ng-grid angular-ui-grid

8
推荐指数
1
解决办法
1566
查看次数

将类添加到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
查看次数