基于JQuery对开源插件jgGrid的功能应用

基于ＪＱｕｅｒｙ对开源插件ｊｇＧｒｉｄ的功能应用　

蝴匕渝涛　

摘　要：详细介绍了在ｊｑＧｒｉｄ的运行环境及以ＡＳＰ．ＮＥＴ作为服务器端实现数据加载、分页、查　

找、添加、编辑、删除、浏览等功能的编程实现。　．　

关键词：ｊｑＧｒｉｄ；ＡＳＰ．ＮＥＴ；ＪＱｕｅｒｙ插件　

１　引言　

ｉｑＧｒｉｄ是一个开源的，用于客户端显示和操作表格数据的　

ＪＱｕｅｒｙ插件。它通过Ａｊａｘ回调动态加载数据，并能轻松实现　

数据的动态显示、分页、查找、编辑等多项功能。支持数据类　

型丰富，并且可方便实现自定义界面主题风格。　

作为一个客户端的数据操作解决方案，它可以集成到任何　

服务器端技术，包括ＰＨＰ、ＪＳＰ、ＡＳＰ、ＡＳＰ．ＮＥＴ、Ｐｅｒｌ等。由　

于ｊｑＧｒｉｄ是基于ＪＱｕｅｒｙ的插件，而ＪＱｕｅｒｙ已成为微软最新发　

布的ＡＳＰ．ＮＥＴ　ＭＶＣ　Ｆｒａｍｅｗｏｒｋ的一部分，因此．在ＡＳＰ．ＮＥＴ　

ＭＶＣ项目中使用ｊｑＧｒｉｄ显示和操作表格数据是一个不错的选　

择。将以ＡＳＰ．ＮＥＴ为服务器端，说明ｊｑＧｒｉｄ的数据加载、分　

页、查找、编辑等功能的使用。　

２　ｉｑＧｒｉｄ的使用　

２．１　运行环境　

目前，ｊｑＧｒｉｄ最新发布的版本为３．６（ｈｔｔｐ：／／ｗｗｗ．ｔｒｉｒａｎｄ．　

ｅｏｍ／ｂｌｏｇ／？ｐａｇｅ

—

ｉｄ＝６），作为一个开源的ＪＱｕｅｒｙ插件，ｊｑＧｒｉｄ　

３．６的运行还需要ｊＱｕｅｒｙ　１．３．２（ｈｔｔｐ：／／ｄｏｃｓ．ｊｑｕｅｒｙ．ｃｏｒｎ／　

Ｄｏｗｎｌｏａｄｉｎｇ

＿

ＪＱｕｅｒｙ）和ｊＱｕｅｒｙ　ｕＩ　１．７．２（ｈｔｔｐ：／／ｗｗｗ．ｊｑｕｅｒｙｕｉ．　

ｃｏｍ／ｄｏｗｎｌｏａｄ）的支持。相关文件可分别到其官方网站下载。　

在Ｍｉｃｒｏｓｏｆｌ　Ｖｉｓｕａｌ　Ｓｔｕｄｉｏ　２００８中新建一个“ＡＳＰ．ＮＥＴ　Ｗｅｂ　

应用程序”项目，并在该项目下建立一个“ｊｑｇｒｉｄ”目录，将　

以上下载的支持文件放置于该目录下。如图１所示．其中　

ｊｑＧｒｉｄ的主题样式ｊｑｕｅｒｙ—ｕｉ一１．７．２．ｃｕｓｔｏｍ．ＣＳＳ文件和ｉｍａｇｅｓ目　

录，在下载ｊＱｕｅｒｙ　ｕＩ　１．７．２时可进行选择，示例中选择的是　

“

ｓｍｏｏｔｈｎｅｓｓ”主题样式。　

ｉ　

文件夹　

ｇｒｉｄ　ｌｏｃｄｅ—ｅｎ　Ｊ　

３髓Ｊｓｅｒｉｐｔ　ＳｅｒｉＤｔ　Ｆｉ１ｅ　

ｊｑｕｅｒｙ－Ｉ　３　２　ｍｉｎ　Ｊ　

５６髓３＂３￣ｒｉｐｔ　Ｓｃｒｉｐｔ　Ｆｉ１ｅ　

ＪｑｕｅｒｙｊｑＧｒｉｄ　ｍｉｎ　Ｊ　

２０２硒８３ｅｒｉｐｔ　Ｓｅｒｉｐｔ　Ｆｉｌ　ｅ　

