页面会自动滚动到 CFGRID

我有一个足够高的页面，可以垂直滚动。加载完成后，浏览器会自动滚动到 cfgrid 元素所在的页面底部。它发生在IE，Chrome和Firefox中。

我已经将原因缩小到ColdFusion 11服务器添加到页面顶部的JavaScript。如果我在浏览器中禁用脚本，页面不会自动滚动到底部。

将 window.scrollTo（0,0）添加到正文加载不起作用。无论 JS 滚动到底部，都会在 onload 事件之后发生。我还没有尝试过jQuery的.ready（）;希望有一个修复。

有没有人看到这个并知道修复或解决方法？

谢谢

这是我的代码

<cfoutput>
<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Test</title>
</head>
<body>
    0<br>
    1<br>
    2<br>
    2<br>
    3<br>
    3<br>
    4<br>
    5<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    <!-- Lines deleted that push the cfgrid below the bottom of the screen -->
    <cfquery datasource="#application.datasource#" name="testquery">
    select MNU_MENU_ID, MNU_MENU from #application.db_owner#.menu
    </cfquery>
    <cfform name="assays">
       <cfgrid name = "FirstGrid"  title="test" format="html" height="310" width="500"
            stripeRows="true" preservepageonsort="true"
            query = "testquery">
            <cfgridcolumn name="MNU_MENU_ID"  header="ID" width="25" />
            <cfgridcolumn name="MNU_MENU" header="Menu" width="200"  />
            <!--- Hidden Columns --->
        </cfgrid>

    </cfform>
    <script>
        setTimeout(function(){ window.scrollTo(0,0); }, 4000);
        //alert('scroll attempted');
    </script>
</body>
</html>
</cfoutput>

以下是浏览器看到的代码：

<!DOCTYPE html>
<html>
<head><script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
_cf_websocket_port=8577;
_cf_flash_policy_port=1243;
/* ]]> */</script><script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/DataView.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/SplitButton.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfgrid.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css" />
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<meta charset="ISO-8859-1">
<title>Test</title>
<script type="text/javascript">/* <![CDATA[ */
    ColdFusion.Ajax.importTag('CFGRID');
/* ]]> */</script>
<script type="text/javascript">/* <![CDATA[ */
    ColdFusion.objectCache['FirstGrid'] = new ColdFusion.Grid.Actions('cfgrid148239339981943');
    _cf_GRIDTAG_initAjaxGrid_148239339981944=function()
    {
        var _cf_gridColModel = [{header:'ID','colName':'MNU_MENU_ID',id:'FirstGrid_MNU_MENU_ID','name':'MNU_MENU_ID',dataIndex:'MNU_MENU_ID',menuDisabled:false,sortType:'asFloat',sortable:true,flex:1,width:25},{header:'Menu','colName':'MNU_MENU',id:'FirstGrid_MNU_MENU','name':'MNU_MENU',dataIndex:'MNU_MENU',menuDisabled:false,sortType:'asUCString',sortable:true,width:200},{header:'CFGRIDROWINDEX','colName':'CFGRIDROWINDEX',id:'FirstGrid_CFGRIDROWINDEX','name':'CFGRIDROWINDEX',dataIndex:'CFGRIDROWINDEX',menuDisabled:false,sortType:'asFloat',sortable:true,hidden:true}];
        var _cf_gridData = [[1,'Home',1],[2,'Compounds',2],[3,'Dashboard',3],[4,'Authorize',4],[5,'Reports',5],[6,'Administration',6],[7,'Help',7],[8,'Dataload',8],[9,'Logout',9],[17,'cmpIdentification',10],[18,'cmpAcquisition',11],[19,'cmpRegistration',12],[20,'cmpReview',13],[21,'cmpChemistry',14],[23,'stdInVitro',15],[10,'adminAssays',16],[11,'adminStudies',17],[12,'adminSubmitters',18],[13,'adminLabs',19],[14,'adminAnnouncements',20],[15,'adminUsers',21],[24,'dashProgramActivity',22],[25,'dashDashboard',23],[26,'dashStructure',24],[27,'dashResupply',25],[28,'dashInventory',26],[29,'dashTDPComments',27]];
        Ext.define('cf_gridmodel', { extend: 'Ext.data.Model', fields: _cf_gridColModel,idProperty : 'CFGRIDROWINDEX' });
        var _cf_gridDataModel = Ext.create('Ext.data.Store', { model : 'cf_gridmodel', data: _cf_gridData,proxy: {  type: 'memory',reader : new Ext.data.reader.Array({id:_cf_gridColModel.length-1}, _cf_gridColModel)}});
        ColdFusion.Grid.init('FirstGrid','__CFGRID__assays__FirstGrid','assays',false,false,true,false,'MNU_MENU_ID',_cf_gridColModel,_cf_gridDataModel,500,310,true,'#cfgrid148239339981943 .x-grid-cell-FirstGrid_MNU_MENU_ID{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_MNU_MENU_ID{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-cell-FirstGrid_MNU_MENU{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_MNU_MENU{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_MNU_MENU{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-cell-FirstGrid_CFGRIDROWINDEX{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_CFGRIDROWINDEX{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:null} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_MNU_MENU{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_MNU_MENU{background-color:null} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:null} ',10,true,true,null,false,null,'test',null,null,{'appendKey':true,colInfo:[null,null,null]},null,null,null,null);
        Ext.form.ComboBox.prototype.triggerAction = 'all';
    };ColdFusion.Event.registerOnLoad(_cf_GRIDTAG_initAjaxGrid_148239339981944);
/* ]]> */</script>
<script type="text/javascript">
<!--
    _CF_checkassays = function(_CF_this)
    {
        //reset on submit
        _CF_error_exists = false;
        _CF_error_messages = new Array();
        _CF_error_fields = new Object();
        _CF_FirstErrorField = null;

        //display error messages and return success
        if( _CF_error_exists )
        {
            if( _CF_error_messages.length > 0 )
            {
                // show alert() message
                _CF_onErrorAlert(_CF_error_messages);
                // set focus to first form error, if the field supports js focus().
                if( _CF_this[_CF_FirstErrorField].type == "text" )
                { _CF_this[_CF_FirstErrorField].focus(); }
            }
            return false;
        }else {
            return true;
        }
    }
//-->
</script>
</head>
<body>
    0<br>
    1<br>
    2<br>
    2<br>
    3<br>
    3<br>
    4<br>
    5<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    <!-- Again, lines deleted that push the cfgrid below the bottom of the screen -->
    <form name="assays" id="assays" action="&#x2f;index.cfm" method="post" onsubmit="return _CF_checkassays(this)">
<div  id="cfgrid148239339981943" style="border: 1px solid #cccccc; overflow: hidden;height:310px;">
 </div> <div><input type="hidden" name="__CFGRID__assays__FirstGrid" value="" /></div>
</form>
</body>
</html>

将来，请提供直接代码，以便此处的用户可以使用您正在使用的内容。使用 CF9，我无法复制该行为，但就像您所说，您正在使用 CF11。

这是你编写的代码，还是

你继承的代码，还是你从某处复制的代码（如教程）？你确定是CF生成的javascript造成了破坏，而不是一个旨在聚焦网格的javascript吗？

如果这是您无法追踪的东西，并且其他人没有更好的解决方案，这可能会起作用。它目前设置为 3000（3 秒），但较短的时间应该效果更好（并且对用户来说不那么烦人。

我会把它放在你的 cfgrid 之后。

<script>
  setTimeout(function(){ window.scrollTo(0,0); }, 3000);
</script>

你也可以找到这个javascript的解决方案。

var scrolled = 0;
window.onscroll = function() {
    if (!(scrolled)) {
        scrolled = 1;
        setTimeout(function(){ window.scrollTo(0,0); }, 300);
    }
};

但我只会把它放在你的cfgrid的页面中，而不是在你的网站上。否则惹恼人的好方法。

感谢您的建议，@cfqueryparam。但我发现解决方案是将属性selectOnLoad="false"添加到cfgrid标签中。它在 CF11 中的默认值为"true"。我不确定 CF10，但在 CF9 中似乎默认为"假"。

相关内容

最新更新

热门标签：