angularjs – Angular ui-grid表,客户端分页和滚动
发布时间:2020-12-17 17:31:54 所属栏目:安全 来源:网络整理
导读:我正在尝试将一个小项目从 jquery移植到angularjs.我使用DataTables绘制从我的虚拟机收到的诊断数据,这是一个例子: DataTables可以轻松地对数据进行分页,这样做的好处是在导航时不会捕获鼠标滚动,这是当您的页面包含大量表格时的最佳解决方案.我现在正尝试
我正在尝试将一个小项目从
jquery移植到angularjs.我使用DataTables绘制从我的虚拟机收到的诊断数据,这是一个例子:
DataTables可以轻松地对数据进行分页,这样做的好处是在导航时不会捕获鼠标滚动,这是当您的页面包含大量表格时的最佳解决方案.我现在正尝试使用angular-ui中的ui-grid做同样的事情,但是ng-grid中存在的分页选项不再存在(或者至少我无法找到它们). 有没有办法使用ui-grid进行客户端分页?有没有办法避免在不需要滚动表格时捕获鼠标滚动?如果不是,我只需要切换回ng-grid. 解决方法
所以我无法详细解释每一步,但这是我开始工作的方式:
为您的模块添加分页依赖项 var app = angular.module('app',['ui.grid','ui.grid.pagination']); 在Controller Disable Scrollbars中并设置rowsPerPage: $scope.gridOptions.enableScrollbars = false; $scope.gridOptions.rowsPerPage = 15; 不要忘记注册API(也在Controller中): $scope.gridOptions.onRegisterApi = function (gridApi) { $scope.gridApi = gridApi; } 将ui-grid-pagination-Directive添加到您的表中 <div ui-grid="gridOptions" ui-grid-pagination class="grid" external-scopes="$scope"></div> 现在在HTML-Partial中添加按钮(我使用了Fontawesome和Bootstrap,但你不必这样做): <button type="button" class="btn btn-default" ng-click="gridApi.pagination.previousPage()"> <span class="fa fa-angle-left"></span> </button> <span>Page: {{ gridApi.pagination.getPage() }}</span> <span>/ {{ gridApi.pagination.getTotalPages() }}</span> <button type="button" class="btn btn-default" ng-click="gridApi.pagination.nextPage()"> <span class="fa fa-angle-right"></span> </button> 而已! 嘿,刚刚在消息来源中找到了另一种方法: gridApi.pagination.seek(page); 还想提一下,我使用的是ui-grid v3.0.0-rc.12 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- angular5 – ngx-webcam用于特定视图和分量角6
- AngularJS $如何在ng-repeat中观察这些情况?
- axis 开发webservice
- unix – 为什么OpenSSH RequestTTY导致stderr重定
- 4.14、Bootstrap V4自学之路-----组件---分页
- active-directory – 主目录服务器的模式有什么不
- 使用templateUrl的angular2动态组件的“无法读取
- WebSocket 三、聊天室 实例(Angular 5、C#)
- Scala IDEA:sbt和fsc的优点和缺点
- 在Angular2 rc4中为输入类型=日期使用自定义Cont
热点阅读