因為有了比較成型的CMS,一直沒有捨棄ASP,一直想用.net重寫一下,是後話了。 jqGrid是優秀的基於jQuery的DataGrid框架,想必大夥兒也不陌生,網路上基於ASP的資料很少,我提供一個,資料格式是json的:
、一個針對jqGrid的json類別:這段程式碼似乎是由官網論壇的一些PHP轉化而來,我們存為json.asp,程式碼貼一下:
複製代碼代碼如下:
<%
response.Charset=utf-8
'---------------------------------------
' JSONClass類
' 將Select語句的執行結果轉換成JSON
'------------------------------------------
Class JSONClass
' 定義類別屬性,預設為Private
Dim SqlString ' 用來設定Select
Dim JSON ' 傳回的JSON物件的名稱
Dim DBConnection ' 連接到資料庫的Connection對象
' 可以外部呼叫的公共方法
Public Function GetJSON ()
dim Rs
dim returnStr
dim i
dim oneRecord
' 取得數據
Set Rs= Server.CreateObject(ADODB.Recordset)
Rs.open SqlString,DBConnection,1,1
if page<> then
epage=cint(page)
if epage<1 then epage=1
if epage>rs.pagecount then epage=rs.pagecount
else
epage=1
end if
rs.pagesize = rows
rs.absolutepage = epage
' 產生JSON字串
if Rs.eof=false and Rs.Bof=false then
returnStr={ total: & rs.pagecount &, page: & page &, records: & rs.recordcount &, rows:[
for j=0 to rs.pagesize-1
if rs.bof or rs.eof then exit for
' -------
'oneRecord = {id: & chr(34) &Rs.Fields(0).Value&chr(34)&,cell:[& chr(34) &Rs.Fields(0).Value&chr(34)&,
oneRecord = {id: & chr(34) &Rs.Fields(0).Value&chr(34)&,cell:[& chr(34) &Rs.Fields(0).Value&chr(34)&,
for i=1 至 Rs.Fields.Count -1
'oneRecord=oneRecord & chr(34) &Rs.Fields(i).Name&chr(34)&:
oneRecord=oneRecord & chr(34) &Rs.Fields(i).Value&chr(34) &,
Next
'去除記錄最後一個欄位後的,
oneRecord=left(oneRecord,InStrRev(oneRecord,,)-1)
oneRecord=oneRecord & ]},
'------------
returnStr=returnStr & oneRecord
Rs.MoveNext
next
' 移除所有記錄數組後的,
returnStr=left(returnStr,InStrRev(returnStr,,)-1)
returnStr=returnStr & ]}
end if
Rs.close
set Rs=Nothing
GetJSON=returnStr
End Function
'私用方法,在類別中使用
Private Function check()
End Function
'
End Class
%>
2.製作顯示資料的asp文件,如:list.asp,程式碼如下
複製代碼代碼如下:
<!--#include file=conn.asp -->
<!--#include file=json.asp -->
<%
dim page,rows,sidx,sord
page = request.QueryString(page) 'page
rows = request.QueryString(rows) 'pagesize
sidx = request.QueryString(sidx) 'order by ??
sord = request.QueryString(sord)
if page= then page = 1 end if
if rows = then rows = 10 end if
if sidx = then sidx = id end if
if sord = then sord =asc end if
Dim strSearchOn, strField, strFieldData, strSearchOper, strWhere
strSearchOn = Request(_search)
If (strSearchOn = true) Then
strField = Request(searchField)
If (strField = id Or strField = 標題 Or strField = NickName) Then
strFieldData = Request(searchString)
strSearchOper = Request(searchOper)
'construct where
strWhere = Where & strField
Select Case strSearchOper
Case bw : 'Begin With
strFieldData = strFieldData & %
strWhere = strWhere & LIKE ' & strFieldData & '
Case eq : 'Equal
If(IsNumeric(strFieldData)) Then
strWhere = strWhere & = & strFieldData
Else
strWhere = strWhere & = ' & strFieldData & '
End If
Case ne: 'Not Equal
If(IsNumeric(strFieldData)) Then
strWhere = strWhere & <> & strFieldData
Else
strWhere = strWhere & <> '& strFieldData &'
End If
Case lt: 'Less Than
If(IsNumeric(strFieldData)) Then
strWhere = strWhere & < & strFieldData
Else
strWhere = strWhere & <'& strFieldData &'
End If
Case le: 'Less Or Equal
If(IsNumeric(strFieldData)) Then
strWhere = strWhere & <= & strFieldData
Else
strWhere = strWhere & <= '& strFieldData &'
End If
Case gt: 'Greater Than
If(IsNumeric(strFieldData)) Then
strWhere = strWhere & > & strFieldData
Else
strWhere = strWhere & > '& strFieldData &'
End If
案例 ge: 'Greater Or Equal
If(IsNumeric(strFieldData)) Then
strWhere = strWhere & >= & strFieldData
Else
strWhere = strWhere & >= '& strFieldData &'
End If
Case ew : 'End With
strWhere = strWhere & LIKE '% & strFieldData & '
Case cn : 'Contains
strWhere = strWhere & LIKE '% & strFieldData & %'
End Select
End if
End If
server.ScriptTimeout=9000
dim a
set a=new JSONClass
a.Sqlstring=Select id,Title,NickName,Pwd,LastLoginTime From Admin&strWhere& &order by & sidx & & sord
a.dbconnection=conn
response.Write(a.GetJSon())
conn.close()
set conn = nothing
%>
裡面把搜尋的程式碼涵蓋了。這樣基本實作了讀,至於jqGrid中的editurl的文件,我們稱之為edit.asp,程式碼如下:
複製代碼代碼如下:
<%Option Explicit%>
<!--#include file=config.asp-->
<%
Dim strOper, strID, strNickName, strTitle, strPwd
strOper = Request(oper)
strID = Replace(Request(Id),','')
strTitle = Replace(Request(Title),','')
strNickName = Replace(Request(NickName),','')
strPwd = Replace(Request(Pwd),','')
Select Case strOper
Case add: 'Add Record
strSQL = Insert Into Admin (Title, NickName, Pwd,LastLoginTime) Values('&strTitle&', '&strNickName&', '&strPwd&',Now())
Case edit: 'Edit Record
strSQL = Update Admin Set />Case del: 'Delete Record
strSQL = Delete From Admin Where id = &strID
End Select
'response.Write strSQL
Dim strSQL,rs
Call OpenDB()
Set rs = Conn.Execute(strSQL)
Call CloseDB()
%>
這是前台index.html代碼
複製代碼代碼如下:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>ASP_jqGrid_Test</title>
<link rel=stylesheet type=text/css href=jquery-ui-1.7.2.custom.css/>
<link rel=stylesheet type=text/css href=jqgrid.css/>
<link rel=stylesheet type=text/css href=ui.multiselect.css/>
<script type=text/javascript src=js/jquery.js></script>
<script type=text/javascript src=js/cn.js></script>
<script type=text/javascript src=js/jqGrid.js></script>
</head>
<body>
<table id=DataGrid class=scroll></table>
<div id=pager class=scroll style=text-align:center;></div>
</body>
</html>
<script type=text/javascript>
jQuery(#DataGrid).jqGrid({
url:'list.asp',
datatype: json,
colNames:['ID','管理員帳號','管理者暱稱','密碼','上次登入時間'],
colModel :[
{
name:'Id',
index:'Id',
width:50
},
{
name:'Title',
index:'Title',
editable:true,
editrules:{
required:true
}
},
{
name:'NickName',
index:'NickName',
editable:true,
editrules:{
required:true
}
},
{
name:'Pwd',
index:'Pwd',
editable:true,
edittype:'password',
hidden:true,
editoptions:{
size:20
},
editrules:{
edithidden:true
}
},
{
name:'LastLoginTime',
index:'LastLoginTime',
align:'right',
editrules:{
required:true
}
} ], caption:管理員列表,
imgpath:'/images',
multiselect: true,
rowNum:20,
rowList:[10,20,30],
pager: jQuery('#pager'),
sortname: 'Id',
viewrecords: true,
sortorder: desc,
height:400,
width:600,
editurl:edit.asp
});
$('#DataGrid').navGrid('#pager',{
refresh: true,
edit: true,
add: true,
del: true,
search: true,
searchtext:搜尋,
edittext:改,addtext:添,deltext:刪
});
</script>
jqGrid,好東西~~