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

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]);}});};