Because I have a relatively mature CMS, I have never given up on ASP. I have always wanted to rewrite it using .net, but that is a story for another time. jqGrid is an excellent DataGrid framework based on jQuery, which everyone must be familiar with. There is very little information based on ASP on the Internet. I will provide one. The data format is json:
, a json class for jqGrid: This code seems to be converted from some PHP in the official website forum. We save it as json.asp and paste the code:
Copy the code code as follows:
<%
response.Charset=utf-8
'---------------------------------------
'JSONClass class
' Convert the execution result of the Select statement into JSON
'---------------------------------------------
ClassJSONClass
'Define class attributes, default is Private
Dim SqlString ' used to set Select
Dim JSON 'The name of the returned JSON object
Dim DBConnection 'Connection object to the database
'Public methods that can be called externally
Public Function GetJSON()
dim Rs
dim returnStr
dim i
dim oneRecord
' Get data
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
' Generate JSON string
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 to 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
'After removing the last field of the record,
oneRecord=left(oneRecord,InStrRev(oneRecord,,)-1)
oneRecord=oneRecord & ]},
'-------------
returnStr=returnStr & oneRecord
Rs.MoveNext
next
' After removing all record arrays,
returnStr=left(returnStr,InStrRev(returnStr,,)-1)
returnStr=returnStr & ]}
end if
Rs.close
set Rs=Nothing
GetJSON=returnStr
End Function
'Private method, used in the class
Private Function check()
End Function
'
End Class
%>
2. Create an asp file that displays data, such as: list.asp, the code is as follows
Copy the code code as follows:
<!--#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 = Title 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
Case 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
%>
The search code is covered in it. This basically implements reading. As for the editurl file in jqGrid, we call it edit.asp. The code is as follows:
Copy the code code as follows:
<%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
CallOpenDB()
Set rs = Conn.Execute(strSQL)
Call CloseDB()
%>
This is the frontend index.html code
Copy the code code as follows:
<!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','Administrator account','Administrator nickname','Password','Last login time'],
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:Administrator list,
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:search,
edittext: change, addtext: add, deltext: delete
});
</script>
jqGrid, good stuff~~