Ｊｑｕｅｒｙ－ｕｉ一１　Ｔ　２　ｃｕ＝ｔ蛳ｃｓ　

２７邱ｃａｓｃａｄｉｎｇ　Ｓｔｙ１ｅ　Ｓｈｅｅｔ　Ｄｏｃｕｍｅｎｔ　

Ｊｑｕｅｒｙ－ｕｉ一１　Ｔ　２　ｅｎｓｔｏｍ　ｍｉｎ　ｊ＝　

１８９邸Ｊｇｃｒｉｐｔ　Ｓｃｒｉｐｔ　Ｆｉｌｅ　

ｕＩ　Ｊｑ４￣＇ｉｄ　ｃ＝ｓ　

１０髓Ｃ４ｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ　Ｄｏ￣￣ｅｎｔ　

图１　ｊｑＧｒｉｄ运行所需文件　

在项目中添加一个“ｊｇｄｅｍｏ．ｈｔｍ”文件，编辑该文件，在　

其头部添加如下代码：　

＜ｈｅａｄ＞　

＜ｌｉｎｋ　ｒｅｌ＝“ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ：“ｔｅｘｔ／ｃＳＳ”ｍｅｄｉａ＝“ｓｃｒｅｅｎ’　’

ｈｒｅｆ＝“ｊｑｇｒｉｄ／ｊｑｕｅｒｙ—ｕｉ一１．７．２．ｃｕｓｔｏｍ．ＣＳＳ”／＞　

＜ｌｉｎｋ　ｒｅｌ＝“ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”ｍｅｄｉａ：“ｓｃｒｅｅｎ’’　

ｈｒｅｆ＝“ｊｑｇｒｉｄ／ｕｉ．ｊｑｇｒｉｄ．ＣＳＳ”／＞　

＜ｓｃｒｉｐｔ　ｓｒｃ＝“ｊｑｇｒｉｄ４ｑｕｅｒｙ－１．３．２．ｍｉｎ．ｊｓ”ｔｙｐｅ＝“ｔｅｘｔ／　

ｊａｖａｓｃｒｉｐｔ”＞＜／ｓｃｒｉｐｔ＞　

＜ｓｃｒｉｐｔ　ｓｒｃ＝“ｊｑｇｒｉｄ／ｊｑｕｅｒｙ－ｕｉ－１．７．２．ｃｕｓｔｏｍ．ｍｉｎ．ｊｓ”ｔｙｐｅ：　

“ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞＜／ｓｃｒｉｐｔ＞　

＜ｓｃｒｉｐｔ　ｓｒｃ＝“ｊｑｇｒｉｄ／ｇｒｉｄ．１ｏｃａｌｅ－ｅｎ．ｊｓ”ｔｙｐｅ＝“ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ’’　

ｃｈａｒｓｅｔ＝“ｇｂ２３１２”＞＜／ｓｃｒｉｐｔ＞　

＜ｓｃｒｉｐｔ　ｓｒｃ＝“ｊｑｇｒｉｄ／ｊｑｕｅｒｙ．ｊｑＧｒｉｄ．ｍｉｎ．ｉｓ”ｔｙｐｅ＝“ｔｅｘｔ／　

ｊａｖａｓｃｒｉｐｔ”＞＜／ｓｃｒｉｐｔ＞　

２－２数据的加载和分页　

ｊｑＧｒｉｄ能支持多种格式数据的显示，如ｘｍｌ、ｊｓｏｎ、ａｒｒａｙ　

等。由于ＡＳＰ．ＮＥＴ中，可以将数据库中的内容通过ＤａｔａＳｅｔ直　

接输出为ｘｍｌ，所以示例中将以ｘｍｌ格式的数据为例。　

首先，在服务器端建立一个的后台数据源，为方便布署，　

这里选用Ａｃｃｅｓｓ作为后台数据库，数据库文件结构如图２所　

示　

图２数据库文件结构　

在客户端，　ｊｑＧｒｉｄ的调用格式为：　ｊＱｕｅｒｙ　

（，＃　ｄ—ｓｅｌｅｃｔｏｒ＇）．ｊｑＧｒｉｄ（ｏｐｔｉｏｎｓ），在调用前还需要建立一个　

＜ｔａｂｌｅ＞和＜ｄｉｖ＞标签用于ｉｑＧｒｉｄ的显示，主要代码如下：　

