https://github.com/angular-ui/ng-grid
https://github.com/angular-ui/ng-grid/wiki
Grid Options
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 }"> </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
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 |
From: http://blog.csdn.net/violet_day/article/details/17448133
相关推荐
tr-ng-grid插件
ng-grid实现动态列表 包含源码实现和配套所需要的所有相关lib,以及实现效果。把代码引入到angular项目即可
前端项目-ng-grid,A data grid for Angular
elasticsearch-lang-python.zip,python语言插件允许使用python作为脚本语言来执行。
ng-grid-fontawesome 使用的字体是使用fontello生成的字体,并且是font-awesome的子集(一个图标除外-fontelico的spin5)。 如果您已经使用font-awesome,则可以使用它代替ui-grid字体。 用法 例子示例 提醒自己 ...
使用AngularJS和REST使用ng-grid进行过滤,排序和分页
网格的 API 类似于 ng-grid 的 API,表格架构(每个网格 3 个表)类似于 jQuery DataTables 的架构。 有关文档,请参阅: : 。 鲍尔 bower install ngReactGrid 特征 快速,出色的性能 固定标题 服务器端钩子 ...
angularjs 的表格类控件,可直接下载安装使用
ng-grid和简单的REST 该演示提供了一个使用Angular和ng-grid的网格解决方案,该解决方案可以连接到使用NodeJS和ExpressJS在本地运行的RESTful端点。如何使用角gr种子克隆有角度的种子库并开始黑客攻击...在开发过程...
弃用:ng-grid 2.x不再处于积极开发中。 3.0版称为 ,并且正在积极维护。ng-grid:Angular数据网格 _注意:我们不再接受基于2. *分支的基于功能的请求。 所有活动功能的开发都在3.x中进行。 版本2.x当前没有维护者,...
在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西。 代码已经上传到github上,地址在这里哟...
网格ng-Grid 的 Nuget 包取决于 AngularJS.Core Grid 安装包
AngularNGGRID_SubGrid_Pagination 将 ng-grid 3 与子网格和分页一起使用!
ng-init="init('rest', '/data/mock.json')" ng-grid ... ng-endless-scroll ng-endless-scroll-append="append()" LocalStorage 数据源: ng-init="init('localstorage', 'test')" ng-grid ... ng-endless-scroll...
ng-bootstrap-grid 该项目提供了用于angularJs的网格(表格)控制器。 样式将使用引导程序。 该功能将包括选择网格,类别网格和分页网格。 ##截屏 ##安装易于安装,因为ng-bootstrap-grid具有最小的依赖性-仅需要...
使用MySQL+ExpressJS+AngularJS+NodeJS尝试开发的图书管理...AngularJS用到了:ng-grid,ui-router,ng-file-upload等模块 ExpressJS用到了:body-parser,cookie-parser,cookie-session,ejs,express-session,MD5加密等模块
ag-grid-ng-forms
完整表另一个 Ng-grid/ng-table