文档章节

AngularJS 之 ngGrid

心醉茅屋
 心醉茅屋
发布于 2016/02/26 16:33
字数 1246
阅读 57
收藏 0

 

https://github.com/angular-ui/ng-grid

https://github.com/angular-ui/ng-grid/wiki


Grid Options

id default value definition plunker
aggregateTemplate <div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggregate"><span class="ngAggregateText">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span><div class="{{row.aggClass()}}"></div></div> Define an aggregate template to customize the rows when grouped. See github wiki for more details. Link
afterSelectionChange function (rowItem, event) {} 选择之后的回调函数 Link
beforeSelectionChange function (rowItem, event) { return true; } 选择之前的回调函数,返回false,则取消选择,返回true,继续选择。如果你需要一个异步的回调,可以使用rowItem.continueSelection(event) 。注意:当使用shift多选时,仅仅触发一次,并且rowItem返回一个数组 Link
checkboxCellTemplate <div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div> Checkbox的模板 Link
checkboxHeaderTemplate <input class="ngSelectionHeader" type="checkbox" ng-show="multiSelect" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/> Checkbox 的头模板 Link
columnDefs undefined 列定义 Link
data [] 数据源 Link
enableCellEdit false 全局设置,是否允许CellEdit,可以使用editableCellTemplate覆盖。 Link
enableCellSelection false 是否允许CellSelection Link
enableColumnResize false 是否允许ColumnResize Link
enableColumnReordering false 是否允许列重新排序 Link
enableHighlighting false Enable or disable cell content selection Link
enablePaging false 是否分页 Link
enableRowReordering false Enable drag and drop row reordering. Only works in HTML5 compliant browsers. Link
enableRowSelection true To be able to have selectable rows in grid. (was canSelectRows prior to 2.0) Link
enableSorting true 是否允排序 Link
filterOptions { filterText: '', useExternalFilter: false } filterText: 搜索框中绑定的内容. useExternalFilter: Bypass internal filtering if you want to roll your own filtering mechanism but want to use builtin search box. Link
footerRowHeight 55 footer的像素 Link
groups [] 分组,使用fieldName,并不是displayName Link
groupsCollapsedByDefault true 当分组的时候折叠 Link
headerRowHeight 32 header row 的像素 Link
headerRowTemplate undefined Define a header row template for further customization. See github wiki for more details. Link
jqueryUIDraggable false Enables the use of jquery UI reaggable/droppable plugin. requires jqueryUI to work if enabled. Useful if you want drag + drop but your users insist on crappy browsers. Link
jqueryUITheme false Enable the use jqueryUIThemes Link
keepLastSelected true prevent unselections when ini single selection mode. Link
maintainColumnRatios undefined 在调整列宽时,重新调整大小,默认为true。Maintains the column widths while resizing. Defaults to true when using *'s or undefined widths. Can be ovverriden by setting to false. Link
multiSelect true 是否多选 Link
pagingOptions { pageSizes: [250, 500, 1000], pageSize: 250, totalServerItems: 0, currentPage: 1 } pageSizes: list of available page sizes. pageSize: currently selected page size. totalServerItems: Total items are on the server. currentPage: the uhm... current page. Link
plugins [] Array of plugin functions to register in ng-grid Link
rowHeight 30 Row height of rows in grid. Link
rowTemplate <div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div> Define a row Template to customize output. See github wiki for more details. Link
selectedItems [] 选择的items,数组 Link
selectWithCheckboxOnly false Disable row selections by clicking on the row and only when the checkbox is clicked. Link
showColumnMenu false 是否显示菜单来选择显示和分组列,如果showColumnMenu和showFilter都为false,按钮不显示 Link
showFilter false 是否在column menu中显示搜索框.,如果showColumnMenu和showFilter都为false,按钮不显示 Link
showFooter false 是否显示footer Link
showGroupPanel false 是否显示分组拖拽区域 Link
sortInfo { fields: [], directions: [] } 定义一个默认的排序. You can also observe this variable to utilize server-side sorting (see useExternalSorting). Syntax is sortInfo: { fields: ['fieldName1',' fieldName2'], directions: ['asc', 'desc']}. Directions are case-insensitive Link
showSelectionCheckbox false 是否选择checkbox Link
tabIndex 0 Set the tab index of the Vieport. Link
useExternalSorting false Prevents the internal sorting from executing. The sortInfo object will be updated with the sorting information so you can handle sorting (see sortInfo) Link
virtualizationThreshold 50 The threshold in rows at which to force row virtualization on. Link
selectRow function (rowIndex, state) 程序化的选择行 Link
selectItem function (itemIndex, state) 程序化的选择行 Link


