开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

加载数据后自动滚动jqgrid

是指在使用jqGrid插件进行数据表格展示时，当数据加载完成后自动滚动到指定位置的功能。

jqGrid是一款基于jQuery的强大的表格插件，可以实现对数据的展示、排序、分页、搜索等功能。在加载数据后自动滚动jqGrid的场景中，通常是在数据加载完成后，将表格滚动到指定的行或列，以便用户能够方便地查看到加载的数据。

这个功能的实现可以通过以下步骤进行：

首先，需要在页面中引入jQuery和jqGrid的相关文件，确保插件能够正常加载。
在HTML页面中创建一个div元素，用于容纳jqGrid表格。
在JavaScript代码中，使用jqGrid的相关API进行表格的初始化和配置。可以设置表格的列名、数据源、分页等参数。
在数据加载完成后的回调函数中，通过jQuery的scrollTop()方法将表格滚动到指定位置。可以使用该方法将滚动条滚动到指定的行或列。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>加载数据后自动滚动jqGrid</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
</head>
<body>
    <div id="gridContainer"></div>

    <script>
        $(function() {
            // 初始化jqGrid表格
            $("#gridContainer").jqGrid({
                url: "data.json", // 数据源URL
                datatype: "json", // 数据类型
                colNames: ["ID", "姓名", "年龄"], // 列名
                colModel: [
                    { name: "id", width: 50 },
                    { name: "name", width: 100 },
                    { name: "age", width: 50 }
                ],
                rowNum: 10, // 每页显示的记录数
                rowList: [10, 20, 30], // 每页显示记录数的下拉列表
                pager: "#gridPager", // 分页控件的ID
                loadComplete: function() {
                    // 数据加载完成后滚动到指定位置
                    var targetRow = 5; // 指定的行号
                    var targetPosition = $("#gridContainer").find("tr:eq(" + targetRow + ")").position().top;
                    $("#gridContainer").parent().scrollTop(targetPosition);
                }
            });
        });
    </script>
</body>
</html>

在上述示例代码中，通过设置loadComplete回调函数，在数据加载完成后获取指定行的位置，并使用scrollTop方法将表格滚动到该位置。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器，可满足各种规模和需求的应用程序。详情请参考：腾讯云云服务器
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端对象存储服务，适用于存储和处理各种类型的数据。详情请参考：腾讯云对象存储

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

让Form在加载后自动获得焦点

需求加载后让第一个输入框或者焦点是个很基本的功能，典型的如“登录”对话框。...一般来说“登录”对话框加载后“用户名”应该马上获得焦点，用户只需输入用户名，点击Tab，再输入密码，点击回车就完成了登录操作。...在WPF中要让一个控件在加载时获得焦点应该很简单，只需要在Loaded事件后调用Focus()就行了。...FocusNavigationDirection.Next); element.MoveFocus(request); } 上面是FocusService的代码，它使用IsAutoFocus这个附加属性控制是否自动获得焦点...VisualStudio的设计器真的十分强大，但有时又会因为程序的数据没准备好或各种原因而报错，如果遇到设计器的错误又不想处理具体原因可以考虑简单粗暴地使用DesignerProperties.GetIsInDesignMode

1.6K4 0

Intellij如何设置编译后自动重新加载class文件？

前段时间突然发现Intellij不能自动重新加载类了，每次编译后都要重新启动项目，才能显示更新效果，后来网上查询Intellij下如何配置热部署，都说是要配置构件，然后在web容器的编辑页面选择...update resources and classes什么的，尝试后发现每次类是重新加载了，但是项目会自动重启一下，没解决我的问题。...Intellij的项目配置界面捣鼓，终于找到了方法，就是在Debugger配置节点下的HotSwap节点中找到 Reload classes after compilation选项，选择Ask即可，这样每次编译后，...就会提示你是否要重新加载classes，选择"是"就会自动reload classes，大部分情况下，修改类文件，就不需要重启了。

2.3K3 0

Druid 加载 Kafka 数据后查询和清理数据

查询你的数据当数据发送到 Kafka 后，Druid 应该能够马上查询到导入的数据的。请访问 query tutorial 页面中的内容来了解如何针对新导入的数据运行一些查询。...这是因为本教程中其他的导入数据方式也会写入相同的 “wikipedia” 数据源，如果你使用不同的数据源的话就不需要进行清理了。同时你可能也希望清理掉 Kafka 中的数据。

