Question

我正在使用Angular JS的ui-grid来显示一些json（特别是geojson）信息。我正在使用可扩展网格列出额外的元数据。我正在使用的json设置如下：

{
"type": "FeatureCollection",
"totalFeatures": 36,
"features": [{
    "type": "Feature",
    "id": "someid",
    "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
            [
                [
                    [-71.62599996, 41.250999959999994],
                    [-71.49899628, 41.250999959999994],
                    [-71.49899628, 41.12399619],
                    [-71.62599996, 41.12399619],
                    [-71.62599996, 41.250999959999994]
                ]
            ]
        ]
    },
    "geometry_name": "the_geom",
    "properties": {
        "QUAD_NAME": "Block Island",
        "STATE": "RI",
        "ACQYEAR": "2010",
        "RESOLUTION": "1 Meter",
        "FILMTYPE": "Color",
        "TILE": "sometile",
        "X1": -71.626,
        "Y1": 41.124,
        "X2": -71.499,
        "Y2": 41.251
    }
}

我想在子网格中显示上面的属性对象。

ui-grid expandable grid example使用this json这是一对keypair对象，而我的只是一个带有子属性的javascript对象。作为一个新的javascript编码器，我不明白我怎么能告诉ui-grid而只是查看我给它的定义的属性对象。

以下是相关代码：

$scope.gridOptions = {
        expandableRowTemplate: 'app/map/expandableRowTemplate.html',
        expandableRowHeight: 150,
        enableGridMenu: true,
        enableRowSelection: true,
        enableSelectAll: true,
        selectionRowHeaderWidth: 35,
        expandableRowScope: {
            subGridVariable: 'subGridScopeVariable'
        }
    };

    $scope.gridOptions.columnDefs = [{
        name: 'id',
    }];

    $scope.gridOptions.multiSelect = true;

    $http.get('/assets/rhode.json')
        .success(function(data) {
            //var items = data.features;
            for (var i = 0; i < data.features.length; i++) {
                data.features[i].subGridOptions = {
                    columnDefs: [{
                        name: 'QUAD_NAME',
                        //        field: 'QUAD_NAME'
                    }, {
                        field: 'ACQYEAR',
                        //       field: 'ACQYEAR'
                    }],
                    data: data.features[i].properties
                }
            }

            $scope.gridOptions.data = data.features;
        });

Answer 1

为了让网格显示对象的嵌套属性，需要向对象添加一个函数，然后在field参数中调用此函数。

例如，假设您的对象名称是您要执行的数据

data.getQuadName = function(){
    return this.features.properties.QUAD_NAME;
}

然后在您的subGridOptions中执行

{
   name:'QUAD_NAME,
   field: 'getQuadName()'
 }

如果您希望我在答案中更加详细，请告诉我，但我认为这很简单：）

使用Geojson数据和AngularJS可扩展的ui-grid

1 个答案: