Home Products Support Library About us Login
About this image
Home > Products > SorTable+ >

Example 4: Checkboxes and buttons

51–60 of 56,256
Page: 2 3 4 5 6 7 8 9 10
  ID Name Description Latitude Longitude    
Add a new record
2,444 Abrahams Bay bay/inlet -46.94 168.02
4,757 Abrahams Bosom bay/inlet -47.06 168.16
54,912 Abran homestead -40.01 176.39
3,204 Abruzzi Glacier glacier -44.50 168.39
125,993 Abseil Peak hill -44.06 169.67
19,476 Absolum Creek stream -42.31 171.95
57,586 Abut Head point -43.11 170.26
42,278 Acacia Bay populated place -38.70 176.03
42,245 Acacia Bay North bay/inlet -38.71 176.02
125,981 Acacia Bay South bay/inlet -38.71 176.02
51–60 of 56,256
Page: 2 3 4 5 6 7 8 9 10

Here, the table is embedded in a ColdFusion form. Checked records are submitted when the form is submitted. Buttons are added to submit the form or to perform scripted actions. In this example, clicking a row will not submit the form.

Features of this example:

  • The table is embedded within a form.
  • The button column type is used.
  • Checkboxes allow multiple rows to be submitted simultaneously.
  • The sorTableGetSelectedValues() JavaScript function is used to discover which records are checked before the form is submitted.
  • The link attribute is left out, so that simply clicking on a row does nothing.
  • The 'add a new record' prompt is demonstrated.
  • The 'finestre' skin.
  • Locale-specific formatting for 'English (US)' (change this using the selector at bottom right).
Source code for this example 
<!--- 
Note that the database for this example must be set up as a datasource first. The Microsoft Access database is located in the examples folder. Place the datasource name in the request.dsn variable.

Microsoft Access is not recommended for web purposes, and is provided here for demonstration purposes only. Better performance will be achieved with enterprise databases.
--->

<cfimport prefix="esw" taglib="../customtags/eswsoftware/">

<cfset data = form>
<cfset structAppend(data, url)>
<cfif structKeyExists(data, "relatedId")>
	<cfoutput><p>Records selected: #htmlEditFormat(data.relatedId)#</p></cfoutput>
</cfif>

<cfif structKeyExists(data, "newRecord")>
	<cfoutput><p>A form to add a new record would be added here.</p></cfoutput>
</cfif>

<cfform action="example4.cfm">
	<esw:sortableplus 
		table="vPlaces"
		dbms="Microsoft Access"
		datasource="#request.dsn#"
		sortBy="pointname"
		rows="10"
		key="relatedid"
		style="width : 600px"
		skin="finestre"
		newRecordPrompt="Add a new record"
		newRecordLink="example4.cfm?newrecord"
		cachedwithin="#createTimeSpan(0, 0, 10, 0)#"
	>
	
		<esw:column
			caption=""
			column="relatedid"
			type="checkbox"
			sortable="false"
		/>	

		<esw:column
			column="relatedid"
			caption="ID"
			type="numeric"
		/>
		
		<esw:column
			column="pointname"
			caption="Name"
		/>
		
 		<esw:column
			column="pointdescriptionname"
			caption="Description"
		/>
		
		<esw:column
			column="Latitude"
			type="numeric"
			mask=".00"
		/>
		
		<esw:column
			column="Longitude"
			type="numeric"
			mask=".00"
		/>
		
		<esw:column
			column="relatedid"
			caption=""
			type="button"
			buttonLabel="Edit"
			sortable="false"
			onclick="alert('I would edit record ##value##...')"
		/>
		
		<esw:column
			column="relatedid"
			caption=""
			type="button"
			buttonLabel="Delete"
			sortable="false"
			onclick="alert('I would delete record ##value##...')"
			style="font-size : xx-small"
		/>

	</esw:sortableplus>
	<input type="submit" value="Submit this form">
	<button type="button" onclick="alert(sorTableGetSelectedValues('relatedId'))">What is checked?</button>
</cfform>

To run the example, you will need to:-
ESWsoftware, PO Box 19599, Woolston, Christchurch 8241, New Zealand. esw@eswsoftware.com

Here are the ESWsoftware.com tools being used to build this page: Live visitor tracking enabled with cf_siteInsight. Sortable table of records generated by SorTable+ (in development).