[AngularJS] 插件ui-grid使用说明

最新推荐文章于 2025-06-08 09:01:50 发布

优雅1217

最新推荐文章于 2025-06-08 09:01:50 发布

阅读量5.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： AngularJS ui-grid

本文链接：https://blog.csdn.net/baidu_36065997/article/details/90812187

AngularJS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了AngularJS插件ui-grid的使用，包括基础指令、JS参数设置以及解决报错问题。重点讲解了cellNav特性，如cellNav的目的、custom editors、deep edit和editOnFocus模式，以及如何获取当前选中和聚焦的单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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, //是否分页，默认为true
       paginationPageSizes: [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框 ,默认为true
  multiSelect:true,  //多行选择，默认为true
  enableCheckNum: true,  //
  checkNum: '(0)'  //上面属性设置为true时，该属性显示的是选择列的个数
  enableSelectionBatchEvent : true, //默认true
  isRowSelectable: function(row){ //GridRow
	   if(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]);
          }
        });
     };