ASP 使用jqGrid实现读写删的代码(json)


  本文标签:ASP,json,jqGrid

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 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
去除记录最后一个字段后的","
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 = "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
%>

里面把搜索的代码涵盖了 。这样基本实现了读,至于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 Title = "&strTitle&", NickName = "&strNickName&", Pwd = "&strPwd&" Where id = "&strID
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,好东西''