Javascript 为什么嵌套ng栅格高度不起作用？
我有一个嵌套的ng网格Javascript 为什么嵌套ng栅格高度不起作用？,javascript,angularjs,ng-grid,Javascript,Angularjs,Ng Grid,我有一个嵌套的ng网格 var faculty = angular.module('faculty', ['ngGrid']); faculty.controller('facultycontroller', function facultycontroller($scope, $http, $window) { $scope.facdata = [{ examname: 'test' },{ examname: 'test2' }]; $sc
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'}]
}
});
var faculty=angular.module（'faculty'，['ngGrid']）；
控制器（'facultycontroller'，函数facultycontroller（$scope，$http，$window）
{
$scope.facdata=[{
examname:“测试”
},{
examname:'test2'
}];
$scope.gridOptions={
数据：'facdata'，
插件：[新的ngGridFlexibleHeightPlugin（）]，
columnDefs：[
{字段：'examname'，显示名称：'Exam Name'}，
{字段：“”，显示名称：'Subjects'，单元格模板：'
}]
};
$scope.fac1data=[{
abc:'价值'，
定义：“值2”
}, {
abc:‘价值3’，
定义：“值4”
}, {
abc:‘价值1’，
定义：“值4”
}, {
abc:‘价值2’，
定义：“值4”
}, {
abc:‘价值34’，
定义：“值4”
}, {
abc:‘价值34’，
定义：“值4”
}, {
abc:‘价值23’，
定义：“值14”
}, {
abc:‘价值433’，
def:'value5554'
}, {
abc:‘价值3555’，
def:'value4878'
}
];
$scope.gridOptions1={
插件：[新的ngGridFlexibleHeightPlugin（）]，
数据：“fac1data”，
columnDefs：[
{字段：'abc'，显示名称：'abc'}，
{字段：'def'，显示名称：'def'}]
}
});
这只是一个例子，因为每行都有相同的子行数
<body ng-controller="facultycontroller">
<h1>Hello Plunker!</h1>
<div ng-grid="gridOptions" ></div>
</body>
你好，普朗克！
var faculty=angular.module（'faculty'，['ngGrid']）；
控制器（'facultycontroller'，函数facultycontroller（$scope，$http，$window）{
$scope.facdata=[{
examname:“测试”
},{
examname:'test2'
}];
$scope.rowHeight=30；
$scope.updateGrid=function（）{
$scope.gridOptions={
数据：'facdata'，
行高：$scope.fac1data.length*$scope.rowHeight，
columnDefs：[
{字段：'examname'，显示名称：'Exam Name'}，
{字段：“”，显示名称：'Subjects'，单元格模板：'
}]
};
}
$scope.fac1data=[{
abc:'价值'，
定义：“值2”
}, {
abc:‘价值3’，
定义：“值4”
}, {
abc:‘价值1’，
定义：“值4”
}, {
abc:‘价值2’，
定义：“值4”
}, {
abc:‘价值34’，
定义：“值4”
}, {
abc:‘价值34’，
定义：“值4”
}, {
abc:‘价值23’，
定义：“值14”
}, {
abc:‘价值433’，
def:'value5554'
}, {
abc:‘价值3555’，
def:'value4878'
}
];
$scope.gridOptions1={
头灯：0，
数据：“fac1data”，
行高：$scope.rowHeight，
columnDefs：[
{字段：'abc'，显示名称：'abc'}，
{字段：'def'，显示名称：'def'}]
}
$scope.updateGrid（）；
$scope.fac1data=[{
abc:‘价值2’，
定义：“值4”
}, {
abc:‘价值34’，
定义：“值4”
}, {
abc:‘价值34’，
定义：“值4”
}, {
abc:‘价值23’，
定义：“值14”
}, {
abc:‘价值433’，
def:'value5554'
}, {
abc:‘价值3555’，
def:'value4878'
}
];
$scope.updateGrid（）；
});
若主行有不同的子行计数，则它不起作用。我只有一个想法。必须是fork ui网格，并将其重新设计为自动高度。官方的ui网格是在gridTemplate.html上设计固定高度，并使用绝对顶部位置。ng网格不是为嵌套网格设计的：甚至是动态高度单元格 如果查看ng grid的模板
ui grid.html height: {{ grid.options.rowHeight }}px;
Div表构建的，如果每个单元格Div
都可以自由决定自己的行为，那么行和列之间的表格关系就很困难了。所以嵌套网格是一个相当大的挑战
你可以通过类似嵌套网格的技巧获得你想要的效果：
看见
折叠网格
注意：已添加插入符号以显示父行是可扩展的。我没有为没有子行的父行添加隐藏插入符号的逻辑
扩展网格
看见
更改JSon以包含测试、名称和D分数列。使用列作为测试名称或学生名称/分数。将父id用于子项，并将id提供给父项：
$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 show
指令
$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>'
$scope.gridOptions={
数据：'facdata'，
columnDefs:[{field:'id'，displayName:''，宽度：20，
单元格模板：'}，
{字段：'test'，显示名称：'}，
{字段：'name'，显示名称：'}，
{字段：'Score'，显示名称：“”，
cellTemplate:{{row.getProperty（col.field）}}}}]，
行模板：“”+
' '
添加ToggleSubReport函数以管理显示嵌入数据
$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;
}
}
}
$scope.ToggleSubReport=函数（id）{
对于（var i=0；iI），我知道您想要做什么，但它根本不受支持。已请求：建议的解决方案是“将行高度设置为足够大”请不要包含神秘的短URL。它们很可怕。我发布plunker或fiddle链接，它无法发送，我尝试使用“代码”按钮，它不起作用。代码缩进了4个空格。我明白了，我不能只发布plunker或fiddle链接，它需要一些代码。谢谢你的帮助。然后发布一些代码？我编辑了你的问题并从中复制粘贴了代码您的Plunker。谢谢，您的答案适用于子网格。但我的对象更复杂。因此我需要实现主细节网格/嵌套网格概念。我的对象如下…公共类顺序{public string OrderNO（get；set；）public DateTime OrderDate（get；set；）public Lis
$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;
}
}
}