目录
北极星书库
你可以建立允许用户进行数据编辑的网格,根据用户的编辑结果,你可以用CFQUERY标签对数据源进行修改,也可以使用CFGRIDUPDATE标签,将用户对网格数据的编辑直接写到数据库中。
单元格中的数据可以被编辑,一行数据可以被插入,删除或更新,但在此之前。你需要在CFGRID中指定SELECTMODE=“EDIT”来允许编辑数据,还许要允许INSERT属性和DELETE属性(将其值设为“YES”)。完成这些设置后,该网格即可用来对数据源进行操作。
使用可更新网格对ODBC数据源进行修改的方法主要有两种。你可以建立一个文件,将CFGRID表单变量传递给该文件,在该文件中用CFQUERY标签执行对数据源的更新,另一种方法是将网格编辑结果传递给一个包含CFGRIDUPDATE标签的文件,该标签直接将编辑结果写入数据源,虽然使用CFQUERY可以实现对数据源的完全控制,但对不需要复杂控制的操作来说,CFGRIDUPOATE使用起来更加简单。
编辑网格中的数据
设置SELECTMODE=“EDIT”后,用户即可编辑网格中的数据。用户可以点击一个单元格,然后用简单的编辑操作改单元格中的数据。设置INSERT=“YES”和DELETE=“YES”后,用户可以选择一行数据并删除之,也可以选择一行数据,在该位置插入一个新行。当一个包含CFGRID标签的CFFORM被提交时,数据的修改被记录在几个一维数组中,你可以象引用其它的ColdFusion数组一样引用这些数组。
下列的这些数组用来跟踪网格数据的修改:
用于存储单元格编辑信息的数组 |
|
数组 |
描述 |
gridname.colname[row_index] |
存储被编辑单元格的新值 |
gridname.Original.colname[row_index] |
存储被编辑单元格的原始值 |
gridname.RowStatus.Action[row_index] |
存储对单元格的编辑类型 |
例如,有一个网格“mygrid”,包含两个可显示字段CO11和CO12,一个隐藏字段CO13。当用户选择并修改了某一行中的数据时,则下列数组被创建,用于保存被更新,插入或删除的行的原始数据和新数据。
mygrid.col1[ row_index ]
mygrid.col2[ row_index ]
mygrid.col3[ row_index ]
mygrid.original.col1[ row_index ]
mygrid.original.col2[ row_index ]
mygrid.original.col3[ row_index ]
其中row_index是数组的索引值。
如果用户修改了CO12字段的某个单元格,你可以用如下的方式引用编辑操作类型、该单元格的原始值,以及编辑后的新值:
<CFSET edittype = mygrid.RowStatus.Action[1]><BR>
<CFSET new_value = mygrid.col2[1]><BR>
<CFSET old_value = mygrid.original.col2[1]>
为INSERT按钮和DELETE按钮指定替代文本
如果你希望可更新网格的插入和删除按钮使用不同于“Insert”和“Delete”的文本,你可以在INSERTBUTTON属性和DELETEBUTTON属性中指定替代的文本。
对网格数据排序
CFGRID标签的SORT属性用于允许在网格控件中包含排序按钮,允许排序后,排序按钮会被自动添加到网格中。点击该按钮时,网格数据会按选中的字段进行排序。ColdFusion将字段值视为文本或数字而进行排序。
下列的CFGRID属性用于定义与排序有关的各个选项
· PICTUREBAR——当设置为YES时,排序按钮是一个图形按钮,而非文本按钮。
· SORTASCENDINGBUTTON——用于指定升序排序按钮的显示文本,缺省值为“A® Z”
· SORTDESECNDINGBUTTON——用于指定降序排序按钮的显示文本,缺省值为“Z¬ A”
注意:用户在点击排序按钮之前必须首先选择一个字段。
例子:可编辑的网格
下面的例子演示了可更新网格的使用,在这个例子中,SELECTMODE属性被设置为“Edit”,INSERT属性和DELETE属性被设置为“yes”。当这个表单被提交时,handle_grid.cfm文件被调用,该文件显示编辑操作的类型,并直接对数据源执行相应的更新、删除或插入等操作。
Grid.cfm
<HTML>
<HEAD>
<TITLE>Simple Update Grid Example</TITLE>
</HEAD>
<CFQUERY NAME="CourseList"
DATASOURCE="cfsnippets">
SELECT * FROM Courses
</CFQUERY>
<BODY BGCOLOR="#FFFFFF">
<CFFORM NAME="GridForm"
ACTION="handle_grid.cfm">
<CFGRID NAME="course_grid"
HEIGHT=170
WIDTH=400
HSPACE=10
VSPACE=6
ALIGN="RIGHT"
SELECTCOLOR="white"
SELECTMODE="edit"
ROWHEADERS="YES"
ROWHEADERWIDTH=25
ROWHEADERALIGN="right"
COLHEADERS="YES"
QUERY="CourseList"
GRIDDATAALIGN="left"
BGCOLOR="green"
INSERT="YES"
DELETE="YES"
SORT="YES"
MAXROWS=60>
<CFGRIDCOLUMN NAME="course_id"
HEADER="Course ID"
WIDTH=80
ITALIC="NO"
HEADERALIGN="center"
HEADERITALIC="NO"
HEADERBOLD="YES"
DISPLAY="NO">
<CFGRIDCOLUMN NAME="number"
HEADER="Course ##"
WIDTH=80
ITALIC="NO"
HEADERALIGN="center"
HEADERITALIC="NO"
HEADERBOLD="YES"
DISPLAY="YES"
SELECT="YES">
<CFGRIDCOLUMN NAME="description"
HEADER="Description"
WIDTH=240
ITALIC="No"
HEADERALIGN="center"
HEADERITALIC="No"
HEADERBOLD="Yes"
BOLD="Yes"
ITALIC="Yes"
DISPLAY="Yes">
</CFGRID>
<!---
<H3>Editable Grid</H3>
This is a grid that is populated <BR>
from a query. The select mode is <BR>
update. The description column<BR>
is presented in Bold and Italic.<BR><BR> --->
<INPUT TYPE="Submit" VALUE=" Push me... "> <BR>
</CFFORM>
</BODY>
</HTML>
这个例子的显示结果类似于下图:
你对网格数据的修改将反映在数据源cfsnippets的表Courses中,你可以在Studio中查开这个表。
Handle_grid.cfm
<HTML>
<HEAD>
<TITLE>Catch submitted grid values</TITLE>
</HEAD>
<BODY>
<H3>Grid values for FORM.Course_grid row updates</H3>
<CFIF IsDefined("form.course_grid.rowstatus.action")>
<CFLOOP INDEX = "Counter" FROM = "1" TO =
#ArrayLen(form.course_grid.rowstatus.action)#>
<CFOUTPUT>
The row action for #Counter# is:
#form.course_grid.rowstatus.action[Counter]#
<BR><BR>
</CFOUTPUT>
<CFIF form.course_grid.rowstatus.action[Counter] IS "D">
<CFQUERY NAME="InsertNewCourse"
DATASOURCE="cfsnippets">
DELETE from courses
WHERE course_id=#form.course_grid.original.course_id[Counter]#
</CFQUERY>
<CFELSEIF form.course_grid.rowstatus.action[Counter] IS "U">
<CFQUERY NAME="UpdateExistingCourse"
DATASOURCE="cfsnippets">
UPDATE courses
SET description=’#form.course_grid.description[Counter]#’,
"Number"=’#form.course_grid.number[Counter]#’
WHERE
course_id=#form.course_grid.original.course_id[Counter]#
</CFQUERY>
<CFELSEIF form.course_grid.rowstatus.action[Counter] IS "I">
<CFQUERY NAME="InsertNewCourse"
DATASOURCE="cfsnippets">
INSERT into courses
("Number", description)
VALUES (‘#form.course_grid.number[Counter]#’,
‘#form.course_grid.description[Counter]#’)
</CFQUERY>
</CFIF>
</CFLOOP>
</CFIF>
</BODY>
</HTML>
使用CFGRIDUPDATE
CFGRIDUPDATE标签可以根据CFGRID的内容直接对数据源进行更新,你不需要在CFQUERY中使用SQL语句来完成数据的更新,CFGRIDUPDATE标签可以直接取得CFGRID中的数据编辑信息,自动完成整个处理过程。
在前面的例子中,来自可编辑网格的数据被传给一个文件,该文件在CFIF结构中使用CFQUERY标签完成对数据源的更新,而在许多情况下,用CFGRIDUPDATE标签使程序更加简单。
例如,下面的代码从一个名为“Courses”的网格接收数据,对数据源进行更新。
<CFGRIDUPDATE GRID="Courses"
DATASOURCE="CF 4.0 Examples"
TABLENAME="Courses"
KEYONLY="NO">
当表单被提交时,存储有关数据修改信息的数组被传递给CFGRIDUPDATE标签,此标签根据这些数组的内容构造必要的SQL语句来完成数据的更新,从而你不必要自己构造复杂的SQL语句,非常方便。
KEYONLY属性
CFGRIDUPDATE标签包含一个KEYONLY属性,该属性可以强制ColdFusion对被更新字段的原始值与表中的字段值进行比较。如果两者相同,也就是说,在网格数据被编辑的过程的没有其它进程曾改变过数据库中的数据,则更新成功,如果两者不相同,则产生错误。当你要确保没有其它进程曾更新过该数据时,应设置KEYONLY=“NO”。如果不可能有其它进程更改该数据,可设置KEYONLY=“YES”。
在网格中嵌入图象
CFGRIDROW标签使你能够在网格单元格中放入图象,首先你要在CFGRIDCOLUMN标签中设置TYPE=“IMAGE”,以告诉ColdFusion将该列数据理解为一个图象。你可以使用ColdFusion的内建图象(与CFTREEITEM相同),也可以指定自选的图象。下面的这段代码演示了如何在网格中嵌入ColdFusion的内建图象。
...
<CFGRIDCOLUMN NAME="dept_name"
HEADER="Dept"
SELECT="NO"
DATAALIGN="Center"
WIDTH=40
TYPE=IMAGE>
<CFGRIDCOLUMN NAME="emp_lname"
HEADER="Name">
<CFGRIDROW DATA="folder,Jones">
<CFGRIDROW DATA="document,Smith">
...
注意,在CFGRIDROW中,用逗号将显示在第一列的图象名与显示在第二列的数据分隔开。
在网格中使用自己的图象
当你想用自己的图象代替ColdFusion的内建图象时,你需要指定该图象所在目录的相对路径,以及图象文件名。指定图象文件的相对路径时,要注意该路径是相对于支持CFGRID控件的Java类的路径,它通常是:
Webroot\cfide\classes\images
因此你可以指定一个此路径的相对路径,或者将要使用的图象文件放在cfide\classes\images目录下,然后即可直接使用文件名而无须指定路径,就象使用内建图象一样。
在下面的代码段中,CFGRIDROW标签使用了webroot\images目录下的图象文件:
...
<CFGRIDCOLUMN NAME="dept_name"
HEADER="Dept"
SELECT="NO"
DATAALIGN="Center"
WIDTH=40
TYPE=IMAGE>
<CFGRIDCOLUMN NAME="emp_lname"
HEADER="Name">
<CFGRIDROW DATA="..\..\..\images\icon1.gif,Jones">
<CFGRIDROW DATA="..\..\..\images\icon2.gif,Smith">
...
前页
目录
北极星书库