-->ColdFusion 初级教程-->建立可更新的网格

ColdFusion

后页 前页
目录
北极星书库
建立可更新的网格


你可以建立允许用户进行数据编辑的网格,根据用户的编辑结果,你可以用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">


...


后页
前页
目录
北极星书库