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

Example 4: Checkboxes and buttons

81–90 of 56,256
Page: 5 6 7 8 9 10 11 12 13
  ID Name Description Latitude Longitude    
Add a new record
23,642 Acheron River stream -42.34 172.98
24,643 Acheron River stream -41.92 173.32
24,785 Acheron River stream -41.99 173.28
24,618 Acheron Saddle pass -41.92 173.29
39,304 Acheson Crossing miscellaneous place -37.10 175.16
39,288 Acheson Stream stream -37.10 175.16
11,903 Achilles hill -43.56 170.72
37,269 Achilles Point point -36.84 174.86
55,195 Achmore homestead -40.43 176.41
23,769 Achray homestead -42.69 172.98
81–90 of 56,256
Page: 5 6 7 8 9 10 11 12 13

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