从Web服务角度ui-grid显示数据的最佳方式

时间:2015-03-23 09:32:20

标签: angularjs angular-ui-grid

我从我的网络服务中取回一个对象。它看起来像:

public DateTime CreationTime { get; set; } public bool Glossar { get; set; } public ICollection<BdConfigTablesTranslation> BdConfigTablesTranslations { get; set; } public ICollection<BdConfigTablesField> BdConfigTablesFields { get; set; } public ICollection<BdContent> BdContents { get; set; }

`ConfigTablesField看起来像:

[ForeignKey("BdConfigTableId")]
public BdConfigTable BdConfigTable { get; set; }
public int BdConfigTableId { get; set; }

[Required]
public bool FieldRequired { get; set; }

[Required]
public FieldType FieldType { get; set; }    
public ICollection<BdContentField> BdContentFields { get; set; }
public ICollection<BdConfigTablesFieldsTranslation> BdConfigTablesFieldsTranslation { get; set; }

我认为ui-grid不是在对象内部显示大量数组的最佳方法吗?

1 个答案:

答案 0 :(得分:1)

无论使用什么工具,使用多级数组作为数据源总是会让人感到困惑,但UI-Grid可以做得很好。

您只需要绑定到正确的属性路径。假设您有一系列朋友,其中每个数组都有朋友的名字和姓氏作为其元素。如果您想绑定到第一个朋友的名字,可以使用friends[0][0]作为field。这就是看起来的样子:

columnDefs = [
  { name: 'Name', field: 'name' },
  { name: '1st Friend 1st Name', field: 'friends[0][0]' },
];

data = [
  {
    "name": "Cox",
    "friends": [
      [
        'Bob',
        'Jones'
      ],
      [
        'Mary',
        'Smith'
      ]
    ]
};

如果您想了解有关使用复杂绑定的更多信息,请阅读以下文章:http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/(警告:我是作者),并查看此处的文档:http://ui-grid.info/docs/#/tutorial/106_binding