ui-grid 常用操作

这是一个表格控件，官网地址为： http://ui-grid.info/docs/#/tutorial

html:

js:

var myHeaderCellTemplate = '

编辑

'; $scope.gridOptions = { enableRowSelection: true, //行选择是否可用，默认为true enableSelectAll: true, //选择所有checkbox是否可用，默认为true multiSelect: true,//是否可以选择多个，默认true selectionRowHeaderWidth: 35,//设置选择列的宽度 rowHeight: 35, showGridFooter: false, useExternalPagination: true, //是否使用分页按钮 paginationPageSizes: [10, 20, 30], paginationPageSize: 10, //每页的记录数 enableHorizontalScrollbar: 0,//是否使用横向滚动条，0.不使用，1.使用 onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; //方便使用gridApi的方法、属性等 //分页触发的函数 gridApi.pagination.on.paginationChanged($scope, function(pageNumber, pageSize) { currentPage = pageNumber; currentPageSize = pageSize; // 获取当前页数据 getPage(pageNumber, pageSize); }); //行选中事件 gridApi.selection.on.rowSelectionChanged($scope, function(row) { //row.isSelected返回该行是否选中 }); }, enableSorting: false, columnDefs: [{ field: 'name', name: '名称', width: '120', enableColumnMenu: false, // 是否显示列头部菜单按钮 }, { field: "uuid", width: '**', name: '操作', enableColumnMenu: false, cellTemplate: myHeaderCellTemplate //自定义该列的显示 }] };

// 给表格赋值

$scope.gridOptions.data = []; 
$scope.gridOptions.totalItems = 10;

---------------------------页操作----------------------------

1. 获取当前页码：$scope.gridApi.pagination.getPage()

2. 获取总页码：$scope.gridApi.pagination.getTotalPages()

3. 跳转到第2页：$scope.gridApi.pagination.seek( 2 )

4. 前一页：$scope.gridApi.pagination.previousPage()

5.下一页：$scope.gridApi.pagination.nextPage()

----------------选择操作-ui-grid-selection---------------------------

1.获取选中的行：$scope.gridApi.selection.getSelectedGridRows()

2.取消所有选中的行：$scope.gridApi.selection.clearSelectedRows();