分组时,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代码,它看起来不是一件容易的事.有人有这方面的经验吗?
谢谢!
在最新版本的ng-grid(v2.0.7)中,当editableCellTemplate处于编辑模式并失去焦点时,它仍处于编辑模式.这是一个错误还是我错误地配置了网格?
下面是一个示例:http://plnkr.co/edit/OgEjk7wFaC982FrKbeHH?p = preview其中第0列包含editableCellTemplate.
我一直在寻找一些解决方案,用于在ng-grid上显示工具提示,但没有运气.当我在ng-grid上使用cellTemplate来自定义单元格以包含工具提示时,我遇到了各种各样的问题 - 工具提示要么没有显示出来,要么表现得很奇怪,如图所示:http://plnkr.co/edit/MFhwgOvSUFKcyJPse5wf .
我错过了什么吗?有没有人有一个在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) 你好,有一个简单的问题,我已经定义了属性resizable:true的列.如何让用户使用鼠标重新调整列大小,就像他们在大多数网格控件中一样?
我有一个嵌套的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) 我正在使用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文件应该在范围内.我知道这些东西仍处于不稳定状态,但对此事的任何帮助都将不胜感激!
在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(即:只能选择一行)
我正在使用ng-grid来显示正在上传的文件集合(每个文件都有自己的行).
如果一个/任何文件无法上传,我想修改该行并在其上放置一个类以显示它无法上传.
我如何将一个类添加到整行?
当我在同一页面上放置两个ng-grid并打开第一个网格的colum菜单时,第二个网格的标题将重叠,如此屏幕截图所示:

我已经尝试将z-index列菜单设置为非常高的值,但它没有任何效果.我尝试了其他几种方法,但我显然遗漏了一些东西.有什么建议?Plunker展示了这里的行为:
ng-grid ×10
angularjs ×9
javascript ×3
aggregate ×1
angular-ui ×1
angularfire ×1
css3 ×1
firebase ×1
grid ×1
html5 ×1
z-index ×1