Menggunakan jqGrid di Classic ASP

Tidak beda jauh dengan JQGrid featuring PHP, JQGrid tetap dapat digunakan untuk aplikasi yang dibangun dengan ASP Classic. Ada 3 file asp library yang saya gunakan yaitu Mathematic.asp, JQGrid.asp, dan JSON library untuk ASP Classic. Mathematic.asp berisi fungsi matematika yang salah satunya terdapat fungsi ceil, JQGrid.asp sebagai helper untuk operasi pada JQGrid, dan JSON library untuk melakukan encode decode JSON yang dibutuhkan oleh JQGrid.

Mathematic.asp berisi sintaks seperti di bawah ini :

Function ceil(number) 
	Dim numberRef numberRef = CDbl(number) 
	If Int(numberRef * 10) MOD 10 > 0 Then 
		ceil = Int(numberRef) + 1 
	Else 
		ceil = Int(numberRef) 
	End If 
End Function

Include Mathematic.asp dan JSON library ke dalam helper JQGrid.asp, helper ini sendiri berisi sintaks seperti di bawah ini :

Dim 
	command, 
	where, 
	searchField, 
	searchOper, 
	searchString, 
	ops, 
	opsRef 
Dim page, 
	limit, 
	sidx, 
	sord, 
	start, 
	count, 
	totalPage, 
	ceilParam, 
	lengthWhere, 
	querySQL 
Set command = Request("command") 

Sub postWhere() 
	Set ops = CreateObject("Scripting.Dictionary") 
	Set searchField = Request("searchField") 
	Set searchOper = Request("searchOper") 
	Set searchString = Request("searchString") 
	If Request("_search") = "true" Then 
		ops.add "eq","=" 
		ops.add "ne","<>" 
		ops.add "lt","<" 
		ops.add "le","<=" ops.add "gt",">" 
		ops.add "ge","=>" 
		ops.add "bw","LIKE" 
		ops.add "bn","NOT LIKE" 
		ops.add "in","LIKE" 
		ops.add "ni","NOT LIKE" 
		ops.add "ew","LIKE" 
		ops.add "en","NOT LIKE" 
		ops.add "cn","LIKE" 
		ops.add "nc","NOT LIKE" 
	End If 
	For Each key in ops 
		If searchOper = key Then 
			opsRef = ops(key) 
		End If Next 
		If searchOper = "eq" Then 
			searchString = searchString 
		End If 
		If (searchOper = "bw" Or searchOper = "bn") Then 
			searchString = searchString & searchString 
		End If 
		If searchOper = "ew" Or searchOper = "en" Then 
			searchString = searchString & "%" & searchString 
		End If 
		If searchOper = "cn" Or searchOper = "nc" Or searchOpern = "in" Or searchOper = "ni" Then 
			searchString = searchString & "%" & searchString & "%" 
		End If 
		where = searchField & opsRef & "'" & searchString &"'" 
End Sub 

Sub gridComponent(fieldKey, table) 
	Call postWhere() 
	Set page = Request("page") 
	Set limit = Request("rows") 
	Set sidx = Request("sidx") 
	Set sord = Request("sord") 
	start = limit * page - limit 
	If start < 0 Then start = 0 End If Set resultSet = Server.createObject("ADODB.Recordset") resultSet.Open "SELECT COUNT("& fieldKey &") AS TotalRecord FROM " & table, connection If Not resultSet.Eof Then count = CInt(resultSet.Fields("TotalRecord")) Else count = 0 End If resultSet.Close Set resultSet = Nothing ceilParam = count/limit If count > 0 Then
		totalPage = ceil(ceilParam) 
	Else 
		totalPage = 0 
	End If 
	If page > totalPage Then 
		page = totalPage 
	End If 
	lengthOps = Len(opsRef) 
	If Not lengthOps = 0 THEN 
		querySQL = "SELECT * FROM " & table & " WHERE " & where & " ORDER BY " & sidx & " " & sord & " LIMIT " & limit 
	Else 
		querySQL = "SELECT * FROM " & table & " ORDER BY " & sidx & " " & sord & " LIMIT " & limit 
	End If 
	Set resultSet = Server.createObject("ADODB.Recordset") 
	resultSet.Open querySQL, connection 
End Sub 

Function myCell(id, cellArray) 
	Dim o : 
		Set o = jsObject 
		o("id") = id 
		o("cell") = cellArray 
		Set myCell = o 
End Function

Untuk mencoba load data dan helper JQGrid.asp di atas, saya membuat sebuah controller Classic ASP yang dapat mengirimkan data berdasarkan request dari JQGrid table dalam bentuk format JSON. Controller ini bernama UserController.asp

command = Request("command") 
If command = "load" Then 
	Call loadData() 
End If 

Sub loadData 
	Call gridComponent("guru_id","guru") 
	Set myData = jsObject() 
	myData("page") = page 
	myData("total") = totalPage 
	myData("records") = count 
	Set myData("rows") = jsArray() 
	Do While Not resultSet.Eof 
		nama = resultSet.Fields("nama") 
		guruID = resultSet.Fields("guru_id") 
		sandi = resultSet.Fields("sandi") 
		Set myData("rows")(Null) = myCell(guruID, array(guruID,nama,sandi)) 
		resultSet.MoveNext 
		Loop myData.Flush 
End Sub

Untuk javascript JQGrid kira-kira seperti di bawah ini :

$(document).ready(
	function(){ 
		$("#gridUser").jqGrid(
			{ 
				url:"/Controller/UserController.asp?command=load", 
				mtype:'post', 
				datatype:"json", 
				colNames:[ 'ID Guru', 'Nama', 'Sandi' ], colModel:[ { name:'guru_id', index:'guru_id', width:30 }, { name:'nama', index:'nama', width:30, sortable:true }, { name:'sandi', index:'sandi', width:30, sortable:true } ], 
				autowidth: true, 
				height: 280, 
				rowNum:10, 
				rowList:[10,20,30], 
				pager: "#pagerUser", 
				sortname: "guru_id", 
				viewrecords: true, 
				sortorder: "asc", 
				caption:"Data Guru" 
			}
		); 
		$("#gridUser").jqGrid('navGrid','#pagerUser',{add:false,del:false,edit:false}); 
	}
);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.