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

ui-grid 常用操作相关推荐

au3 ui html,AutoIt UI及常用操作
@[TOC] [还有视频讲解在我的B站-宝哥chbxw](https://www.bilibili.com/video/BV1Ga4y1Y7C4/), 希望大家可以支持一下,谢谢. # 前言之分层 A ...
Kendo UI Grid 用法详细整理
目录一. kendo UI grid结构结构实例二. kendo UI grid常用属性 1.new kendo.data.DataSource()中常见属性: 2.$("#grid& ...
ui设计师常用的设计工具_2020年应该使用哪个UI设计工具？
ui设计师常用的设计工具重点 (Top highlight) It's 2020, the market today is saturated with UI design tools. Ever ...
Altium Designer(AD18)常用操作和快捷方式
目录 Altium Designer(AD18)常用操作和快捷方式简单操作分层设计原理图库 PCB库集成库 PCB绘制覆铜 Altium Designer(AD18)常用操作和快捷方式简单 ...
UI设计师常用什么工具怎么用AE导出GIF动画
UI设计师常用什么工具?怎么用AE导出GIF动画?AE是当前UI设计师比较常用的工具之一,是一款图形视频处理软件,然而它并不能直接导出GIF格式的图片,这让很多设计师很是苦恼.接下来就给大家分享AE导 ...
arcgis弧段怎么加很多点_ArcGIS常用操作技巧大汇总
原标题:ArcGIS常用操作技巧大汇总 1.影像格式的转换例如把jpg格式转换为tiff格式.可以在arctoolbox中的conversiontools-->to Raster-->R ...
软件测试|测试开发之路--UI 自动化常用设计模式
接上一次的帖子,今天讲一下我再 UI 自动化中常用的设计模式. 由于网上已经有非常多的文章详细讲解了设计模式的编码实现,所以我今天也就不讲实现细节了. 就是讲我也讲不出什么花来,只是网上的文章基本都是 ...
sqlite常用操作
sqlite常用操作一.数据库简介二.Sqlite数据库三.创建数据表四.删除数据表五.向数据表插入数据六.从数据表中删除数据七.修改数据表中已存在的数据八.查询数据表中的数据九.Q ...
AD18的常用操作及快捷键
本篇转自https://blog.csdn.net/Britripe/article/details/83855270#commentsedit 目录 Altium Designer(AD18)常用操 ...
核心要素及常用操作详解
核心要素及常用操作详解 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5z6s4kZN-1678660733651)(http://49.7.203.222:3000/ ...

ui-grid 常用操作

ui-grid 常用操作相关推荐

最新文章

热门文章