jqgrid自动滚动

yandiyu 2013-12-16 03:55:20

页面中有个jqgrid表格，但是需要它自动滚动，在网上查到一个参数“scroll”可以创建动态滚动表格，但是不知道怎么用，有高手知道怎么搞吗？

...全文

514 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_24859323 2016-08-25

打赏
举报

引用 11 楼 duoyunan 的回复:

版主和楼主的代码很精辟，刚好受用，实现了当某事件产生直接滚动到数据表某一行的功能，谢谢！

可以分享一下吗?谢谢

duoyunan 2016-08-18

打赏
举报

版主和楼主的代码很精辟，刚好受用，实现了当某事件产生直接滚动到数据表某一行的功能，谢谢！

chenjianhuacool 2014-09-14

打赏
举报

请参考jqGrid中文demo:http://blog.mn886.net/jqGrid/

Go 旅城通票 2013-12-19

打赏
举报

可以重复滚动，不过有个小bug，忘记减去容器高度了，要空等待一段时间。。参考：jqgrid自动滚动数据内容demo

yandiyu 2013-12-19

打赏
举报

就是滚动加载的那一行数据

yandiyu 2013-12-19

打赏
举报

引用 5 楼 showbo 的回复:

jQuery("#grid").jqGrid({////////// gridComplete: function () { var div = $('#grid').closest('.ui-jqgrid-bdiv')[0]////////////// , scrollHeight = div.scrollHeight, scrollTop = 0; var timer= setInterval(function () { scrollTop += 5; div.scrollTop = scrollTop; if (scrollTop >= scrollHeight) scrollTop=0;//设置滚动头为0，重新开始就行了 }, 100); },

这个我试了，不行，之后我看了下，这个滚动是数据每加载一行，滚动此行行，然后再加载下一行，在滚动此行，依此类推。

Go 旅城通票 2013-12-19

打赏
举报

jQuery("#grid").jqGrid({////////// gridComplete: function () { var div = $('#grid').closest('.ui-jqgrid-bdiv')[0]////////////// , scrollHeight = div.scrollHeight, scrollTop = 0; var timer= setInterval(function () { scrollTop += 5; div.scrollTop = scrollTop; if (scrollTop >= scrollHeight) scrollTop=0;//设置滚动头为0，重新开始就行了 }, 100); },

yandiyu 2013-12-19

打赏
举报

gridComplete: function () {
           var div = $('#dataList').closest('.ui-jqgrid-bdiv')[0],offsetHeight = div.offsetHeight//////////////
			, scrollHeight = div.scrollHeight-offsetHeight, scrollTop = 0,timer;
           function scrollBody() {
        	   timer = setInterval(function () {
         			scrollTop += 1;
         			div.scrollTop = scrollTop;
         			if (scrollTop >= scrollHeight) {//循环滚动
             			scrollHeight = div.scrollHeight - offsetHeight;//如果在滚动过程中添加过数据，需要重新结算scrollHeight
             			if(scrollTop>=(ob3-16)*33){
             				scrollTop = 0; //循环滚动，重置滚动头即可
             			}
         			}
     			}, 50);
           }
           $('#dataList').mouseover(function () {//添加over事件，停止滚动
     			clearInterval(timer);
 		   });//.mouseout(function (e) {//添加mouseout事件，继续滚动
      			//scrollBody(); 
  		   //});
 		  if(ob3>16){
  		  	scrollBody() ;///开始滚动jqgrid内容
 		  }
	   }

这是我最终的代码不知道版主说的小bug是不是循环滚动的时候表格会闪，比如当前滚动第N行的时候，表格要先调到最顶端，然后再滚动第（N+1）行，如果是的话我上面写的代码不会出现这个问题（其中33是我表格中每行的高度，ob3是表格的总行数，16是表格可看到的行数），但是我这段代码有个问题貌似，在IE10模式下，运行几分钟，浏览器会挂掉，但是在IE8模式下没有发现这个问题，不知道是什么情况，总之，非常感谢版主的帮助。

yandiyu 2013-12-18

打赏
举报

引用 3 楼 showbo 的回复:

这个不是很多简单，获取数据的容器，设置容器scrollTop搞定，注意修改id选择器

         jQuery("#grid").jqGrid({//////////
             gridComplete: function () {

                 var div = $('#grid').closest('.ui-jqgrid-bdiv')[0]//////////////
, scrollHeight = div.scrollHeight, scrollTop = 0;
                var timer= setInterval(function () {
                     scrollTop += 5;
                     div.scrollTop = scrollTop;
                     if (scrollTop >= scrollHeight) clearInterval(timer);//滚动到底部，释放计时器
                 }, 100);
             },

大版主 jqgrid用的是拼接起来的本地数据，我想让数据无限的滚动下去，也就是滚动到底部再重头开始滚动，如此循环下去，我研究了好一回，就是搞不定，请版主再发神威。

Go 旅城通票 2013-12-18

打赏
举报

这个不是很多简单，获取数据的容器，设置容器scrollTop搞定，注意修改id选择器

         jQuery("#grid").jqGrid({//////////
             gridComplete: function () {

                 var div = $('#grid').closest('.ui-jqgrid-bdiv')[0]//////////////
, scrollHeight = div.scrollHeight, scrollTop = 0;
                var timer= setInterval(function () {
                     scrollTop += 5;
                     div.scrollTop = scrollTop;
                     if (scrollTop >= scrollHeight) clearInterval(timer);//滚动到底部，释放计时器
                 }, 100);
             },

yandiyu 2013-12-18