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

基礎指令

• 對表格進行操作

命令解釋

ui-gird-pagination	分頁指令
ui-grid-selection	選擇
ui-grid-selection	選擇行
ui-grid-exporter	導出
ui-grid-auto-resize	解決grid布局 自動適應div 高度和寬度問題

• 對列進行操作

命令解釋

ui-grid-resize-columns	列寬拉伸指令
ui-grid-move-columns	列移動指令
ui-grid-resize-columns	保存當前表格的一些狀態（非數據，但是需要保存的相關數據必須有對應的值）
ui-grid-pinning	固定列

• 對單元格進行操作

命令解釋

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

• 其他

命令解釋

過濾	filter
排序	sort

JS參數

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

報錯

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

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

cellNav的解釋

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

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

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

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

獲取當前得到焦點的單元格 var rowCol = vm.gridApi.cellNav.getFocusedCell();

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

獲取當前選擇的單元格 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]);}});};

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。