簡體   English   中英

在AngularJS可擴展ui-grid中使用geojson數據

[英]using geojson data with AngularJS expandable ui-grid

我正在使用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;
}

然后在您的subGridOptions中

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

讓我知道您是否希望我的回答更加冗長,但我認為這很簡單:)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM