ToHtml, print query ke dalam bentuk table html


Masih menggunakan contoh query dari postingan sebelumnya, kali ini mengubah query ke dalam bentuk table html.


Idenya adalah memberikan class pada setiap cell data, sesuai dengan kolomnya masing-masing.

<cffunction 
	name="ToHtml" 
	output="Yes" 
	returntype="string" 
	hint="Transforms the query object into an HTML TABLE block"
	>
	
	<cfargument 
		name="query" 
		required="Yes" 
		type="query" 
		hint="query object to transforms"
		/>
	
	<cfsavecontent variable="LOCAL.html">
		<table>
			<thead>
				<tr>
					<cfset LOCAL.columnCounter = 0 />
					<cfloop array="#ARGUMENTS.query.getMetaData().getColumnLabels()#" index="columnName">
						<cfset LOCAL.columnCounter++ />
						<th class="column#LOCAL.columnCounter#">#columnName#</th>
					</cfloop>
				</tr>
			</thead>
			<tbody>
				<cfloop query="ARGUMENTS.query">
					<cfset LOCAL.currentRow = ARGUMENTS.query.currentRow />
					<tr>
						<cfset LOCAL.columnCounter = 0 />
						<cfloop array="#ARGUMENTS.query.getMetaData().getColumnLabels()#" index="columnName">
							<cfset LOCAL.columnCounter++ />
							<td class="column#LOCAL.columnCounter#">#ARGUMENTS.query[columnName][LOCAL.currentRow]#</td>
						</cfloop>
					</tr>
				</cfloop>
			</tbody>
		</table>
	</cfsavecontent>
	
	<cfreturn LOCAL.html />
	
</cffunction>

Untuk menampilkannya kita bisa menggunakan cara seperti ini

<cfset query_HTML = ToHtml(query) />

<cfoutput>
#query_HTML#
</cfoutput>

Hasil outputnya dalam bentuk HTML adalah seperti ini

<table>
	<thead>
		<tr>
			<th class="column1">varchar_1</th>
			<th class="column2">numeric_2</th>
			<th class="column3">date_3</th>			
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="column1">varchar 1 baris 1</td>
			<td class="column2">21</td>
			<td class="column3">{ts '2010-09-21 00:00:00'}</td>
		</tr>
		<tr>
			<td class="column1">varchar 1 baris 2</td>
			<td class="column2">22</td>
			<td class="column3">{ts '2010-09-22 00:00:00'}</td>
		</tr>
		<tr>
			<td class="column1">varchar 1 baris 3</td>
			<td class="column2">23.5</td>
			<td class="column3">{ts '2010-09-23 00:00:00'}</td>
		</tr>
	</tbody>
</table>

ToHtml ini ada dalam salah satu builtin function di Open BlueDragon.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: