[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, //是否分页，默认为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]);
}
});
};