页面自动滚动到cfgrid

时间:2014-12-11 20:17:39

标签: coldfusion cfgrid

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

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

将window.scrollTo(0,0)添加到body onload不起作用。无论JS在底部事件之后滚动到底部是什么。我还没有尝试过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>

2 个答案:

答案 0 :(得分:1)

将来,请提供直接代码,以便此处的用户可以正确使用您正在使用的内容。使用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页面中,而不是放在您的网站上。惹恼别人的好方法。

答案 1 :(得分:0)

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