ng-Grid

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

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

Grid Options

iddefault valuedefinitionplunker
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
afterSelectionChangefunction (rowItem, event) {}选择之后的回调函数Link
beforeSelectionChangefunction (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
columnDefsundefined列定义Link
data[]数据源Link
enableCellEditfalse全局设置,是否允许CellEdit,可以使用editableCellTemplate覆盖。Link
enableCellSelectionfalse是否允许CellSelectionLink
enableColumnResizefalse是否允许ColumnResizeLink
enableColumnReorderingfalse是否允许列重新排序Link
enableHighlightingfalseEnable or disable cell content selectionLink
enablePagingfalse是否分页Link
enableRowReorderingfalseEnable drag and drop row reordering. Only works in HTML5 compliant browsers.Link
enableRowSelectiontrueTo be able to have selectable rows in grid. (was canSelectRows prior to 2.0)Link
enableSortingtrue是否允排序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
footerRowHeight55footer的像素Link
groups[]分组,使用fieldName,并不是displayNameLink
groupsCollapsedByDefaulttrue当分组的时候折叠Link
headerRowHeight32header row 的像素Link
headerRowTemplateundefinedDefine a header row template for further customization. See github wiki for more details.Link
jqueryUIDraggablefalseEnables 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
jqueryUIThemefalseEnable the use jqueryUIThemesLink
keepLastSelectedtrueprevent unselections when ini single selection mode.Link
maintainColumnRatiosundefined在调整列宽时,重新调整大小,默认为true。Maintains the column widths while resizing. Defaults to true when using *'s or undefined widths. Can be ovverriden by setting to false.Link
multiSelecttrue是否多选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-gridLink
rowHeight30Row 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
selectWithCheckboxOnlyfalseDisable row selections by clicking on the row and only when the checkbox is clicked.Link
showColumnMenufalse是否显示菜单来选择显示和分组列,如果showColumnMenu和showFilter都为false,按钮不显示Link
showFilterfalse是否在column menu中显示搜索框.,如果showColumnMenu和showFilter都为false,按钮不显示Link
showFooterfalse是否显示footerLink
showGroupPanelfalse是否显示分组拖拽区域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-insensitiveLink
showSelectionCheckboxfalse是否选择checkboxLink
tabIndex0Set the tab index of the Vieport.Link
useExternalSortingfalsePrevents the internal sorting from executing. The sortInfo object will be updated with the sorting information so you can handle sorting (see sortInfo)Link
virtualizationThreshold50The threshold in rows at which to force row virtualization on.Link
selectRowfunction (rowIndex, state)程序化的选择行Link
selectItemfunction (itemIndex, state)程序化的选择行Link

ColumnDefs Options

iddefault valuedefinitionplunker
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 cellsLink
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
displayNamefieldSets the pretty display name of the column. default is the field givenLink
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
enableCellEditfalseDisplays 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
groupabletrueWhether or not the user is allowed to group the columnLink
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
maxWidth9000Sets the maximum width of the column.Link
minWidth50Sets the minimum width of the column.Link
pinnabletrueWhether or not column can be pinned to the left.Link
resizabletrueWhether or not column is resizable.Link
sortabletrueWhether or not column is sortable.Link
sortFnBased on the detected data typeSets 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 examplesLink
visibletrueWhether 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


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值