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

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,好东西~~

(0)

相关推荐

  • jqgrid 简单学习笔记

    JqGrid文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs JqGrid Demo:http://trirand.com/blog/jqgrid/jqgrid.html#t107 JqGrid的基础,我这里就不做介绍了,不知道的可以去看看博客园或Google,最好去看文档.先看效果图: 本Demo可以查询.修改.分组.新增.删除等一些基本功能都可以去JqGrid Demo中找到. 逻辑思路:第一次加载本年度的经营计

  • jqGrid随窗口大小变化自适应大小的示例代码

    第一种: jqGrid随窗口大小变化自适应宽度 复制代码 代码如下: $(function(){            $(window).resize(function(){            $("#listId").setGridWidth($(window).width());        });       }); 第二种: 复制代码 代码如下: window.onresize = function  _doResize() {  var ss = pageSize()

  • Jqgrid设置全选(选择)及获取选择行的值示例代码

    1.添加multiselect: true 2.获取选择行的值 复制代码 代码如下: var rowData = jQuery('#List').jqGrid('getGridParam','selarrrow');    if(rowData.length)     {        for(var i=0;i<rowData.length;i++)        {           var name= jQuery('#List').jqGrid('getCell',rowData[i]

  • jQuery中jqGrid分页实现代码

    (1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT

  • jqGrid jQuery 表格插件测试代码

    官方Demo地址:http://www.trirand.com/blog/jqgrid/jqgrid.html 效果图: 页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • 一个关于jqGrid使用的小例子(行按钮)

    复制代码 代码如下: <!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> <title>jqGrid的JSO

  • jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法

    看到很多网上对含特殊字符 json 数据处理,都是逐个判断是哪个特殊字符,比如回车如何处理,引号如何处理.其实有现成的代码库可以做这件事情,下载 json-lib-2.3-jdk15.jar : 复制代码 代码如下: import net.sf.json.util.JSONUtils; String str = (String) value; String s1 = JSONUtils.quote(str);//首尾带引号 String s3 = JSONUtils.stripQuotes(s1

  • jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

    一般的,一个jqGrid的基本属性有一下几个常用的. 复制代码 代码如下: $("#id").jqGrid({ url: "", datatype: "local", postData: { strJson: Data }, mtype: "post", height: 45, width: 450, rowNum: rum, //每页的记录数 pgtext: "第{0}页 共{1}页", pgbutton

  • jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • jquery增加时编辑jqGrid(实例代码)

    复制代码 代码如下: function showTestSubjectGrid() {    $("#testSubjectGrid").jqGrid({        url: "",        datatype: "json",        height: 215,        width: 480,        caption: "测试科目",        autoheight: true,        a

  • 给jqGrid数据行添加修改和删除操作链接(之一)

    我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 然后在数据加载完成后,给每行添加了 修改和删除链接 jqGrid完成的事件是gridComplete:function(){}(可以理解为数据都准备好了), 因为从数据库获取到的json数据没有带修改和删除两项,所以在之后的

  • JQGrid的用法解析(列编辑,添加行,删除行)

    复制代码 代码如下: <script> $(document).ready(function(){ initPlsfList();});//初始化grid列表function initPlsfList(){ //缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段 var cellArray = new Array(); cellArray["zoneID"] ="ZONE_ID";  cellArray["factor

随机推荐