＜ｔａｂｌｅ　ｉｄ＝”Ｊｇ“ｃｅｌｌｐａｄｄｉｎｇ＝”０”ｃｅｌｌｓｐａｃｉｎｇ＝　０”＞＜／ｔａｂｌｅ＞　

＜ｄｉｖ　ｉｄ＝“ｎａｙ”＞＜／ＣＩｉｖ＞　

＿　

“查找记录”和“重新加载”按钮。　

ｌ总分　ｊ蓝ｌ　删　Ｉ９０辫　骥黧　鍪篓　

ｈ重置　一赢找　拄　黪－涮Ｈ　＿　

一　＾箍　彩嘲矗　露　

２ｏｏ！　以

开始　＾　。　麓　ｌ参　疆螂童ｌ　／　

…

矧　

一　不以…开舳　

不在在…里　

＾鲫　羹　】　移　誊　孵／　

…

里　Ａ３１　赛　戤疆Ⅻ　辩　／　

２∞　以…结柬　不以

结柬　Ａ３２　

巍　｜　一Ⅻ誊　／　

…

包台　

不包含　

ｉ　

｜雾誊　誊　

、１鹰找记录按钮　

图４查找记录窗口　

ｃａｐｔｉｏｎ：＂ｊｑＧｒｉｄ的使用　

））．ｎａｖＧｒｉｄ（　＃ｎａｖ　，｛ｅｄｉｔ：ｆａｌｓｅ，ａｄｄ：ｆａｌｓｅ，ｄｅｈｆａｌｓｅ｝）；　

点击如图４的“查找记录”按钮，将弹出查找记录窗口中　

设置查询条件，当点“查找”按钮，客户端将向服务器端发送　

一

ｓｅａｒｃｈ变量，当一ｓｅａｒｃｈ值为“ｔｍｅ”时，还将向服务器发送　

ｓｅａｒｃｈＦｉｅｌｄ、ｓｅａｒｃｈＳｔｒｉｎｇ、ｓｅａｒｃｈＯｐｅｒ等变量．其变量值分别对　

应查询的字段、查询的值和查询的关系符（说明：　“ｅｑ”表示　

“”“

＝

、　

Ｂｅ”表示“＜＞”、　“Ｉｔ”表示“＜”、　“ｌｅ”表示“＜＝”、　

“甜”表示“＞”、“ｇｅ”表示“＞＝”、“ｂｗ”表示“以…开始”、　

“

ｅｗ”表示“以…结束”、“ｃｎ”表示“包含”……）。要实现　

查询功能对应的服务器端的代码如下：　

ｉｆ（ｓｅａｃｈｅｒＯｎ＝＝。ｔｒｕｅ“）　

｛　

ｓｔｒｉｎｇ　ｓＦｉｅｌｄ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ【”ｓｅａｒｃｈＦｉｅｌｄ。】：　

ｓｔｒｉｎｇ　ｓＶａｌｕｅ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ【ＩＩｓｅａｒｃｈＳｔｒｉｎｇ‘】：　

ｓｔｒｉｎｇ　ｓＯｐｅｒ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ【Ｉ．ｓｅａｒｃｈＯｐｅｒ。】：　

ｗＳｔｒ＝ＤＢＡｃｃｅｓｓ．ｒｅｔＳｑｌｓｔｒ（ｓＦｉｅｌｄ，ｓＶａｌｕｅ．ｓＯｐｅｒ）　

／／生成查询条件字符串　

｝　

０ＩｅＤｂＤａｔａＡｄａｐｔｅｒ　ｄａ　＝　ｎｅｗ　ＯＩｅＤｂＤａｔａＡｄａｐｔｅｒ（＇ｓｅｌｅｃｔ　

ｓｔｕｌＤ．ｎａｍｅ，ｓｅｘ，ｂｉｒｔｈ，ｓｃｏｒｅ　ｆｒｏｍ　ｊｑｔｂ。＋ｗＳｔｒ＋“ｏｒｄｅｒ　ｂｙ　

４－ｓｏｒｔ　４－…４－ｓｏｒｄ，ＤＢＡｃｃｅｓｓ．ＣｏｎｎＳｔｒ）；　

ｒｅｔＳｑｌｓｔｒ（）函数主要代码：　