5300 0

vue.js中滚动条加载更多数据

scrollTop为滚动条在Y轴上的滚动距离。　　clientHeight为内容可视区域的高度。　　scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。　　...从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。（兼容不同的浏览器）。...在vue的页面组件中有一个created　时期，在这里给窗口加上窗口滚动的监听例： ?...，取一条数据，即第三条数据读取，一二条跳过 ②是从数据库中的第二条数据开始查询两条数据，即第二条和第三条。...将新查询到的结果添加到之前在页面中渲染的数组，这样就可以实现瀑布流加载注：为了美观，如果使用一些loading及loadmore组件给用户一个等待的缓冲，一定要特别注意让这些组件显示的时机的条件最后

4.9K3 0

PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载…

这个效果好，速度快，只能点击更多加载，不能滚动自动加载一、HTML部分引入jQuery插件和jquery.more.js加载更多插件 </script...echo json_encode($sayList); jquery.more.js相关API 参数描述默认值 amount 每次显示记录数 10 address 请求后台的地址 – format 数据传输格式...json template html记录DIV的class属性 .single_item – trigger 触发加载更多记录的class属性 .get_more – scroll 是否支持滚动触发加载...false offset 滚动触发加载时的偏移量 100 七，源码下载链接: https://pan.baidu.com/s/1x5wRisLRxAIpuQUSkO0BOg 提取码: qya7

3.9K5 0

JqGrid实现超长水平（左右）滚动条功能

