将geojson数据与AngularJS可扩展UI-grid一起使用

using geojson data with AngularJS expandable ui-grid

本文关键字:UI-grid 一起 可扩展 AngularJS geojson 数据      更新时间:2023-09-26

我正在使用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 可扩展网格示例使用这个 json,它是一个键对对象数组,而我的只是一个具有子属性的 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;
        });

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

例如,假设您的对象名称是您将执行的数据

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

然后在您的子网格选项中,您将执行

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

如果您希望我在回答中更加冗长,请告诉我,但我认为这很简单:)