ｐｕｂｌｉｃ　ｓｔａｔｉｃ　ｓｔｒｉｎｇ　ｒｅｔＳｑｌｓｔｒ（ｓｔｒｉｎｇ　ｓＦｉｅｌｄ，ｓｔｒｉｎｇ　ｓＶａｌｕｅ．ｓｔｒｉｎｇ　

ｓＯｐｅｒ）　

｛　

ｓｔｒｉｎｇ　ｗＳｔｒ，ｗＯｐｅｒ；　

ｗＯｐｅｒ＝”＝　：ｗＳｔｒ＝　：　

ｓｗｉｔｃｈ（ｓＯｐｅｒ）　

｛　

ｃａｓｅ　ｅｑ“：　

ｉｆ（ｓＦｉｅｌｄ　ｌ＝”ｓｃｏｒｅ“）｛ｗＯｐｅｒ＝　＝　＋ｓＶａｌｕｅ　４－…：）　

ｅｌｓｅ｛ｗＯｐｅｒ＝’＝。４－ｓＶａｌｕｅ；）　

／／总分为数值型不需单引号　

ｂｒｅａｋ；　

ｃａｓｅ。Ｒｅ　：　

ｉｆ（ｓＦｉｅｌｄ！＝‘ｓｃｏｒｅ　）｛ｗＯｐｅｒ＝。＜＞　４－ｓＶａｌｕｅ　４－　。：｝　

ｅｌｓｅ｛ｗＯｐｅｒ：“＜＞。４－ｓＶａｌｕｅ￣）　

ｂｒｅａｋ；　

ｃａｓｅ　ｂｗ　：ｗＯｐｅｒ＝。ｌｉｋｅ　４－ｓＶａｌｕｅ　４－。％　：ｂｒｅａｋ；　

ｄｅｆａｕｌｔ：ｗＯｐｅｒ＝　：ｂｒｅａｋ；　

｝　

ｗＳｔｒ＝。ｗｈｅｒｅ。４－ｓＦｉｅｌｄ　４－ｗＯｐｅｒ；　

ｒｅｔｕｒｎ　ｗＳｔｒ；　

）　

２．４添加、编辑、删除功能的实现　

在ｊｑＧｒｉｄ中，提供功能强大的编辑功能，在文中将对　

ｊｑＧｒｉｄ的表单编辑方式的使用进行说明。　

编辑面板的显示　

在上面查找面板的显示中，如果将ｅｄｉｔ，ａｄｄ，ｄｅｌ属性值　

设置为“ｔｒｕｅ”，便能显示出编辑按钮。除此之外．还可以设置　

更多属性来实现更强大的编辑功能，代码如下：　

ｃａｐｔｉｏｎ：＂ｊｑＧｒｉｄ的使用　

））．ｎａｖＧｒｉｄ（　＃ｎａｖ　，ｆ　ｖｉｅｗ：ｔｒｕｅ），，／显示浏览记录按钮　

｛ｒｅｌｏａｄＡｆｔｅｒＳｕｂｍｉｔ：ｆａｌｓｅ，ｓａｖｅｋｅｙ：【ｔｒｕｅ．１　３ｌＪ　ｎａｖｋｅｙｓ：【ｔｒｕｅ，　

３８．４０］，ｊｑＭｏｄａｌ：ｆａｌｓｅ，ｃｈｅｃｋ０ｎＳｕｂｍｉｔ：ｔｒｕｅ，ｂｏｔｔｏｍｉｎｆｏ：　（　）　

为必填内容，｝，／／｝泰加记录按钮设置　

｛ｒｅｌｏａｄＡｆｔｅｒＳｕｂｍｉｔ：ｆａｌｓｅ．ｊｑＭｏｄａｈ　ｆａｌｓｅ，ｃｈｅｃｋＯｎＳｕｂｍｉｔ：　

ｔｒｕｅ，ｂｏｔｔｏｍｉｎｆｏ：　（　）为必填内容，｝．　

∥编辑记录按钮设置　

｛ｒｅｌｏａｄＡｆｔｅｒＳｕｂｍｉｔ：ｆａｌｓｅ，ｊｑＭｏｄａｈ　ｆａｌｓｅ｝．　

，／删除记录按钮设置　

｛ｃＩｏｓｅＯｎＥｓｃａｐｅ：ｔｒｕｅ｝，／／查找记录按钮设置　

｛ｎａｖｋｅｙｓ：【ｔｒｕｅ，３８，４０］，ｊｑＭｏｄａｌ：ｆａＩｓｅ．ｃｌｏｓｅＯｎＥｓｃａｐｅ：ｔｒｕｅ　

