javascript - 显示jqGrid滚动条的当前位置

Question

目前我正在开发一个迷你 jqGrid 项目。该项目的最后一个要求是，每当我更改滚动条的位置时，应该触发一个事件，该事件应该在控制台上打印滚动条的当前位置。但是每次我在控制台上得到相同的响应。

function filljQgrid(para1,para2){
    var a;
    var rowData;
    var pos;
    var scrollLength;
    var gridData=para1;
    var entityId=para2;
    jQuery('#list').jqGrid('clearGridData');
    var elementTop;
    var elementBottom;
    var viewportTop;
    var viewportBottom;
    jQuery(document).ready(function(){
        var grid_selector="#list";
        var pager_selector="#page";
        //responsive starts
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
                 })
        $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
        if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
        setTimeout(function() {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
            }, 20);
            }
           })
    jQuery("#list").jqGrid({
            datatype:"local",
            width:"1090",
            height:"50",
            colNames:["ENTITY ID","RANK","ACCOUNT NAME","BENIFIT VALUE"],
            colModel:[
                        {name:"entity_id",index:"entity_id",sortable:false,width:90,align:"center",key:true,hidden:true},
                        {name:"rank",index:"rank",sortable:true,sorttype:"int",width:90,align:"center"},
                        {name:"account_name",index:"account_name",width:90,sortable:false,align:"center"},
                        {name:"incentive",index:"incentive",width:90,sortable:false,align:"center"}

                     ],
            viewrecords:true,
            ignoreCase:true,
            scrollrows:true,
            altRows:true,
            });
            $(window).triggerHandler('resize.jqGrid');
            for(var l=0;l<gridData.length;l++)
                {
                jQuery("#list").jqGrid('addRowData', l+1, gridData[l]);
                }
            $("#list").setGridParam({sortname:'rank', sortorder: 'asc', loadComplete:function(){
                                                                                    jQuery('#list').jqGrid('setSelection','50147');
                                                                                    jQuery('#list').find('.ui-state-highlight').css('background', '#0487BD');
                                                                                    jQuery('#list').find('.ui-state-highlight').css('color', 'white');
                                                                                    a=jQuery('#list').jqGrid('getGridParam',"selrow");
                                                                                    rowData = jQuery('#list').jqGrid ('getRowData',a);in json format
                                                                                    pos=jQuery("#list").closest(".ui-jqgrid-bdiv").scrollTop();
                                                                                    elementTop = jQuery("#list").closest(".ui-jqgrid-bdiv").offset().top;
                                                                                    elementBottom = elementTop + $('a').height();
                                                                                    viewportTop = $("#list").scrollTop();
                                                                                    viewportBottom = viewportTop + $("#list").height();


                                                                                               }
                                    }).trigger('reloadGrid');
            //adding search begins here           
            jQuery("#list").jqGrid('navGrid','#ptoolbar',{del:false,add:false,edit:false,search:false});
            jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
            //adding search ends here
            //if($('a').is(':visible')){}
            $(".ui-jqgrid-bdiv").scroll(function(){console.log(elementTop)});

        });**strong text**
    }//closing brace for filljQgrid()

标签： javascriptjqueryjqgrid

Answer 1

创建网格后，您可以绑定滚动事件并查看位置尝试使用此代码

var mygrid = $("#jqGrid")[0];
$(mygrid.grid.bDiv).scroll(function(e){
    console.log(this.scrollTop);
});