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

Example 4: Checkboxes and buttons

1–10 of 56,256
Page: 1 2 3 4 5 6 7 8 9
  ID Name Description Latitude Longitude    
Add a new record
49,272 15 Mile Creek stream -40.80 172.51
49,268 17 Mile Creek stream -40.80 172.47
23,339 1st Basin mountain basin -41.84 172.81
38,339 1st Staircase miscellaneous place -38.45 174.64
23,337 2nd Basin mountain basin -41.85 172.79
38,340 2nd Staircase miscellaneous place -38.41 174.63
23,334 3rd Basin mountain basin -41.86 172.78
16,231 45th Parallel marker historic -44.99 171.04
128,888 46 South homestead -46.03 167.96
23,332 4th Basin mountain basin -41.87 172.77
1–10 of 56,256
Page: 1 2 3 4 5 6 7 8 9

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).