））：／／浏览记录按钮设置　

以上属性说明如下：　

ｓａｖｅｋｅｙ：【ｔｒｕｅ，１３］，回车键提交。　

ｎａｖｋｅｙｓ：　［ｔｕｒｅ，３８，４０】，上、下箭头查看记录。　

ｃｈｅｃｋＯｎＳｕｂｍｉｔ：ｔｒｕｅ，编辑数据后弹出确认对话框　

ｒｅｌｏａｄＡｆｔｅｒＳｕｂｍｉｔ：ｆａｌｓｅ，提交编辑后是否重新加载服务器　

端数据，由于ｊｑＧｒｉｄ在客户端编辑后能即时更新编辑内容，这　

里选择不重新加载服务器数据。　

ｊｑＭｏｄａｌ：ｆａｌｓｅ，弹出编辑窗１：３为非模式窗口。　

ｃｌｏｓｅＯｎＥｓｃａｐｅ：ｔｕｒｅ，ＥＳＣ键关闭窗１３。　

要实现编辑操作还需要在绑定列选项中添加相应的属性．　

代码如下：　

ｃｏｌＭｏｄｅｌ：［｛ｎａｍｅ：　ｓｔｕｌＤ　，ｉｎｄｅｘ：　ｓｔｕｌＤ　，ｗｉｄｔｈ：２０，ａｌｉｇｎ：　

ｃｅｎｔｅｒ　，ｅｄｉｔａｂｌｅ：ｔｒｕｅ，ｅｄｉｔｏｐｔｉｏｎｓ：｛ｍａｘｌｅｎｇｔｈ：７｝，　

………………………………………………………＿＿　

实用第一　智慧密集　

亡ｌ许编辑，编辑框最大长度为７　

ｆｏｒｍｏｐｔｉｏｎｓ：｛ｒｏｗｐｏｓ：１，ｅｌｍｐｒｅｆｉｘ：。（　）　）．，／表单位置　

ｅｄｉｔｒｕｌｅｓ：｛ｒｅｑｕｉｒｅｄ：ｔｒｕｅ）），∥该字段为必填字段　

｛ｎａｍｅ：　ｎａｍｅ　．ｉｎｄｅｘ：　ｎａｍｅ　．ａｌｉｇｎ：　ｃｅｎｔｅｒ　，ｗｉｄｔｈ：２０．　

ｅｄｉｔａｂｌｅ：ｔｒｕｅ，ｅｄｉｔｏｐｔｉｏｎｓ：｛ｍａｘｌｅｎｇｔｈ：２０｝，　

ｆｏｒｍｏｐｔｉｏｎｓ：｛ｒｏｗｐｏｓ：２。ｅｌｍｐｒｅｆｉｘ：　＆ｎｂｓｐ：＆ｎｂｓｐ：＆ｎｂｓｐ：　

＆ｎｂｓｐ；，）），　

｛ｎａｍｅ：　ｓｅｘ　，ｉｎｄｅｘ：　ｓｅｘ　，ｗｉｄｔｈ：１　０，ａｌｉｇｎ：　ｃｅｎｔｅｒ　．　

ｅｄｉｔａｂｌｅ：ｔｒｕｅ，ｅｄｉｔｔｙｐｅ：”ｓｅｌｅｃｔ＂，／／允许编辑，类型为下接列表框　

ｅｄｉｔｏｐｔｉｏｎｓ：　｛ｖａｌｕｅ：　ｍａｎ：男；ｗｏｍａｎ：女　，　

ｄｅｆａｕｌｔＶａｌｕｅ：　男，Ｊ．，／歹Ｕ表框值设置　

ｆｏｒｍｏｐｔｉｏｎｓ：｛ｒｏｗｐｏｓ：３．ｅｌｍｐｒｅｆｉｘ：　＆ｎｂｓｐ；＆ｎｂｓｐ；　

＆ｎｂｓｐ；＆ｎｂｓｐ；　｝）．　

（ｎａｍｅ：　ｂｉｒｔｈ　．ｉｎｄｅｘ：　ｂｉｔｒｈ　，ｗｉｄｔｆ１：２０，ａｌｉｇｎ：　ｃｅｎｔｅｒ　，　

ｅｄｉｔａｂｌｅ：ｔｒｕｅ，　

