jquery插件：jqgrid的入门使用心得

时间：2010-09-07 来源：yaoshiyou

jquery插件：jqgrid的入门使用心得

作者：Sissy.Nong.C 来源：博客园发布时间：2009-07-13 14:36 阅读：1076 次原文链接 [收藏]

原文：http://hi.baidu.com/yeakyang/blog/item/84e52a77da52061fb051b9cb.html

http://www.trirand.com/blog/

演示：http://trirand.com/jqgrid/jqgrid.html

最新版本：http://www.secondpersonplural.ca/jqgriddocs/index.htm

jqgrid挺好用的，可惜全是英文文档
http://hi.baidu.com/yeakyang/blog/item/673a1b226ed9bff7d6cae221.html
1.json格式：

{ total: xxx, page: yyy, records: zzz, rows: [
{id:”1″,cell:[”Row 1:1″,”Row 1:2″,”Row 1:3″,”Row 1:4″]},
{id:”2″,cell:[”Row 2:1″,”Row 2:2″,”Row 2:3″,”Row 2:4″]},
{id:”3″,cell:[”Row 3:1″,”Row 3:2″,”Row 3:3″,”Row 3:4″]},
…

]}
2.中文问题
一般不会有，如果不巧数据库中是用中文作为字段名，那就要注意了，排序的时候要用escape和unescape
具体它的原来的js文件要改一下，在传递sidx的时候要先escape一下：在jquery.jqgrid.js文件里查找 sidx就只有一行：
var gdata = {page: ts.p.page, rows: ts.p.rowNum, sidx: ts.p.sortname, sord:ts.p.sortorder, _nd: (new Date().getTime())}

改为
var gdata = {page: ts.p.page, rows: ts.p.rowNum, sidx: escape(ts.p.sortname), sord:ts.p.sortorder, _nd: (new Date().getTime())}
page,和rows为数字，不存在中文问题，sord为asc或者desc也没有问题，然后在你asp接收页面中使用
unescape(request.querystring("sidx"))即可。

asp的json文件如下：

<%
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:["
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
%>
<%
dim page,rows,sidx,sord
page = request.QueryString("page") 'page
rows = request.QueryString("rows") 'pagesize
sidx = unescape(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
%>

'下面为使用示例

<%
server.ScriptTimeout=9000
dim a
set a=new JSONClass
a.Sqlstring="Select id,学号,姓名,学籍号 From t_学生信息 order by "& sidx & " " & sord
a.dbconnection=conn
response.Write(a.GetJSon())

conn.close()
set conn = nothing

'Set objStream = Server.CreateObject("ADODB.Stream")
'With objStream
' .Type = 2
' .Mode = 3
' .Open
' .Charset = "utf-8"
' .Position = objStream.Size
' .WriteText= a.GetJSon()
' .SaveToFile Server.MapPath("a1.txt"),2
' .Close
'End With
'Set objStream = NoThing
%>

html页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="jqGrid/grid.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="list2" class="scroll" cellpadding="0" cellspacing="0" height="500"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
</html>
<script type="text/javascript" src="jquery/jquery-latest.pack.js"></script>
<script type="text/javascript" src="jqGrid/jquery.jqGrid.js"></script>
<script type="text/javascript">
jQuery("#list2").jqGrid({
    url:'json_jqgrid.asp',
    datatype: "json",
    colNames:['id','学号','姓名'],
    colModel:[
        {name:'id',index : 'id', width : 80, sortable : true, align: 'left'},
        {name:'姓名',index : '姓名', width : 80, sortable : true, align: 'left'},
        {name:'学籍号',index : '学籍号', width : 180, sortable : true, align: 'left'}
        //{name:'s4',index : 's4', width : 80, sortable : true, align: 'left'}
    ],
    rowNum:20,
    rowList:[20,50,100],
    imgpath: 'jqGrid',
    pager: jQuery('#pager2'),
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
       width:400
});
</script>