ColumnDefs Options

id default value definition plunker
aggLabelFilter '' string name for filter to use on the aggregate label ('currency', 'date', etc..) defaults to cellFilter if not set. Link
cellClass '' Appends a css class for the column cells Link
cellFilter '' string name for filter to use on the cell ('currency', 'date', etc..) Link
cellTemplate <div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span></div> Sets the cell template for the column. See github wiki for more details. Link
displayName field Sets the pretty display name of the column. default is the field given Link
editableCellTemplate <input ng-class="'colt' + col.index" ng-input="COL_FIELD" /> Sets the editableCellTemplate for the column. Displayed when user uses enableFocusedCellEdit and cell is focused. Link
enableCellEdit false Displays cellTemplate when user is not focused on cell. Displays editableCellTemplate when user focuses on cell. Link
field '' The string name of the property in your data model you want that column to represent. Can also be a property path on your data model. 'foo.bar.myField', 'Name.First', etc.. Link
groupable true Whether or not the user is allowed to group the column Link
headerCellTemplate <div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }"><div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div><div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div><div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div><div class="ngSortPriority">{{col.sortPriority}}</div><div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div><div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div> Sets the template for the column header cell. See github wiki for more details. Link
headerClass '' Appends a css class for the column header. Link
maxWidth 9000 Sets the maximum width of the column. Link
minWidth 50 Sets the minimum width of the column. Link
pinnable true Whether or not column can be pinned to the left. Link
resizable true Whether or not column is resizable. Link
sortable true Whether or not column is sortable. Link
sortFn Based on the detected data type Sets the sort function for the column. Useful when you have data that is formatted in an unusal way or if you want to sort on an underlying data type. Check theMDN sort docs for examples Link
visible true Whether or not the column is visible by default. Can be overridden by the user at run-time if showColumnMenu is true. Link
width '*' Sets the width of the column. Can be a fixed width in pixels as an int (42), string px('42px'), percentage string ('42%'), weighted asterisks (width divided by total number of *'s is all column definition widths) See github wiki for more details. Link


© 著作权归作者所有

共有 人打赏支持
心醉茅屋
粉丝 1
博文 4
码字总数 2173
作品 0
程序员
私信 提问
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
登录失败,始终提示公司名称不存在

根据前端的输出错误应该是后端的服务接口没有启动,可是不知道怎么解决! 前端控制器输出错误如下: Load defined data api failed: Account.LoginAPI Error: [$injector:unpr] Unknown pro...

gread_369
2016/08/24
310
1

没有更多内容

加载失败,请刷新页面

加载更多

4.57 MariaDB慢查询日志 4.58 Tomcat_JDK部署 4.59 zrlog安装 4.60 Nginx代理Tomcat

4.57 MariaDB慢查询日志 为什么要配置慢查询日志? 目的是为了帮助我们分析MariaDB的瓶颈点。 如何配置? 1)进入MariaDB里面执行:show variables like 'slow%';show variables li...

Champin
今天
3
0
自动机器学习简述(AutoML)

为什么需要自动机器学习 对于机器学习的新用户而言,使用机器学习算法的一个主要的障碍就是算法的性能受许多的设计决策影响。随着深度学习的流行,工程师需要选择相应的神经网络架构,训练过...

naughty
今天
2
0
Android Studio Unable to resolve dependency for错误的排查

记录一次Android Studio Unable to resolve dependency for错误的排查 Android Studio 3.2.1 错误提示 Unable to resolve dependency for... 原因:在gradle中设置的代理并没有gradle 4.6的版......

Gemini-Lin
今天
0
0
java常用设计模式

设计模式; 一个程序员对设计模式的理解: “不懂”为什么要把很简单的东西搞得那么复杂。后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“...

呵呵哒灬
今天
5
0
Kafka入门

1、Kafka使用背景 在我们大量使用分布式数据库、分布式计算集群的时候,是否会遇到这样的一些问题: 我们想分析下用户行为(pageviews),以便我们设计出更好的广告位 我想对用户的搜索关键词...

watermelon11
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部