首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >AG Grid:如何将滚动放在底部

AG Grid:如何将滚动放在底部
EN

Stack Overflow用户
提问于 2019-03-24 20:32:29
回答 1查看 3.1K关注 0票数 1

我正在使用AG grid Angular创建一个日志视图,我将每秒向网格中添加许多条目,通常这种类型的视图底部有最新的条目,所以如果有一种好的方法可以让滚动停留在底部,这样我总是可以看到最新的条目,那就太好了。一个奖励将是,如果我可以手动向上滚动,滚动将停留在这个位置。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-19 23:03:00

这里有一种方法:

在标记中处理rowDataChanged

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ag-grid-angular
  class="ag-dark"
  [rowData]="messages"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (bodyScroll)="handleScroll($event)"
  (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

rowDataChanged的处理程序中,调用ensureVisibleIndex滚动到添加的最后一行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  gridOptions: GridOptions = {
    suppressScrollOnNewData: true,
  }
  handleRowDataChanged(event) {
    const index = this.messages.length - 1;
    this.gridOptions.api.ensureIndexVisible(index, 'bottom');
  }

演示:https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

在该代码中,还存在一些逻辑,即何时根据滚动位置将表格滚动到末尾。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55328287

复制
相关文章
ag-grid 学习
项目要将 angular 从 1.5升级到 5,ui-grid 在 5 中并不支持,所以为了替换 ui-grid ,来学习了 ag-grid 。
全栈程序员站长
2022/09/20
2.7K0
ag-grid 学习
我是如何爱上ag-grid框架的
与每个管理系统一样,我们需要选择一个网格来显示我们的数据,而我的前任已经在应用程序中使用了两个网格 -  ag-Grid(v2.7)和Ng-Table(v0.8.3) - 我热情地讨厌前者。回想起来,我意识到我只讨厌它,因为我的前任缺乏对AngularJS 1.x的了解。因此诞生了网格项目。
Jean
2018/12/14
6.2K0
我是如何爱上ag-grid框架的
ag-grid 设置单元格以及行的颜色「建议收藏」
在使用ag-grid的时候有通过单元格的值设置不同行颜色,然后百度了网上的方法,汇总了一下,具体效果图如下:
全栈程序员站长
2022/09/14
3.6K0
ag-grid 设置单元格以及行的颜色「建议收藏」
ag-grid设置选中单行多行及获取选中行数据
ag-Grid 是比较实用的数据表格组件,最近接触到了相关的项目,简单记录一下设置选中单行多行和获取选中行数据的方法。
德顺
2022/09/30
2.8K0
vue 隐藏滚动条_vue滚动条自动滚动到底部
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/17
3.6K0
uni-app h5 吸底部,滚动固定底部css
需要用到h5得position新属性 sticky。主要是uni-app,其中变量--window-bottom是uniapp得预定义变量。目的是底部空出tabbar的高度。 css如下:
xiny120
2020/03/20
5K0
js检测滚动条到底部
$('#content-zone').scroll(function(){     if (this.scrollTop+$(this).height()+4>this.scrollHeight){         var  page = parseInt($('#page').val());         var  page_num = parseInt($('#page_num').val());         if(page<page_num){             get_message(p
仙士可
2019/12/17
9.4K0
ag-grid设置选中单行多行及获取选中行数据
ag-Grid 是比较实用的数据表格组件,最近接触到了相关的项目,简单记录一下设置选中单行多行和获取选中行数据的方法。
德顺
2023/08/25
1.2K0
判断浏览器窗口滚动到最底部
首先是昨天我们说的vue中绑定@scroll事件,别忘了加对应的高度,以及检查overflow-y:
阿超
2022/08/21
8640
安卓使ScrollView滚动到底部代码
scrollView.fullScroll(ScrollView.FOCUS_DOWN);滚动到底部
全栈程序员站长
2022/07/15
1.1K0
滚动条判断是否滑动到顶部底部
/** * [滚动条] */ $(window).scroll(function() { var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度 console.log("滚动条距离顶部的高度-->" + scrollTop); var scrollHeight = $(document).height(); // 当前页面的总高度 console.log("
ProsperLee
2018/10/24
2.8K0
微信小程序 scroll-view 滚动至底部
        需求是对话列表收到新消息后,需要自动将 scroll-view 滚动至底部显示最新对话消息。         使用 wx.createSelectorQuery().select('#viewId').boundingClientRect 方式获取高度时,发现数据更新后并不能获取最新view 高度,而是再次手动滑动至底部后 rect 对象内包含的 bottom / height 数值才会更新,当然了,这样小伙伴无法愉快的玩耍,随使用另一种方法,即 scroll-view 的标签 scro
码脑
2019/04/11
3K0
微信小程序 scroll-view 滚动至底部
7b2美化-手机菜单页底部添加滚动播报
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
5020
7b2美化-手机菜单页底部添加滚动播报
[vuejs] 聊天框在overflow:auto中填数据时滚动到底部
在一个聊天的界面中 , 当我们固定了高度 , 并且设置了overflow:auto ,会出现滚动条 , 但是填充数据后 ,滚动条是不会跟着滚,数据隐藏在下面
唯一Chat
2020/06/11
7680
[vuejs] 聊天框在overflow:auto中填数据时滚动到底部
Ext实现滚动条一直处于底部的方法
在我们的实际开发应用中,经常会使用到ext的常用控件textarea。对于一些form表单,录入信息的备注,简介等等信息较多的时候就会使用的textarea。最近在所一个全网拓扑图的时候,以及网络诊断ping,telnet连接测试等等功能的时候,出现了一些比较辣手的问题。就是通过ajax请求后台数据后,把新数据动态的显示到textarea中,textarea的滚动条不会定位到最底部。始终显示在top的位置。经过研究发现,ext对自身的textarea进行了封装,使用table布局。我们根据getCmp()方法获取的控件对象实际上是一个table,这是我们在对table设置它的scrollTop和获取它的scrollHeight属性都会失败。而我们真正需要的是textarea本身,而不是它的父组件table。
业余草
2019/01/21
1.1K0
WordPress集成底部滚动推荐条,让好文章不再被埋没
最新消息:目前该功能张戈博客已推出 WordPress 插件,欢迎安装使用!详细介绍=>> 这个功能最开始叫底部滚动公告条,部分 WordPress 主题集成自带,比如知更鸟主题。主题没集成的还可以使用万戈牌公告栏插件来实现这个功能。不过以往插件或主题集成的公告栏功能都只会滚动公告,即后台会有一个公告撰写栏,可以编辑数条公告然后在前台底部滚动显示。 最开始,张戈博客也是用了知更鸟主题特有的公告功能来发布一些公告,后来在我折腾中国博客联盟展示导航的时候,发现原来要实现滚动其他内容也是非常简单的! 因此,我就将
张戈
2018/03/23
1.5K0
如何将操作按钮悬浮固定在微信小程序底部?
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助。 常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 以收货地
林老师带你学编程
2019/05/26
5.5K0
微信小程序 picker-从底部弹起的滚动选择器
效果图 官方文档链接 wxml <view>普通选择器:请选择选项</view> <!-- mode默认值selector 普通选择器 range数据源(mode 为 selector 或 multiSelector 时有效) value表示选择了数据源中的第几个值(下标从0开始) bindchange事件value改变时触发 --> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="chan
peng_tianyu
2022/12/15
1.1K0
微信小程序 picker-从底部弹起的滚动选择器
摸鱼的新发现,滚动条无限滚动
上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示:
小丑同学
2020/09/21
1.9K0
点击加载更多

相似问题

Ag-grid:无限滚动不工作

12

AG-Grid获得无限滚动的页码

11

ag- Grid -community vs ag-grid-enterprise new Grid

15

如何将按钮放在滚动视图的底部

23

ag-Grid中的滚动条编辑?

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文