jqgrid mouseover css,jqgrid自动滚动数据内容demo

如果jqgrid一次行加载的数据太多，而不想通过拖动滚动条来查看数据，需要javascript代码自动滚动滚动条，实现数据自动滚动展示，可以通过下面的办法实现。

jqgrid数据加载生成完毕后(gridComplete事件)，获取数据数据的容器，用计时器来设置容器的scrollTop来实现。jqgrid的数据容器样式为“.ui-jqgrid-bdiv”，获取这个div。

jqgrid自动滚动数据内容demo源代码如下

jQuery("#grid").jqGrid({

gridComplete: function () {

var div = $('#grid').closest('.ui-jqgrid-bdiv')[0], offsetHeight = div.offsetHeight

, scrollHeight = div.scrollHeight - offsetHeight//要滚动的高度要减去容器可见高度，要不循环滚动时会空等一段时间

, scrollTop = 0, timer;

function scrollBody() {

timer = setInterval(function () {

scrollTop += 5;

div.scrollTop = scrollTop;

if (scrollTop >= scrollHeight) {

//循环滚动

scrollHeight = div.scrollHeight - offsetHeight;//如果在滚动过程中添加过数据，需要重新结算scrollHeight

scrollTop = 0; //循环滚动，重置滚动头即可

//滚动到底部，不需要循环滚动，可以释放计时器

//clearInterval(timer);

}

}, 100);

}

function contains(o, p) {//判断某个对象是否包含在某个容器中

if (o == p) return true;

while (o = o.parentNode) if (o == p) return true;

return false;

}

$('#grid').mouseover(function () {//添加over事件，停止滚动

clearInterval(timer);

}).mouseout(function (e) {//添加mouseout事件，继续滚动

var o = e.relatedTarget;

//移动到的对象不包含在table中继续滚动

if (!contains(o, this) && scrollTop < scrollHeight) { scrollBody(); }

});

scrollBody() ;///开始滚动jqgrid内容

}

//其他的jqgrid配置项

});

加支付宝好友偷能量挖...

2013-12-18Web开发网

阅读(1151)喜欢(0)