欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

 

 

From: http://blog.csdn.net/violet_day/article/details/17448133