ng-Grid
程序员文章站
2024-01-22 09:19:22
...
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