在我正在使用的ColdFusion应用程序中,用户将看到两个cfselect,一个带有区域列表,另一个带有中心列表。每个地区都有自己的中心集。当用户单击第一个cfselect中的区域时,它应在第二个cfselect中填充一个中心列表。
我的计划是在列表中包含中心的完整列表,并在选择其相应区域时使其可见。是否有捷径可寻?我是ColdFusion的新手,所以很挣扎。这是我拥有的两个cfselect的代码:
<td>
<cfset SelectionListWidthAndHeight = "width:375px; height:" & min(130, ((REGIONS.RecordCount-1) * 13)) & "px;">
<cfselect name = "Select_Region_ID"
query = "REGIONS"
queryposition = "below"
value = "REGION_ID"
display = "Region"
selected = "0"
size = "10"
style = #SelectionListWidthAndHeight#
required = "yes"
message = "You must specify a center."
onchange = "">
<option value="All">All regions and centers</option>
</cfselect>
</td>
<td>
<cfset SelectionListWidthAndHeight = "width:375px; height:" & min(130, ((CENTERS.RecordCount-1) * 13)) & "px;">
<cfselect name = "Select_Center_ID"
query = "CENTERS"
queryposition = "below"
value = "CENTER_ID"
display = "Center"
selected = "0"
size = "10"
style = #SelectionListWidthAndHeight#
required = "yes"
message = "You must specify a center."
>
<option value="All">All centers in region</option>
</cfselect>
</td>
使用cfstoredprocs检索区域和中心的列表:
<cfstoredproc procedure="spGetAllRegions" datasource="APD">
<cfprocresult name="REGIONS" resultset="1">
</cfstoredproc>
<cfstoredproc procedure="spGetAllCenters" datasource="APD">
<cfprocresult name="CENTERS" resultset="1">
</cfstoredproc>
到目前为止,CFC代码:
<cfcomponent output="false">
<cfset variables.dsn = "APD">
<cffunction name="getregions" access="remote" returntype="query">
<cfset var getData = "">
<cfquery name="getData" datasource="#variables.dsn#">
SELECT DISTINCT REGION_ID FROM Regions
</cfquery>
<cfreturn getData />
</cffunction>
答案 0 :(得分:3)
(评论太久了)
嗯,实际上有两部分:服务器端代码(CF)和客户端(Javascript / Ajax)。一个完整的示例对于单个S.O来说有点长。线。如果是我,我将专注于编写CF代码1st。获取<cfcomponent>
以所需的格式返回所需的数据。启动并工作后,继续进行客户端代码。
就ColdFusion代码而言,您当前的CFC看起来不错。我唯一要更改的是让函数返回结构数组,而不是“查询”对象。序列化查询对象时,CF默认为闪烁格式。更好地构建自己的结构IMO。
<cffunction name="getRegions" access="remote" returntype="array">
<cfquery name="local.getData" datasource="#variables.dsn#">
SELECT Region_Id, Region
FROM Regions
ORDER BY Region
</cfquery>
<!--- convert each record into structure and append to array --->
<cfset local.results = []>
<cfloop query="local.getData">
<cfset arrayAppend(local.results, {"value": region_id, "label": region})>
</cfloop>
<cfreturn local.results />
</cffunction>
要查看ajax调用将接收什么数据,请将其加载到浏览器中并测试远程功能:
http://localhost/YourComponent.cfc?method=getRegions&returnformat=json
您可以创建类似的函数来返回与特定区域ID关联的中心。唯一的区别是它需要使用区域ID作为参数:
<cffunction name="getCenters" access="remote" returntype="array">
<cfargument name="region_id" type="numeric" required="true">
<cfquery name="local.getData" datasource="#variables.dsn#">
SELECT Center_Id, Center
FROM Centers
WHERE Region_Id = <cfqueryparam value="#arguments.region_id#" cfsqltype="cf_sql_integer">
ORDER BY Center
</cfquery>
<!--- convert each record into structure and append to array --->
<cfset local.results = []>
<cfloop query="local.getData">
<cfset arrayAppend(local.results, {"value": center_id, "label": center})>
</cfloop>
<cfreturn local.results>
</cffunction>
测试是类似的,您只需要提供一个区域ID作为url参数即可
http://localhost/YourComponent.cfc?method=getCenters&returnformat=json®ion_id=123