将geojson数据与AngularJS可扩展UI-grid一起使用
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;
}
然后在您的子网格选项中,您将执行
{
name:'QUAD_NAME,
field: 'getQuadName()'
}
如果您希望我在回答中更加冗长,请告诉我,但我认为这很简单:)
相关文章:
- Angular UI-GRID未在页面上显示网格
- 如何仅在ui-grid.js中显示特定列
- ui.grid 行无法选择行
- Angular UI Grid Edit可以与“;控制器为“;语法
- Angular ui.grid 获取嵌套行
- 如何从$http请求延续中获得显示在angular ui.grid中的数据
- 使用ui.grid与cellTemplate共享$scope
- Angular UI Grid重用的网格无法重置滚动+无限滚动无法工作
- Kendo ui Grid:标准的HTML5输入日期时间可以用作单元格编辑器吗
- Angular-ui-grid:如何格式化数据字段的内容
- 角度UI-Grid 3.0.0-rc.16:分页对我不起作用
- 我需要在 ui-grid 中显示一个字符串数组.单列,每行一个字符串
- 角度 UI-grid 保存来自不同范围对象的预填充值
- UI-GRID:访问$scope的问题
- Kendo UI Grid 获取当前元素 javascript 的 ID
- 从 ui-grid 中的可展开行中删除列标题
- 如何通过角度 ui-grid 中来自$scope的数据动态设置指令
- 模式对话框中 ui-grid 的大小调整问题不正确
- 模式窗口中 ui-grid 的大小调整行为不正确
- 将geojson数据与AngularJS可扩展UI-grid一起使用