HTML Coldfusion Datagrid 布局中的内容消失
Disappearing content in HTML Layout of Coldfusion Datagrid
我的 CFM 页面布局有问题。我在顶层 div 布置了一个包含 3 个组件的 CFM 页面，它们显示得很好。
但是，当我在其下方设置一个新的 div 并将 Coldfusion 数据网格放置在 coldfusion 表单标签中然后对其进行测试时，我的顶部元素消失了。当我从我的 div 中删除 < cfform > 块时，它恢复正常并显示正常，只是文本包裹在 .帮助解决此格式问题将不胜感激。我已附上图片来说明问题。
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"><!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%">
<cfselect name="employee" query="getReports"
value="Report_Name" display="Report_Name" required="yes" size="10">
</cfselect>
</cfform>
</div>
</div>
**Code In Question**
<!---DataGrid Control Pane--->
<div id="right_div" style="position: relative; width: 100%; background-color:#CCC; float: left;">
<cflayout type="tab" tabheight="100" name="controlTabs" width="900" height="600"> <!---Tabbed layout controller for all tabbed layout components --->
<cflayoutarea name="tab1" title="Employee Report Assignments" align="center">
<cfform height="600" width="900">
<cfgrid
name="AssignedReports"
align="Top"
autoWidth="yes"
bgColor="FFF"
colHeaderBold="yes"
format="html"
gridDataAlign="left"
gridLines="yes"
query="qEmployeeAssignments"
sort="yes"
stripeRowColor="FC6"
stripeRows="yes"
width="900" height="500">
<cfgridcolumn name="Full_Name" header="Employee Name" display="yes" width="300" />
<cfgridcolumn name="reportName" header="Report Name" hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
</div>
解决方案：我可以通过以下方式解决这个问题：
- 将我的 CF 布局块放在页面顶部，
- 用 3 个表单元素复制我的 div 并将其放回顶部。保存。
- 删除底部的重复div块。
代码：
<!---This begins the visual component layout--->
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Report List Form Initialization--->
<cfselect name="employee" query="getReports" <!---CFSELECT To populate form element from above Get Report query--->
value="Report_Name" display="Report_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Get Report query--->
</cfselect>
</cfform>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<!---Tabbed layout controller for all tabbed layout components --->
<cflayout type="tab" tabheight="100" name="mytabs"> <!---Initialization for tab navigation layout--->
<cflayoutarea title="Employee Perspective" name="t1"> <!---First Tab navigation pane initialization--->
<cfform> <!---CF form initialization --->
<cfgrid <!---CF datagrid initialization--->
name="AssignedEmployees" <!--- -------Attributes---------- --->
align="Top" <!--- | --->
autoWidth="yes" <!--- | --->
bgColor="FFF" <!--- | --->
colHeaderBold="yes" <!--- | --->
format="html" <!--- | --->
gridDataAlign="left" <!--- | --->
gridLines="yes" <!--- | --->
query="qEmployeeAssignments" <!--- | --->
sort="yes" <!--- | --->
stripeRowColor="FC6" <!--- | --->
stripeRows="yes" <!--- | --->
width="900" height="500"> <!--- End of Attributes --->
<cfgridcolumn name="Full_Name" header="Employee Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
display="yes" width="300" />
<cfgridcolumn name="reportName" header="Report Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" <!---Datagrid column. Mapped to the First and Last Names in the query--->
dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
<cflayoutarea title="Reporting Perspective" name="t2"> <!---First Tab navigation pane initialization--->
<cfform> <!---CF form initialization --->
<cfgrid <!---CF datagrid initialization--->
name="ReportsToEmployees" <!--- -------Attributes---------- --->
align="Top" <!--- | --->
autoWidth="yes" <!--- | --->
bgColor="FFF" <!--- | --->
colHeaderBold="yes" <!--- | --->
format="html" <!--- | --->
gridDataAlign="left" <!--- | --->
gridLines="yes" <!--- | --->
query="qEmployeeAssignments" <!--- | --->
sort="yes" <!--- | --->
stripeRowColor="FC6" <!--- | --->
stripeRows="yes" <!--- | --->
width="900" height="500"> <!--- End of Attributes --->
<cfgridcolumn name="reportName" header="Report Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="Full_Name" header="Employee Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
display="yes" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" <!---Datagrid column. Mapped to the First and Last Names in the query--->
dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
**Delete this block after saving, then save again. Layout then works**
<!---This begins the visual component layout--->
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Report List Form Initialization--->
<cfselect name="employee" query="getReports" <!---CFSELECT To populate form element from above Get Report query--->
value="Report_Name" display="Report_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Get Report query--->
</cfselect>
</cfform>
</div>
</div>
似乎将 cf 布局放在顶部然后“用原始 div 块强制它向下，然后删除重复的 div 块会使其正确呈现。
我的 CFM 页面布局有问题。我在顶层 div 布置了一个包含 3 个组件的 CFM 页面，它们显示得很好。 但是，当我在其下方设置一个新的 div 并将 Coldfusion 数据网格放置在 coldfusion 表单标签中然后对其进行测试时，我的顶部元素消失了。当我从我的 div 中删除 < cfform > 块时，它恢复正常并显示正常，只是文本包裹在 .帮助解决此格式问题将不胜感激。我已附上图片来说明问题。
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"><!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%">
<cfselect name="employee" query="getReports"
value="Report_Name" display="Report_Name" required="yes" size="10">
</cfselect>
</cfform>
</div>
</div>
**Code In Question**
<!---DataGrid Control Pane--->
<div id="right_div" style="position: relative; width: 100%; background-color:#CCC; float: left;">
<cflayout type="tab" tabheight="100" name="controlTabs" width="900" height="600"> <!---Tabbed layout controller for all tabbed layout components --->
<cflayoutarea name="tab1" title="Employee Report Assignments" align="center">
<cfform height="600" width="900">
<cfgrid
name="AssignedReports"
align="Top"
autoWidth="yes"
bgColor="FFF"
colHeaderBold="yes"
format="html"
gridDataAlign="left"
gridLines="yes"
query="qEmployeeAssignments"
sort="yes"
stripeRowColor="FC6"
stripeRows="yes"
width="900" height="500">
<cfgridcolumn name="Full_Name" header="Employee Name" display="yes" width="300" />
<cfgridcolumn name="reportName" header="Report Name" hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
</div>
解决方案：我可以通过以下方式解决这个问题：
- 将我的 CF 布局块放在页面顶部，
- 用 3 个表单元素复制我的 div 并将其放回顶部。保存。
- 删除底部的重复div块。
代码：
<!---This begins the visual component layout--->
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Report List Form Initialization--->
<cfselect name="employee" query="getReports" <!---CFSELECT To populate form element from above Get Report query--->
value="Report_Name" display="Report_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Get Report query--->
</cfselect>
</cfform>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<!---Tabbed layout controller for all tabbed layout components --->
<cflayout type="tab" tabheight="100" name="mytabs"> <!---Initialization for tab navigation layout--->
<cflayoutarea title="Employee Perspective" name="t1"> <!---First Tab navigation pane initialization--->
<cfform> <!---CF form initialization --->
<cfgrid <!---CF datagrid initialization--->
name="AssignedEmployees" <!--- -------Attributes---------- --->
align="Top" <!--- | --->
autoWidth="yes" <!--- | --->
bgColor="FFF" <!--- | --->
colHeaderBold="yes" <!--- | --->
format="html" <!--- | --->
gridDataAlign="left" <!--- | --->
gridLines="yes" <!--- | --->
query="qEmployeeAssignments" <!--- | --->
sort="yes" <!--- | --->
stripeRowColor="FC6" <!--- | --->
stripeRows="yes" <!--- | --->
width="900" height="500"> <!--- End of Attributes --->
<cfgridcolumn name="Full_Name" header="Employee Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
display="yes" width="300" />
<cfgridcolumn name="reportName" header="Report Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" <!---Datagrid column. Mapped to the First and Last Names in the query--->
dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
<cflayoutarea title="Reporting Perspective" name="t2"> <!---First Tab navigation pane initialization--->
<cfform> <!---CF form initialization --->
<cfgrid <!---CF datagrid initialization--->
name="ReportsToEmployees" <!--- -------Attributes---------- --->
align="Top" <!--- | --->
autoWidth="yes" <!--- | --->
bgColor="FFF" <!--- | --->
colHeaderBold="yes" <!--- | --->
format="html" <!--- | --->
gridDataAlign="left" <!--- | --->
gridLines="yes" <!--- | --->
query="qEmployeeAssignments" <!--- | --->
sort="yes" <!--- | --->
stripeRowColor="FC6" <!--- | --->
stripeRows="yes" <!--- | --->
width="900" height="500"> <!--- End of Attributes --->
<cfgridcolumn name="reportName" header="Report Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="Full_Name" header="Employee Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
display="yes" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" <!---Datagrid column. Mapped to the First and Last Names in the query--->
dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
**Delete this block after saving, then save again. Layout then works**
<!---This begins the visual component layout--->
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Report List Form Initialization--->
<cfselect name="employee" query="getReports" <!---CFSELECT To populate form element from above Get Report query--->
value="Report_Name" display="Report_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Get Report query--->
</cfselect>
</cfform>
</div>
</div>
似乎将 cf 布局放在顶部然后“用原始 div 块强制它向下，然后删除重复的 div 块会使其正确呈现。