ｅｄｉｔｏｐｔｉｏｎｓ：｛ｓｉｚｅ：１　２，∥编辑框长度　

ｄａｔａｌｎｉｔ：ｆｕｎｃｔｉｏｎ（ｅ１）｛　『编辑框值设置　

￥（ｅＩ）．ｄａｔｅｐｉｃｋｅｒ（｛ｄａｔｅＦｏｒｍａｔ：　ＹＹ—ｍｍ—ｄｄ　，　

ｃｈａｎｇｅＹｅａｒ：ｔｒｕｅ，　

ｃｈａｎｇｅＭｏｎｔｈ：ｔｒｕｅ．　

ｙｅａｒＲａｎｇｅ：　１　９００：２０５０　，　

ｎｅｘｔＴｅｘｔ：　下月　，　

ｐｒｅＴｅｘｔ：　上月　。　

ｄａｙＮａｍｅｓＭｉｎ：【　日　，　一　，　二　，　三　，　四　．　五　，　六，】．　

ｍｏｎｔｈＮａｍｅｓＳｈｏｒｔ：【　１月　，　２月　，　３月　，　４月　，　５月　，　

６月　，ｒ７月　，　８月　，　９月　，　１Ｏ月　，　１１月　，　１２月１））　），　

ｄｅｆａｕｌｔＶａｌｕｅ：ｆｕｎｃｔｉｏｎ（）｛，／编辑框默认值设置　

ｖａｒ　ｃｕｒｒｅｎｔＴｉｍｅ＝ｎｅｗ　Ｄａｔｅ（）；　

ｖａｒ　ｍｏｎｔｈ＝ｐａｒｓｅｌｎｔ（ｃｕｒｒｅｎｔＴｉｍｅ．ｇｅｔＭｏｎｔｈ０＋１）　

ｍｏｎｔｈ＝ｍｏｎｔｈ＜＝９　７‘０。＋ｍｏｎｔｈ：ｍｏｎｔｈ；　

ｖａｒ　ｄａｙ＝ｃｕｒｒｅｎｔＴｉｍｅ．ｇｅｔＤａｔｅ０；　

ｄａｙ＝ｄａｙ＜＝９　７。０　＋ｄａｙ：ｄａｙ；　

ｖａｒ　ｙｅａｒ＝ｃｕｒｒｅｎｔＴｉｍｅ．ｇｅｔＦｕｌｌＹｅａｒ０；　

ｒｅｔｕｒｎ　ｙｅａｒ＋　一。＋ｍｏｎｔｈ十　一。＋ｄａｙ：））．　

ｆｏｒｍｏｐｔｉｏｎｓ：｛ｒｏｗｐｏｓ：４．ｅｌｍｐｒｅｆｉｘ：　＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；　

＆ｎｂｓｐ；　｝），　

｛ｎａｍｅ：　ｓｃｏｒｅ　，ｉｎｄｅｘ：　ｓｃｏｒｅ　，ｗｉｄｔｈ：１　０．ａｌｉｇｎ：　ｃｅｎｔｅｒ　，　

ｅｄｉｔａｂｌｅ：ｔｒｕｅ。ｅｄｉｔｏｐｔｉｏｎｓ：｛ｍａｘｌｅｎｇｔｈ：３），　

ｆｏｒｍｏｐｔｉｏｎｓ：（ｒｏｗｐｏｓ：５，ｅｌｍｐｒｅｆｉｘ：＂＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；　

＆ｎｂｓｐ；３｝］，　

在代码注释中已给出了属性值的说明，其中，　“ｂｉｒｔｈ”日　

期字段的默认值由一段ｉａｖａｓｃｒｉｐｔ代码获得，而Ｅｌ期的设置使　

用了ｊＱｕｅｒｙ　Ｕｌ下的Ｅｌ期插件ｄａｔｅｐｉｃｋｅｒ，默认情况下，　

ｄａｔｅｐｉｃｋｅｒ面板显示较大，可在ｊｑｕｅｒｙ－ｕｉ一１．７．２．ＣＨＳｔＯＩＴＩ．ＣＳＳ样式　

文件中添加、修改ｆｏｎｔ—ｓｉｚｅ属性的值，如．ｕｉ—ｄａｔｅｐｉｃｋｅｒ　ｆ．．・　

ｆｏｎｔ—ｓｉｚｅ：ｌｌｐｘ｝。　

在客户端完成以上设置后，运行结果如图５，添加、编　

