ui-grid 常用操作

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

html:

<div class="panel-body">
	<div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination ui-grid-resize-columns ui-grid-auto-resize>
		<ui-grid-tip total="gridprogram.totalItems"/>
	</div>
</div>

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();