使用JqGrid来实现列表功能非常方便快捷，但在使用的过程中还会遇到一些定制化的问题。这篇文章来跟大家说一下当列表中数据比较多时，如何实现水平（左右）滚动来确保能够查看完整的信息。...下面贴一下简单的示例代码： $(function () { $("#jqGrid").jqGrid({ url: baseURL + 'biz/message/list',...; }); 默认情况下没有开启水平滚动条，无论有多少字段，都会显示在这一屏，字段比较少时无影响。...如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth。了解了这两个属性的值之后，我们就可以对上面的代码进行重新修改，以满足需求。...在上述实例中，针对列表还展示了formatter对应函数用来格式化具体数据项的操作，大家也可以进行参考。

3.6K1 0

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据，在当下已经用的很普遍，尤其是我们在做网上商城时，在产品列表页面已经被普遍使用。..., //ajax请求的页码值 url = 'xxxx', //ajax请求地址 on_off = true; //插入结构的开关，防止ajax错误性多次加载数据...data.length, n = 0; for (; n < len; n++) { /*每次都将数据加载到高度最小的...li.eq(2).height()]) + $target.offset().top; }, loadedTips: function () { //数据加载完毕...$('#loadTips').find('span').text('数据已加载完'); setTimeout(function () {

3K2 0

简易数据分析 10 | Web Scraper 翻页——抓取「滚动加载」类型网页

我们在刷朋友圈刷微博的时候，总会强调一个『刷』字，因为看动态的时候，当把内容拉到屏幕末尾的时候，APP 就会自动加载下一页的数据，从体验上来看，数据会源源不断的加载出来，永远没有尽头。...1.制作 Sitemap 刚开始我们要先创建一个 container，包含要抓取的三类数据，为了实现滚动到底加载数据的功能，我们把 container 的 Type 选为 Element scroll...down，就是滚动到网页底部加载数据的意思。...为了复习上一节通过数据编号控制条数的方法，我们在元素名后加个 nth-of-type(-n+100)，暂时只抓取前 100 条数据。...5.吐槽时间爬取知乎数据时，我们会发现滚动加载数据那一块儿很快就做完了，在元素匹配那里却花了很多时间。这间接的说明，知乎这个网站从代码角度上分析，写的还是比较烂的。

2.3K2 0

自动切换无法加载的静态资源，预防 CDN 挂掉后网站故障

这样就可以保证在可以使用 cdn 的时候，如果 cdn 不可以使用，就加载本地的资源。

1.2K4 0

js实现页面加载后自动刷新一次,仅一次

博客开启PJAX局部刷新或Ajax导致文章的代码高亮插件第一次加载不会引用高亮模块需要再刷新一次,那么这段代码可以帮助你在加载完成后自动刷新一次,就解决了这个问题...

3.2K2 0

使用ztree.js，受益一生，十分钟学会使用tree树形结构插件

当然了有能力的关系，也有插件易用度的关系最近要实现的功能用tree树形结构来做是最好的，就是资源的分配，来简单讲讲ztree吧，这是目前国内很火的一个插件，百度一下就能了解，使用起来十分简单小编我用过3年的jqgrid...，在此还是要再次感谢当年的王组让我去跟jqgrid深入浅出，多用了jqgrid后，再看ztree，那就十分简单了，不知道ztree作者是否也参考过jqgrid 首先你需要引入js以及css吧 ?...然后你需要定义一个id="treePermission"，这点和jqgrid一样 ? 定义一下数据结构和基本配置 ? ?...zNodes是初始化的静态数据，可以不用，这里为了方便贴了出来，初始化的时候放入$.fn.zTree.init($("#treePermission"), setting, zNodes);即可这是官网的...znodes我没有使用，在初始化的时候会预先加载根目录，然后点击再次加载子目录 ? ? 好了，调用后就直接可以使用了，非常简单，还有一些简单配置请参考官网吧~ ?

1.7K4 0

想获取JS加载网页的源网页的源码，不想获取JS加载后的数据

一、前言前几天在Python钻石交流群【梦】问了一个Python网络爬虫的问题，这个网站不知道使用了什么反爬手段，都获取不到页面数据。...不过这里粉丝的需求有点奇怪，他不需要JS加载后的数据页面，而是需要JS的源网页。昨天在群里又讨论起这个问题，这次一起来看看这个问题。...二、实现过程这里【瑜亮老师】指出异步页面中，标签和数据都是不在页面源码中的。你的这个页面，数据在json，然后js拼装后显示在页面中。...如果你想要获取你说的带标签的源码，可以使用自动化模块，例如：selenium（不建议用这个），playwright，drissionpage。...先渲染再获取就有了，再者说，你的目的肯定是只要这页面上的表格，表格就是json，获取json链接比获取渲染后的网页方便多了。

791 0

想获取JS加载网页的源网页的源码，不想获取JS加载后的数据

一、前言前几天在Python钻石交流群【梦】问了一个Python网络爬虫的问题，这个网站不知道使用了什么反爬手段，都获取不到页面数据。...不过这里粉丝的需求有点奇怪，他不需要JS加载后的数据页面，而是需要JS的源网页。昨天在群里又讨论起这个问题，这次一起来看看这个问题。...二、实现过程这里【瑜亮老师】指出异步页面中，标签和数据都是不在页面源码中的。你的这个页面，数据在json，然后js拼装后显示在页面中。...如果你想要获取你说的带标签的源码，可以使用自动化模块，例如：selenium（不建议用这个），playwright，drissionpage。...先渲染再获取就有了，再者说，你的目的肯定是只要这页面上的表格，表格就是json，获取json链接比获取渲染后的网页方便多了。

621 0

vuejs中使用axios时如何实现滑动滚动条来动态加载列表数据

前言在vuejs中，我们经常使用axios来请求数据，但是有时候，我们请求的数据量很大，那么我们如何实现滑动滚动条来加载数据呢？...，距离顶部的距离,获取变量scrollHeight是滚动条的总高度,获取变量clientHeight是滚动条可视区域的高度当滚动条到达底部，并且距离底部小于10px时，加载数据，也就是请求axios数据...,页码++,重新加载数据函数为了防止用户频繁触发下拉滑动滚动条,往往需要添加一个函数防抖,在指定的时间内,只执行最后一次事件处理函数,避免频繁请求数据,给服务器造成压力代码实现 ...，并且距离底部小于10px时，加载数据 if (scrollTop + clientHeight - scrollHeight <= 10) { page.value++;...，因为涉及到异步请求，所以需要判断数据是否加载完毕还要判断是否最后一页，还要判断是否还有数据，还要判断是否需要提示用户没有更多数据了，所以代码量还是挺多的，但是写完之后，感觉还是挺有成就感的。

3065 0

页面回发后，让页面自动滚动到指定位置的一种简单的方法

就是当用户按一个按钮后，希望回发后的页面滚到一个指定的位置，而不是页面的开头部分。...博克园里的“最新评论”里的链接，点击后打开的页面会直接滚动到指定的评论而不是帖子一开始的位置。...代码，发现有这一类的标签原来奥秘就在 name="001"这里，在这里作一个“标记”，然后单击这个连接的时候就会自动滚动到这里...很简单，在页面加载完毕之后执行这个js语句就可以了 document.getElementById("a001").click(); 等等，并不是每一次看这个页面都要自动滚动者这个标签上呀，

3.1K7 0

问与答73：如何实现录入后自动更新数据？

每天我打开工作簿后，在“表1”中的单元格C2中录入数据，这个数据会自动更新到“表2”与对应的日期相应的单元格中，其中“表1”中单元格A2我设置了公式=TODAY()，以便每天打开工作簿时，自动更新日期。...图2 A：我们利用工作表的Change事件来实现数据的自动更新。...赋值工作表变量 Set wksData= Worksheets("表2") '当前单元格所在的行号 lngCurRow =Target.Row '工作表wksData中最后一行数据的行号...lngLastRow= wksData.Range("A" & Rows.Count).End(xlUp).Row '更新数据 If Range("A" & lngCurRow...'Range("A" &lngCurRow).EntireRow.Delete End If End If End Sub 此时，再在工作表“表1”中输入数据

1.4K2 0

jQuery 表格插件汇总

Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。 ? ?...多列排序，自动探测数据类型，智能列宽，可从几乎任何数据源获取数据。 ? ?...jqGrid Plugin - 基于 Ajax 的 jQuery 表格插件，可以 Ajax 方式从服务器端获取数据填充进来（演示）。 ? ?...Table Drag and Drop - 通过拖放，对表格中的数据重新排列，可以设置禁止拖放的行。 ? ? Table Pagination - 在表格下方自动生成分页导航。 ? ?...HeatColor - 根据规则，或自动对表格中的值进行分析，对不同范围的值按不同颜色区分。 ? ? Fixed Header Table - 固定表头可滚动表格 ? 表格搜索，筛选 ?

7.3K1 0

打印流水号条码后自动更新数据

小编下面就详细介绍流水号条码打印完成后如何自动更新数据。　　首先打开条码标签软件，新建一个标签并设置标签的尺寸，需要注意的是标签的尺寸要和打印机里的标签纸的尺寸保持一致。...在数据来源处选择“流水号”。 01.png 　　点击编辑，选择流水号设置。...04.png 　　打印完成后，可以在预览界面看到标签的号码变成了0004，说明刚才打印了三张，再次打印就从第四个号码开始打印。...我们从预览处可以看到三个标签的数据都是0004，这是因为打印机只有打印了，条码数据才会发生变化。 05.png 　　回到软件，画布上的标签号码也变化了，这样每次打开文件，都是从最新的号码开始打印。...06.png 　　以上就是流水号条形码打印完成后自动更新数据的操作方法，将文件保存起来，下次打开该文件，设置好打印数量就可以直接打印了。

6153 0

在 ASP.NET Core 中修改配置文件后自动加载新的配置

在 ASP.NET Core 中修改配置文件后自动加载新的配置在 ASP.NET Core 默认的应用程序模板中，配置文件的处理如下面的代码所示： config.AddJsonFile( path...{env.EnvironmentName}.json 两个配置文件都是可选的，并且支持当文件被修改时能够重新加载。...可以在 ASP.NET Core 应用中利用这个特性，实现修改配置文件之后，不需要重启应用，自动加载修改过的配置文件，从而减少系统停机的时间。...通过这种方式注册的内容，都是支持当配置文件被修改时，自动重新加载的。...在控制器 (Controller) 中加载修改过后的配置控制器 (Controller) 在 ASP.NET Core 应用的依赖注入容器中注册的生命周期是 Scoped ，即每次请求都会创建新的控制器实例

2.4K7 1

常用js，css文件统一加载方法，并在加载之后调用回调函数

为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。...document.getElementsByTagName("head")[0].appendChild(css); cssCount++; } /** * 添加 js加载完后执行回调函数..."cjqgrid": "javascript/libs/jqgrid/ui.jqgrid.css", "jqgridcn": "javascript/libs/jqgrid/grid.locale-cn.js...", "jqgrid": "javascript/libs/jqgrid/jquery.jqGrid.js", // common "ccommon": "css/common.css...为了显示美观在所有布局完成之间body设置visibility为hidden，布局完成后显示出来。

3.5K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