为什么嵌套NG-电网高度不起作用? [英] Why nested ng-grid height does not work?
问题描述
我有一个嵌套的NG网格。
I have a nested ng grid.
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: 'value34',
def: 'value4'
}, {
abc: 'value23',
def: 'value14'
}, {
abc: 'value433',
def: 'value5554'
}, {
abc: 'value3555',
def: 'value4878'
}
];
$scope.gridOptions1 = {
plugins: [new ngGridFlexibleHeightPlugin()],
data: 'fac1data',
columnDefs: [
{ field: 'abc',displayName: 'abc'},
{ field: 'def',displayName: 'def'}]
}
});
查看 Plunker
我需要显示所有的嵌套数据网格一目了然。我需要一览(不垂直滚动),显示孩子NG-网格数据。但是,网格嵌套的高度不起作用。我的愿望电网是像下面....
See the Plunker I need to show all of the nested data grid at a glance. I need to show child ng-grid data at a glance(without Vertical scroll). But nested grid height does not work . My desire grid is like below....
推荐答案
纳克网不是为嵌套网格: 或细胞甚至是动态的高度细胞的
如果你看看NG-网格的模板 UI-grid.html
您看到的大小是固定的像素:
If you look ng-grid's template ui-grid.html
you see that the size is fixed in pixels:
height: {{ grid.options.rowHeight }}px;
看的 github上
本 CSS 的类被嵌入在模板中,不留下任何空间过写为自动。由于电网与内置的div
,而不是表
,行和列的表格的关系是困难的,如果每个细胞DIV
可以自由地决定它自己的行为。因此,嵌套的网格是相当的挑战。
see github
This CSS class is embedded in the template, leaving no room to over-write to "auto". Since grids are built with Div's
rather than Tables
, tabular relationships between rows and columns is difficult if every cell-div
is free to decide it's own behavior. So nested grids are quite the challenge.
您可以得到你想要的是一个类似于嵌套网格黑客的影响
折叠电网
Collapsed Grid
注意:尖的已被添加到显示父行的扩展。我have'nt添加逻辑来隐藏有没有孩子父行插入符号。
note: The caret's have been added to show that parent rows are expandable. I have'nt added logic to hide carets for parent rows that have no children.
扩展电网
Expanded Grid
改变你的JSON 以包括测试,名称,ANDD分数列。使用两种测试名称或学生姓名/得分列。使用父ID为孩子,给身份证的家长:
Alter your JSon to include a column for Test, Name, andd Score. Use columns for either Test names or Student Names/Scores. use parent id for children and give id's to parents:
$scope.facdata = [{test: "Basic Physics Test", parentId:0,id:1,expanded:true},
{name: "NAME", Score: "SCORE",parentId:1,expanded:false},
{name: "John", Score: 77,parentId:1,expanded:false},
{name: "Jacob", Score: 66,parentId:1,expanded:false},
{name: "Jenny", Score: 94,parentId:1,expanded:false},
{test: "Advanced Physics Test",id:2, parentId:0,expanded:true},
{name: "NAME", Score: "SCORE",parentId:2,expanded:false},
{name: "Freddy", Score: 94,parentId:2,expanded:false},
{name: "Samantha", Score: 38,parentId:2,expanded:false},
{name: "Judy", Score: 100,parentId:2,expanded:false}
];
网格选项设置 rowTemplate
使用 NG-节目
对孩子的指令对扩展
字段
In Grid Options set rowTemplate
to use ng-show
directive on the children against the expanded
field
$scope.gridOptions = {
data: 'facdata',
columnDefs: [{field: 'id',displayName:'',width:20,
cellTemplate:'<div ng-show="row.getProperty(\'id\')" ng-click="toggleExpansion(row.getProperty(col.field))"><i class="fa fa-caret-right"></i></div>'},
{field: 'test', displayName: ''},
{field: 'name', displayName:''},
{field:'Score', displayName:'',
cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}</div>'}],
rowTemplate:'<div style="width: 600px" ng-show="row.getProperty(\'expanded\')"><div ng-repeat="col in renderedColumns" class="ngCell ">' +
'<div ng-cell></div> </div></div>'
添加ToggleSubReport功能来管理显示嵌入式数据
Add a ToggleSubReport function to manage showing the embedded data
$scope.ToggleSubReport = function(id) {
for (var i=0;i<$scope.facdata.length;++i){
if ($scope.facdata [i].parentId ===id){
$scope.facdata [i].expanded = !$scope.facdata [i].expanded;
}
}
}
plnkr
1)嵌套网格是不可能的:
这是你的主要问题和目标。这就是你把一个赏金上。但你可以看到从的 github上 sourcefor网格行高(以像素为单位定义),并从 NG-电网响应的贡献者,这不一个选项,但他们甚至设想。 NG-Grid的的单元格高度并不是真正意义上的动态,因为 NG-格的的设计是围绕匹配大小的div
行,而不是一个表
(可多了,自然重新大小的行和列细胞)。
1) Nested Grids are not possible:
This was your main question and aim. This is what you put a bounty on. But as you can see from github sourcefor grid-row height (defined in pixels) and responses from ng-grid contributors, this is not an option yet they even envision. NG-Grid's cell height is not truly dynamic because ng-grid is designed around matching sized divs
rows rather than a table
(which can more naturally re-size rows and row-cells).
2)的那种我发现你真的能适应复杂的主 - 子关系的分格::您可以序列化之前合并阵列(或解析 JSON 字符串数组,然后将它们合并)。你必须重新定义我用于主 - 从匠气 ID / PARENTID
我用领域的 PK / FK
的2列出。
2) A Sub-Grid of the kind I showed you really can accomodate sophisticated master-child relationships: You can merge arrays before serializing them (or parse JSON strings to arrays, then merge them). You must redefine the fields I used for master-detail from the unimaginative id/parentid
I used to the PK/FK
of the 2 lists.
这篇关于为什么嵌套NG-电网高度不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!