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配置项
});

 



原创文章,转载请注明出处:jqgrid自动滚动数据内容demo
评论(0)Web开发网
阅读(733)喜欢(0)不喜欢(0)jqGrid中文API