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, //行选择是否可用，默认为trueenableSelectAll: true, //选择所有checkbox是否可用，默认为truemultiSelect: true,//是否可以选择多个，默认trueselectionRowHeaderWidth: 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();