原文:108 Hidden Grids 当UI-Grid在加载页面的时候不是可见状态,比如在tabset页面中,或者是在可折叠的页面内。最终的结果往往是一个表格,呈现出“错误”或者行列出现意想不到的宽度或高度。让我们从这个场景开始: 想象一下,在一个 < div>内的表格,这个 < div>没有宽度或高度。您提供的表格没有CSS类,所以它的高度和宽度CSS值设置为自动,这意味着浏览器将自动计算。 UI-Grid的出现是为了显示大量的数据更容易。它通过一个称为“虚拟化”的过程。这意味着 阅读更多…

原文:106 Binding examples UI-Grid支持在colDef.field的复杂对象绑定。 本教程显示了具有特殊字符、数组元素、嵌套属性和函数的属性的双向绑定。 注意函数不能编辑。 在自定义cellTemplates中可以使用: COL_FIELD 将取代表格中单元格的值。cellTemplates可以使用在所有允许MODEL_COL_FIELD 取代表格中单元格的值的地方。使用MODEL_COL_FIELD 需要 ng-model=’field’。 代码: index.htm 阅读更多…

原文:105 Footer 表格页脚 UI-Grid 支持页脚,可以设置showGridFooter 选项设置为true(默认为false)显示。页脚显示网格中的总行数和已筛选行数。如果开启了 ui-grid-selection 功能,将显示选定行。 列脚注 UI-Grid 也支持列脚注,您可以为每个列设置聚合函数或使用自定义页脚模板显示您希望聚合的内容。支持的聚合函数是:和,平均数,行数,最小,最大。使用aggregationTypes需要在控制器中注入uiGridConstants 。也可以 阅读更多…

原文:104 i18n UI-Grid可以使用 i18nService更改默认语言、添加翻译或更改现有的翻译。 设置语言的最简单的方法是将 表格放在 ui-i18n指令的div内。 <div ui-i18n=”{{lang}}”> 页面内只能运行一个ui-i18n指令。当前的语言设置存储在 i18n service(Singleton)中,所以目前还没有办法在单个APP上应用一种以上的语言。 i18nService.setCurrentLang(‘fr’); index.html & 阅读更多…

原文: 103 Filtering 简单设置 UI-Grid能够行筛选。需要在 grid options中设置enableFiltering标识(默认是关闭状态)。 在 column def中设置enableFiltering :false 可以禁用该列的过滤。参看下面例子中的“company”列。 在 column def中可以通过filter: { term: ‘xxx’ } 设置筛选选项。可以参看下面例子中的 “gender” 列。如果columnDef的filter没有设置筛选选项,那么 阅读更多…

原文:102Sorting UI-Grid 默认允许排序。可以在grid options 中设置enableSorting 标签来 启用和关闭它。 注意:可以通过访问列菜单来排序列。如果希望菜单有下拉的效果必须引入ngAnimate,但在项目中不是必须引入的。 在columnDefs中可以通过设置 enableSorting: false 来禁用排序。可以看下面例子中的最后一列。 可以通过shift+click同时选中2列排序。 在使用菜单进行排序时,类别是添加的。因此,如果有一列排序,然后又选 阅读更多…

原文:101 intro to UI-Grid UI-Grid 3.0 (原 ng-grid)是一个不依赖于其他AngularJS,完全独立的 angular 表格系统。它围绕表格的核心设计模块和功能,功能的分层就像是angular的模型和指令。这些让它的核心代码小而精,并且能让你使用它来实现复杂的功能。 在核心模块中,可以获得: – 虚拟的行和列,视图中可见的行和列才会显示 – 绑定单元格一系列属性和方法 – 列的排序有三种状态:Asc, Desc, Non 阅读更多…