辑、删除等操作均能在客户端执行，但数据要在服务器端更新　

还需在编写服务器端代码，添加ｅｄｉｔｉｎｇ．ａｓｐｘ文件，并在客户　

端设置ｅｄｉｔｕｒｌ：＇ｅｄｉｔｉｎｇ．ａｓｐｘ　。当在客户端点击“提交”按钮后，　

图５添加记录表单　

将向服务器端发送ｏｐｅｒ（值为‘ａｄｄ’、　‘ｅｄｉｔ’、　‘ｄｅｌ’）　

绑定字段变量。实现服务器端更新的主要代码：　

ｓｔｒｉｎｇ　ｏｐｅｒ：Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ【－ｏｐｅｒ　Ｊ：　

ｓｔｒｉｎｇ　ｉｄ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ［“ｉｄ‘】　∥ｉｄ为标识列。客户端设　

ｓｔｕｌＤ　

ｓｔｒｉｎｇ　ｓｉｄＶａｌ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ［。ｓｔｕｌＤ。】：　

ｓｔｒｉｎｇ　ｎａｍｅＶａｌ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ［　ｎａｍｅ。】　

ｓｔｒｉｎｇ　ｓｅｘＶａＩ＝Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ［　ｓｅｘ　】：　

ｓｔｒｉｎｇ　ｂｉｒｔｈＶａｌ：Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ［　ｂｉｒｔｈ。】：　

ｉｎｔ　ｓｃｏｒｅＶａｌ＝ＣｏｎｖｅＲ．Ｔｏｌｎｔ３２（Ｒｅｑｕｅｓｔ．Ｐａｒａｍｓ［。ｓｃｏｒｅ。】）：　

ｓｅｘＶａｌ＝（ｓｅｘＶａｌ＝＝　ｍａｎ”７。男。：“女‘）　

ｓｗｉｔｃｈ（ｏｐｅｒ）　

｛　

ｃａｓｅ　ｄｅｌ”：ＤＢＡｃｃｅｓｓ．ｄｅＩＲｅｃＩｉｄ）：ｂｒｅａｋ：　

ｃａｓｅ　ａｄｄ　ＤＢＡｃｃｅｓｓ．ａｄｄＲｅｃ｛ｓｉｄＶａｌ，ｎａｍｅＶａｌ，ｓｅｘＶ　

ｂｉｒｔｈＶａ１．ｓｃｏｒｅＶａ１）；ｂｒｅａｋ；　

ｃａｓｅ。ｅｄｉｔ“：ＤＢＡｃｃｅｓｓ．ｕｐｄａｔｅＲｅｃ（ｓｉｄＶａｌ，ｎａｍｅＶａｌ，ｓｅｘＶ￣　

ｂｉｔｒｈＶａｌ，ｓｃｏｒｅＶａ１）；ｂｒｅａｋ；　

）　

２．５　ｉｑＧｒｉｄ的“汉化”　

由于ｉｑＧｒｉｄ是一个国外的开源项目，所以在使用的时候　

能需要进行“汉化”，找到　ｄ．１ｏｃａｌｅ—ｅｎ．ｊｓ文件，将其对应　

英文改为中文即可，修改后加载该ｉｓ文件时，需将编码设置　

ｃｈａｒｓｅｔ＝“ｇｂ２３１２”，不然将出现“乱码”。　

３　结语　

以上介绍了ｊｑＧｒｉｄ＋ＡＳＰ．ＮＥＴ实现数据的显示、查找、　

览、编辑等常用功能的使用方法，已能满足实际开发的基本　

要。但事实上ｊｑＧｒｉｄ的功能远非于此，还支持一些高级的　

性，如ｓｕｂＧｒｉｄ、拖拽等功能，限于篇幅不再赘述，有兴趣　

读者可参考ｉｑＧｒｉｄ的官方网站，查看官方的英文文档及示例．　

参考文献　

【１】ｈｔｔｐ：／／ｔｒｉｒａｎｄ．ｃｏｍ／ｊｑｇｒｉｄ／ｊｑｇｆｉｄ．ｈｔｍ１．　

【２］ｈｔｔｐ：／／ｗｗｗ．ｓｅｃｏｎｄｐｅｒｓｏｎｐｌｕｒａ１．ｃ　ｑｇｒｉｄｄｏｃｓ／ｉｎｄｅｘ．ｈｔｍ．　

ｆ收稿日期：２０１０—０２—２２）