uigrid的官網(wǎng)api需要翻墻，可以下載 https://github.com/angular-ui/ui-grid
api目錄 misc->tutorial

基礎(chǔ)指令

• 對表格進(jìn)行操作

命令解釋

ui-gird-pagination	分頁指令
ui-grid-selection	選擇
ui-grid-selection	選擇行
ui-grid-exporter	導(dǎo)出
ui-grid-auto-resize	解決grid布局 自動(dòng)適應(yīng)div 高度和寬度問題

• 對列進(jìn)行操作

命令解釋

ui-grid-resize-columns	列寬拉伸指令
ui-grid-move-columns	列移動(dòng)指令
ui-grid-resize-columns	保存當(dāng)前表格的一些狀態(tài)（非數(shù)據(jù)，但是需要保存的相關(guān)數(shù)據(jù)必須有對應(yīng)的值）
ui-grid-pinning	固定列

• 對單元格進(jìn)行操作

命令解釋

ui-grid-edit	編輯單元格
ui-grid-row-edit	編輯單元格，擴(kuò)展了ui-grid-edit功能以支持服務(wù)器對行的保存
ui-grid-cellnav	對單元格進(jìn)行上下左右鍵的操作（配合其他指令使用）

• 其他

命令解釋

過濾	filter
排序	sort

JS參數(shù)

//------------------列大小調(diào)整-------------------------enableColumnResizing: true //對表格列進(jìn)行大小調(diào)整，默認(rèn)為false//------------------列移動(dòng)-----------------------------enableColumnMoving: true //對表格列進(jìn)行移動(dòng)//-----------------分頁---------------------------------enablePagination: true, //是否分頁，默認(rèn)為truepaginationPageSizes: [10, 15, 20], //每頁顯示個(gè)數(shù)可選項(xiàng)，中間的數(shù)是每頁顯示的個(gè)數(shù)paginationPageSize: 10, //每頁顯示個(gè)數(shù)，會(huì)覆蓋上面這個(gè)屬性paginationCurrentPage:1, //當(dāng)前頁碼，enablePaginationControls: true, //使用默認(rèn)的底部分頁enablePagerCount: flase //表格底部顯示共幾條，false不顯示//-----------------保存表格狀態(tài)------------------------可以使用 $scope.state = $scope.gridApi.saveState.save(); //保存當(dāng)前表格狀態(tài)$scope.gridApi.saveState.restore($scope,$scope.state); //用來恢復(fù)保存的表格狀態(tài)//-----------------固定列--------------------------------enableHorizontalScrollbar: 1, //設(shè)置水平滾動(dòng)軸，1表示顯示，0不顯示enableBerticalScrollbar: 1在columnDefs里面的相應(yīng)數(shù)據(jù)設(shè)置pinnedLeft: true //設(shè)置左固定pinnedRight: true //設(shè)置右固定//-----------------編輯單元格----------------------------enableCellEdit = true //可以設(shè)置整體表格可以編輯，也可以對某一列進(jìn)行設(shè)置//-----------------過濾----------------------------------enableFiltering = true // 是否支持過濾設(shè)置，默認(rèn)為false不支持可以在columnDefs里面設(shè)置filter:{type: uiGridConstants.filter.SELECT,selectOptions: [{value: '全部',label: ''}, {value: '是',label: '是'}, {value: '否',label: '否'}]} //----------------排序---------------------------------enableSorting : true可以在columnDefs里面設(shè)置相應(yīng)的排序順序和優(yōu)先級sort: {direction: uiGridCounstants.DESC, //降序排序，ASC是升序排序priority: 0 //優(yōu)先級設(shè)置}還可以設(shè)置sortingAlgorithm函數(shù)自定義排序算法的規(guī)則，不設(shè)置就根據(jù)ui-grid自己的排序規(guī)則看 //----------------選擇--------------------------------enableRowHeaderSelection: true, //是否顯示選中checkbox框 ,默認(rèn)為truemultiSelect:true, //多行選擇，默認(rèn)為trueenableCheckNum: true, //checkNum: '(0)' //上面屬性設(shè)置為true時(shí)，該屬性顯示的是選擇列的個(gè)數(shù)enableSelectionBatchEvent : true, //默認(rèn)trueisRowSelectable: function(row){ //GridRowif(row.entity.age > 45){row.grid.api.selection.selectRow(row.entity); // 選中行}}

報(bào)錯(cuò)

TypeError: angular.element(…).parents is not a function

angularJS需要jquery的支持,在angular前面引入jQuery

cellNav的解釋

cellNav：cellNav的目的是用戶可以選擇一個(gè)單元格，然后使用鍵盤在網(wǎng)格中移動(dòng)
custom editors:只有在enter,shift+enter,tab,shift_tab這些鍵觸發(fā)的時(shí)候才能進(jìn)行觸發(fā)cellNav模式
deep edit: 當(dāng)編輯子段獲得焦點(diǎn)但是并沒有進(jìn)入編輯模式的時(shí)候，仍然允許使用左/右鍵使用cellNav.
因此deep edit近似于 editOnFocus 的折中方案
editOnFocus：選中單元格立即可編輯

行列處理器的重點(diǎn)是排序和確定列和行的可見性。
包括：排序和篩選（影響行的順序和可見性）
分組行（添加額外的行，更改列的順序和寬度）
固定（pinning）

cellNav:
注入： ‘ui.grid.cellNav’
在columnDefs上面為某一列定義

{ name: 'age', displayName: 'Age (not focusable)',allowCellFocus : false, width:'100' },

獲取當(dāng)前得到焦點(diǎn)的單元格 var rowCol = vm.gridApi.cellNav.getFocusedCell();

可以通過 rowCol.row.entity.屬性 和 rowCol.col.colDef.屬性 獲取一些相應(yīng)的值

獲取當(dāng)前選擇的單元格 currentSelection = vm.gridApi.cellNav.getCurrentSelection();

是不是鍵盤讀取事件需要自己判斷的？

vm.gridOptions.onRegisterApi = function(gridApi){vm.gridApi = gridApi;gridApi.cellNav.on.navigate($scope, function(newRowCol, oldRowCol) {// var rowCol = {row: newRowCol.row.index, col:newRowCol.col.colDef.name};// var msg = 'New RowCol is ' + angular.toJson(rowCol);// if(oldRowCol){// rowCol = {row: oldRowCol.row.index, col:oldRowCol.col.colDef.name};// msg += ' Old RowCol is ' + angular.toJson(rowCol);// }$log.log('navigation event');});gridApi.cellNav.on.viewPortKeyDown($scope, function(event, newRowCol) {var row = newRowCol.row,col = newRowCol.col;if (event.keyCode === 39) {vm.gridApi.cellNav.scrollToFocus(row.entity, vm.gridApi.grid.columns[vm.gridApi.grid.columns.length - 1]);}});};

總結(jié)

以上是生活随笔為你收集整理的[AngularJS] 插件ui-grid使用说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。