jqGrid是一個優(yōu)秀的基于jQuery的DataGrid框架，想必大伙兒也不陌生，網(wǎng)上基于ASP的資料很少，我提供一個，數(shù)據(jù)格式是json的：
、一個針對jqGrid的json類：這段代碼似乎是由官網(wǎng)論壇的一些PHP中轉(zhuǎn)化而來，我們存為json.asp，代碼貼一下：
復制代碼 代碼如下:
%
response.Charset="utf-8"
'---------------------------------------
' JSONClass類
' 將Select語句的執(zhí)行結(jié)果轉(zhuǎn)換成JSON
'------------------------------------------
Class JSONClass
' 定義類屬性，默認為Private
Dim SqlString ' 用于設(shè)置Select
Dim JSON ' 返回的JSON對象的名稱
Dim DBConnection ' 連接到數(shù)據(jù)庫的Connection對象
' 可以外部調(diào)用的公共方法
Public Function GetJSON ()
dim Rs
dim returnStr
dim i
dim oneRecord
' 獲取數(shù)據(jù)
Set Rs= Server.CreateObject("ADODB.Recordset")
Rs.open SqlString,DBConnection,1,1
if page>"" then
epage=cint(page)
if epage1 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).Valuechr(34)",cell:[" chr(34) Rs.Fields(0).Valuechr(34)","
oneRecord = "{id:" chr(34) Rs.Fields(0).Valuechr(34)",cell:[" chr(34) Rs.Fields(0).Valuechr(34)","
for i=1 to Rs.Fields.Count -1
'oneRecord=oneRecord chr(34) Rs.Fields(i).Namechr(34)":"
oneRecord=oneRecord chr(34) Rs.Fields(i).Valuechr(34) ","
Next
'去除記錄最后一個字段后的","
oneRecord=left(oneRecord,InStrRev(oneRecord,",")-1)
oneRecord=oneRecord "]},"
'------------
returnStr=returnStr oneRecord
Rs.MoveNext
next
' 去除所有記錄數(shù)組后的","
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、制作顯示數(shù)據(jù)的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
%>
里面把搜索的代碼涵蓋了。這樣基本實現(xiàn)了讀，至于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，好東西~~
您可能感興趣的文章:- jqGrid隨窗口大小變化自適應大小的示例代碼
- Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼
- JQGrid的用法解析(列編輯,添加行,刪除行)
- jquery增加時編輯jqGrid(實例代碼)
- jQuery中jqGrid分頁實現(xiàn)代碼
- 一個關(guān)于jqGrid使用的小例子(行按鈕)
- 給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接（之一）
- jqGrid jQuery 表格插件測試代碼
- jqgrid 簡單學習筆記
- jQuery jqgrid 對含特殊字符json 數(shù)據(jù)的 Java 處理方法
- jquery下動態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法
- jqGrid 學習筆記整理——進階篇(一 )
