将 CFGRID 与 JQuery 结合使用

发布于 2024-09-12 06:05:05 字数 4152 浏览 5 评论 0原文

我在使用 CFGRID 和 JQuery 时遇到问题。以下是使用 CFARTGALLERY 数据库的示例代码：

gridtest.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <cfajaximport tags="cfform,cfgrid">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CFGRID Test</title>
    </head>
    <cfinvoke component="gridtest" method="getartistname" returnvariable="artistname" />
    <body>
        <cfform name="frmArtists" format="html">
                <cfselect name="selArtist" query="artistname" queryPosition="below" display="lastname" value="artistid">
                    <option value="0">Select artist...</option>
                </cfselect>
                <p></p>
                <cfgrid name="artgrid"
                            bind="cfc:gridtest.getartname({cfgridpage},
                                                             {cfgridpagesize},
                                                             {cfgridsortcolumn},
                                                             {cfgridsortdirection},
                                                             {selArtist})"
                            format="html"
                            pagesize="8"
                            bindOnLoad="false"
                            selectmode="browse"
                            width="400">
                    <cfgridcolumn name="artname" header="Art Name" display="yes" width="400">
                </cfgrid>
        </cfform>
    </body>
    </html>

它有一个简单的 cfselect 控件来选择艺术家的姓名，单击时，cfgrid 将显示艺术品的名称。

这是 CFC (gridtest.cfc)：

<cfcomponent>
    <cfset application.datasource="cfartgallery">
    <cfset cfartgallery=#application.datasource#>

    <cffunction name="getArtistName" access="public" returntype="query">
        <cfquery name="artistname" datasource="#cfartgallery#">
                SELECT ARTISTID,LASTNAME
                FROM ARTISTS
                ORDER BY LASTNAME
        </cfquery>
        <cfreturn artistname>
    </cffunction>

    <cffunction name="getartname" access="remote" returntype="struct">
        <cfargument name="page" type="numeric" required="true">
        <cfargument name="pagesize" type="numeric" required="true">
        <cfargument name="pagesortcolumn" type="string" required="false" default="">
        <cfargument name="pagesortdir" type="string" required="false" default="">
        <cfargument name="artistid" type="numeric" required="yes">
        <cfset var artname="">
        <cfquery name="artname" datasource="#cfartgallery#">
                SELECT ARTNAME
                FROM ART
                WHERE ARTISTID=<cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.artistid#">
        </cfquery>
        <cfreturn QueryConvertForGrid(artname,page,pagesize)>
    </cffunction>

</cfcomponent>

到目前为止一切顺利。但是，如果我使用 JQuery 的加载函数来使用包装页面，如下所示（gridtestmain.cfm）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#div1').load('gridtest.cfm');
    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CFGRID Test Under JQuery</title>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

cfgrid 会消失，只留下一个边界框。在 IE 中，它报告“Ext.EventObject 为 null 或不是对象”错误。网上搜索表明 Ext 库被多次加载导致了问题，但我看不到它在哪里被多次加载。

这是 JQuery 的限制吗？还是我做错了？非常感谢任何建议。

原文

I am encountering a problem using CFGRID with JQuery. Here are the sample codes using the CFARTGALLERY database:

gridtest.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <cfajaximport tags="cfform,cfgrid">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CFGRID Test</title>
    </head>
    <cfinvoke component="gridtest" method="getartistname" returnvariable="artistname" />
    <body>
        <cfform name="frmArtists" format="html">
                <cfselect name="selArtist" query="artistname" queryPosition="below" display="lastname" value="artistid">
                    <option value="0">Select artist...</option>
                </cfselect>
                <p></p>
                <cfgrid name="artgrid"
                            bind="cfc:gridtest.getartname({cfgridpage},
                                                             {cfgridpagesize},
                                                             {cfgridsortcolumn},
                                                             {cfgridsortdirection},
                                                             {selArtist})"
                            format="html"
                            pagesize="8"
                            bindOnLoad="false"
                            selectmode="browse"
                            width="400">
                    <cfgridcolumn name="artname" header="Art Name" display="yes" width="400">
                </cfgrid>
        </cfform>
    </body>
    </html>

It has a simple cfselect control to select the artist's name, and when clicked, the cfgrid shows the artworks' names.

Here's the CFC (gridtest.cfc):

<cfcomponent>
    <cfset application.datasource="cfartgallery">
    <cfset cfartgallery=#application.datasource#>

    <cffunction name="getArtistName" access="public" returntype="query">
        <cfquery name="artistname" datasource="#cfartgallery#">
                SELECT ARTISTID,LASTNAME
                FROM ARTISTS
                ORDER BY LASTNAME
        </cfquery>
        <cfreturn artistname>
    </cffunction>

    <cffunction name="getartname" access="remote" returntype="struct">
        <cfargument name="page" type="numeric" required="true">
        <cfargument name="pagesize" type="numeric" required="true">
        <cfargument name="pagesortcolumn" type="string" required="false" default="">
        <cfargument name="pagesortdir" type="string" required="false" default="">
        <cfargument name="artistid" type="numeric" required="yes">
        <cfset var artname="">
        <cfquery name="artname" datasource="#cfartgallery#">
                SELECT ARTNAME
                FROM ART
                WHERE ARTISTID=<cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.artistid#">
        </cfquery>
        <cfreturn QueryConvertForGrid(artname,page,pagesize)>
    </cffunction>

</cfcomponent>

So far so good. But if I use a wrapper page using JQuery's load function, like so (gridtestmain.cfm):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#div1').load('gridtest.cfm');
    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CFGRID Test Under JQuery</title>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

The cfgrid disappears with only a boundary box. In IE it reports an error of 'Ext.EventObject is null or not an object.' Searching the net suggests that the Ext library was loaded multiple times causing the problem, but I can't see where it is loaded more than once.

Is this a limitation of JQuery? Or am I doing it the wrong way? Any suggestions is much appreciated.

分享到QQ

分享到微博