希望这个帮助文档能对jQuery插件的学习有所帮；jqGrid包说明:；?jquery.jsisthejQuerylib；?jquery.jqGrid.js主单元，包含的；grid.basic.js主插件其他插件包依赖于；?grid.custom.jsGrid高级插件功；?grid.formedit.js用于表格编辑、；?grid.inlinedit.js线
希望这个帮助文档能对jQuery插件的学习有所帮助
jqGrid包说明:
?jquery.js is the jQuery library,
?jquery.jqGrid.js
主单元，包含的功能取决您的选择
grid.basic.js
其他插件包依赖于该插件正常运行
?grid.custom.js
Grid高级插件功能包
?grid.formedit.js
用于表格编辑、增加、删除功能
?grid.inlinedit.js
?grid.subgrid.js
一个处理表格的插件
?grid.postext.js
一个可以用来操作post数据的包
jqModal.js
模态对话框的编辑
可拖拉的表格编辑
包含gird需要的样式表
一、 功能描述：
jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。
二、 关键使用说明：
1、 导入jqGrid包，在首页属性里面添加如下包的信息
&link rel=\&stylesheet\& type=\&text/css\& media=\&screen\&
href=\&/SedSoft/jqGrid/themes/basic/grid.css\&&
&link rel=\&stylesheet\& type=\&text/css\& media=\&screen\&
href=\&/SedSoft/jqGrid/themes/jqModal.css\&&
&script type=\&text/javascript\& src=\&/sedsoft/jqGrid/jquery.js\& & &/script&
&script type=\&text/javascript\& src=\&/sedsoft/jqGrid/jquery.jqGrid.js\& &&/script&
&script type=\&text/javascript\& src=\&/sedsoft/jqGrid/js/jqModal.js\& &&/script&
&script type=\&text/javascript\& src=\&/sedsoft/jqGrid/js/jqDnR.js\& & &/script&
注：由于加载js包 会耗费大量资源，建议动态加载这些js包，优化页面初始化效
率。 2、 在页面上需要添加表格的地方， 增加
&table id=&list& class=&scroll&&&/table&
&div id=&pager& class=&scroll& style=&text-align:&&&/div&
list表格id，pager为表格导航条id 三、 写jqGrid函数
jQuery(document).ready(function(){
jQuery(&#list&).jqGrid({
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: &desc&,
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid'
以上代码基本可以将要展示的表格展示出来了，现在对一些属性说明：
jQuery(“#list”).jqGrid
list为将要显示表格的table 的id
altRows : 设置表格显示斑马条纹属性，默认值为true
caption: 定义表格标题名
cellEdit： 设置表格单元是否可以编辑，默认值为true，详见cellEdit介绍
cellsubmit:
决定cell容器如何被保存，使用’remote’或者‘clientArray’，详见cellEdit cellurl:
处理cell编辑的url路径，默认值为空
datatype :
从后台展示的数据格式，有xml、 json等
数据传递的方式,有get 和post两种
定义inline和form 编辑的后台处理url
Expandcolumn: 在定义treeGrid情况下，指明那一列用来伸展树
forceFit：设置表格在被拖动时自动调整大小以不破坏表格整体布局，注：该属性和 shrinkToFit不能同时使用
gridstate: 设置通用表格在使用hiddengrid属性时，hidegrid的值，可以是：’visible’ 或’hidden’默认为visible
shrinkToFit
loadonce: 如果该值设置为true则表格数据仅加载一次，在第一次请求之后数据信息自动转变为客户端处理，pager导航条上的函数都不可用。
loadtext： 在请求数据时显示字幕，默认值为：Loading….
colNames：要显示数据表格的列名 ，需要在前台定义好表格列名
colModel： 对要展示的每列值属性进行定义，最常用的有：
align: 定义表格对齐方式，默认值为left
datefmt：日期格式，默认值为：Y-M-d
editable：定义field是否可编辑，该属性用于inline和form编辑，默认值为false
editrules：editrules：{edithidden:true,//如果为true，则该列在添加和编辑时被隐藏
required:true,//如果为true，则该列表格不能为空
number:true,//true时表格必须为数字型
integer:true,//true时，表格数字为整形
minValue:val,//设置数字最小值与最大值
maxValue:val,
email:true}//验证是否为email
edittype：定义编辑类型：text,texttarea,select,checkbox,passworad
hidedlg: 为true时，该列不会显示在表格对话框中
hidden： 定义列在初始化时是否被隐藏
index： 定义索引名
定义属性名，必填项
resizable: 定义列是否可调整大小
导航条要展示的位置
默认的每页显示记录数
可选的每页显示数
viewrecords： 是否设置表格可选，为true是可选，但此时表格不可编辑，只有在false是才可以编辑
imgpath： 图片路径
注：以上属性并不会全部同时出现在jqGrid表格设置里，jqGrid设计了灵活多变的不同组合来展示表格不同的功能。在以后的实际应用里，将对重点属性的组合和分配进行说明。
四、 增加、删除、修改操作的实现
jqGrid包自身封装了相当完善的操作事件，
jQuery(&#list&).navGrid('#pager',
refresh: true,
edit: true,
add: true,
del: true,
search: true
position:&right&})
将上面一段代码，添加到jqGrid({})后面，refresh等参数，均设置为true，则
导航条上即可显示出五个按钮，刷新、编辑、增加、查找等，position设置这些按钮在导航条上的位置。
editurl: pathname+'/xmlTableEdit?openagent&oper=edit',
//设置添加、更新的url
这段代码是编辑、增加、查找等功能执行的代码，写在url后面方便查找。对于这些定
义的功能，每个操作传递过去的editurl是不一样的，oper分别是edit ，add，search、等。之后传递的是操作后，数据变化的参数。
当然，我们很多时候需要自己定义一些事件，jqGrid有一个添加按钮的函数，可以方便的添加我们想要的任何功能按钮
jQuery(&#list&).navGrid('#pager',
refresh: true,
edit: true,
add: true,
del: true,
search: true
position:&right&}
).navButtonAdd(
'#pager',
caption:&Del&,
buttonimg:&/SedSoft/jqGrid/themes/basic/images/folder.png&,
onClickButton: function(){
//执行删除行操作
// var gr = jQuery(&#list&).getGridParam(&selarrrow&);
if( gr != null&gr!=&& ) {
jQuery(&#list&).delGridRow(gr,{
afterSubmit: function(xhr,postdata){
alert ('After Submit: ' + postdata);
return [true]},
pathname +'/xmlTableEdit?openagent&oper=del'
//执行删除代理rul
alert(&Please Select Row to delete!&);
};},position:&last&
上面这段代码就添加了一个删除按钮，并获得选中的id数组，并通过url代理去处理该操作。
事实上，通过.navButtonAdd()函数可以添加任何我们想要的按钮，而该函数里面属性分别定义按钮出现的位置’#pager’,按钮标题字符’caption’，按钮图标路径’buttonimg’,点击按钮的onClickButton事件，在事件里面可以写任何你想要的js代码，以满足你的需求。position属性定义了按钮显示的位置。
除了这种直接添加按钮和事件的方法外，jqGrid还提供了重写和替换部分功能函数的能力。举例编辑功能说明。
四、jqGrid的修改编辑功能
jqGrid定义了三种可以用于修改和编辑表格数据的方法，分别是cellEdit、inline Edit、rowEdit
分别对应单元格编辑、在线行编辑、以对话框式的行编辑。以下将分别简单介绍这三种编辑方法和用法。
(一) cellEdit:
? 单元格编辑支持键盘操作，当选中某一单元格时，可以按上下、左右来切换选中
? 如果单元格可编辑，当我们按下Enter键或鼠标点击其他键时cell编辑后将被保存，除非我们按下Esc键
? 当cell被编辑过后，cell编程’dirty’数据，这时候在左上角会显示出一个红色标记
? 当我们点击可编辑的cell时，我们可以直接进入编辑状态
properties:
1、有三个属性来设置cellEdit:
cellEdit:当为true时，cell才可编辑，此时Multiselect（设置选择多行）则不可用，onSelectRow函数不可用
cellsubmit：定义cell容器在那里被保存，’remote’或’clientArray’。如果是’remote’则数据会立刻通过cellUrl用Ajax方式传递到后台去处理，传递格式为：
{id:rowed,mycell:cellvalue}
cellurl: 设置cell编辑的url
注意：在collmodel里对列属性进行定义的editrules{}里，所有的设置对cellEdit、inline、rowEdit均适用。
2、cellEdit编辑的几种事件
afterEditCell(rowed,cellname,value,iRow,iCol)
afterSaveCell(rowed,cellname,value,iRow,iCol)
afterSubmitCell(serverresponse,rowed,cellname,value,iRow,iCol)
beforeEidtCell(rowed,cellname,value,iRow,iCol)
beforeSaveCell(rowed,cellname,value,iRow,iCol)
beforeSubmitCell(rowed,cellname,value,iRow,iCol)
errorCell(serverresponse,statur)
onSelectCell(rowed,celname,value,iRow,iCol)
这些事件在实际应用中拿出部分进行组合应用即可，其中onSelectCell只能应用于不可编辑的单元格
3、举例说明
cellurl: pathname+'/xmlSaleTableEdit?openagent&oper=edit', //定义编辑cellEdit rul和editUrl不同，需要单独设置
cellEdit: true,
//cell编辑时，此属性必须为true
afterEditCell: function(rowid,cellname,value,iRow,iCol){
var zk= jQuery(&#list&).getCell(rowid,&N_JinEr&);//获取某一单元格的值
jQuery(&#list&).setCell(rowid,&N_JinEr&,9000,{color:'red','text-align':'center'});
afterSubmitCell:function(serverrepsponse,rowid,cellname,value,iRow,iCol){
var text=serverrepsponse.responseT
var arr = text.split(&;&);
三亿文库包含各类专业文献、幼儿教育、小学教育、专业论文、行业资料、高等教育、中学教育、JQuery插件jqGrid常用属性说明21等内容。　
　JQuery的插件jqGrid使用说明_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 JQuery的插件jqGrid使用说明_IT/计算机_专业资料。JQuery的插件jqGrid使用说明... 　JQuery插件jqGrid常用属... 9页 1下载券J​q​u​e​r​y​ ​...[] null 否否 shrinkTo bool 此属性用来说明当初始化列宽度时候的计算类 true... 　jquery jqgrid完全使用收册 参数方法说明与使用实例!简单实用 一、jqGrid 学习 ...常用到的属性: name 列显示的名称;index 传到服务器端用来排序用的 index 列... 　只读属性,最后选择行的 id null 否否否是是否否是是否 此属性用来说明当初始...JQuery插件jqGrid常用属... 9页 1下载券
jQuery 使用手册 22页 1下载券 ©... 　jqGrid的属性中文详细说明_IT/计算机_专业资料。jqGrid 的属性很多,其实很大部分的...JQuery插件jqGrid常用属... 9页 1下载券 CSS中文属性说明 3页 免费 jqGrid说明... 　这个 False 属性用到了 jQuery UI 的 sortable 插件。 要确保加载了相应的文件...函数名 参数 返回值 说明 这个函数可以改变 jqgrid 中用到的 ajax 请求参数,... 　
需要说明的是,jquery-ui 的字体大小与 jqgrid 字体大小不一致,故需要在页 ...是一个数组对象 ay colModel Arr 常用到的属性:name 列显示的名称;index 传 ... 　jqGrid api 中文说明 JQGrid 是一个在 jquery 基础上做的一个表格控件,以 ...是一个数组对象 y colModel Arra 常用到的属性:name 列显示的名称;index 传到... 　jQuery 学习之:jqGrid 表格插件 学习之: 表格插件――参数配置 参数配置 2011-...最后选择行的 id null shrinkToFit boolean 此属性用来说明当初始化列宽度时候...jqGrid方法功能介绍Posted on&&&阅读(...) 评论()&&一、主要API接口getGridParam、setGridParam：　　getGridParam方法：　　getGridParam(&url&)： 获取当前的AJAX的URL&　　getGridParam(&sortname&)：排序的字段&　　getGridParam(&sortorder&)：排序的顺序&　　getGridParam(&selrow&)：得到选中行的ID&　　getGridParam(&page&)：当前的页数&　　getGridParam(&rowNum&)：当前有多少行　　getGridParam(&datatype&)：得到当前的datatype&　　getGridParam(&records&)：得到总记录数&　　getGridParam(&selarrrow&)：可以多选时，返回选中行的ID&　　　setGridParam方法：　　setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger(&reloadGrid&)使用&　　setGridParam({sortname:newvalue})：设置排序的字段　　setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc&　　setGridParam({page:newvalue})：设置翻到第几页　　setGridParam({rowNum:newvalue})：设置当前每页显示的行数　　setGridParam({datatype:newvalue})：设置新的datatype(xml,json)&&&&& 形式2：jQuery('#tableID').jqGrid('getGridParam','url'))　　&&&&&&& &jQuery(&#tableID&).jqGrid('setGridParam',{page:2}).trigger(&reloadGrid&)&二、jqGrid colModel表体结构配置name&　　　　　&必要的属性，具有唯一标识性，如在弹出的editform窗体中，将作为input的name属性&
为排序用，最方便的是设为数据库字段&
150，宽度，数值
left,center,right&
date:true&
editable flase&
editoptions edittype为先决条件，此为值，[]&
editrules 编辑规范&
edittype text,textarea,select,checkbox,password&
formatoptions&
formatter&
false&(appear&in&the&modal&dialog)&
false&在加载时是否隐藏列&
声明json的格式&
当没有设置colNames时，在列里用此代替，此项也为空时，就是name代替&
resizable true，列宽可调节&
true，可搜索
sortable true，可排序
sorttype text,int,float,date，排序子段类型
声明xml的格式&&三、一个例子[Array&Data]&
jQuery(&#list4&).jqGrid({
&&&&datatype:&&local&,
&&&&height:&250,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:60,&sorttype:&int&},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90,&sorttype:&date&},
&&&&&&&&&&&{name:'name',index:'name',&width:100},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&,sorttype:&float&},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&,sorttype:&float&},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&,sorttype:&float&},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:}&&&&&&&&
&&&&&&&multiselect:&,
&&&&&&&caption:&&Manipulating&Array&Data&
&mydata&=&[
&&&&&&&&{id:&1&,invdate:&&,name:&test&,note:&note&,amount:&200.00&,tax:&10.00&,total:&210.00&},
&&&&&&&&{id:&2&,invdate:&&,name:&test2&,note:&note2&,amount:&300.00&,tax:&20.00&,total:&320.00&},
&&&&&&&&{id:&3&,invdate:&&,name:&test3&,note:&note3&,amount:&400.00&,tax:&30.00&,total:&430.00&},
&&&&&&&&{id:&4&,invdate:&&,name:&test&,note:&note&,amount:&200.00&,tax:&10.00&,total:&210.00&},
&&&&&&&&{id:&5&,invdate:&&,name:&test2&,note:&note2&,amount:&300.00&,tax:&20.00&,total:&320.00&},
&&&&&&&&{id:&6&,invdate:&&,name:&test3&,note:&note3&,amount:&400.00&,tax:&30.00&,total:&430.00&},
&&&&&&&&{id:&7&,invdate:&&,name:&test&,note:&note&,amount:&200.00&,tax:&10.00&,total:&210.00&},
&&&&&&&&{id:&8&,invdate:&&,name:&test2&,note:&note2&,amount:&300.00&,tax:&20.00&,total:&320.00&},
&&&&&&&&{id:&9&,invdate:&&,name:&test3&,note:&note3&,amount:&400.00&,tax:&30.00&,total:&430.00&}
&&&&&&&&];
(&i=0;i&=mydata.i++)
&&&&jQuery(&#list4&).jqGrid('addRowData',i+1,mydata[i]);&&四、行操作jQuery(&#a1&).click(&(){
&&&&&id&=&jQuery(&#list5&).jqGrid('getGridParam','selrow');
&&&&&(id)&&&&{
&&&&&&&&&ret&=&jQuery(&#list5&).jqGrid('getRowData',id);
&&&&&&&&alert(&id=&+ret.id+&&invdate=&+ret.invdate+&...&);
&&&&}&&{&alert(&请选择一行！&);}
jQuery(&#a2&).click(&(){
&&&&&su=jQuery(&#list5&).jqGrid('delRowData',12);
&&&&(su)&alert(&成功删除第12行&);&&alert(&删除失败&);
jQuery(&#a3&).click(&(){
&&&&&su=jQuery(&#list5&).jqGrid('setRowData',11,{amount:&333.00&,tax:&33.00&,total:&366.00&,note:&&img&src='images/user1.gif'/&&});
&&&&(su)&alert(&更新成功&);&&alert(&更新失败&);
jQuery(&#a4&).click(&(){
&&&&&datarow&=&{id:&99&,invdate:&&,name:&test3&,note:&note3&,amount:&400.00&,tax:&30.00&,total:&430.00&};
&&&&&su=jQuery(&#list5&).jqGrid('addRowData',99,datarow);
&&&&(su)&alert(&新增成功&);&&alert(&新增失败&);
});&五、进阶&&多选HTML&
&table&id=&list9&&&/table&
&div&id=&pager9&&&/div&
&a&href=&javascript:void(0)&&id=&m1&&Get&Selected&id's&/a&
&a&href=&javascript:void(0)&&id=&m1s&&Select(Unselect)&row&13&/a&
Java&Scrpt&code&
jQuery(&#list9&).jqGrid({
&&&&&&&url:'server.php?q=2&nd='+new&Date().getTime(),
&&&&datatype:&&json&,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90},
&&&&&&&&&&&{name:'name',index:'name',&width:100},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:false}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#pager9',
&&&&&&&sortname:&'id',
&&&&recordpos:&'left',
&&&&viewrecords:&true,
&&&&sortorder:&&desc&,
&&&&multiselect:&true,
&&&&caption:&&Multi&Select&Example&
jQuery(&#list9&).jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
jQuery(&#m1&).click(&function()&{
&&&&var&s;
&&&&s&=&jQuery(&#list9&).jqGrid('getGridParam','selarrrow');
&&&&alert(s);
jQuery(&#m1s&).click(&function()&{
&&&&jQuery(&#list9&).jqGrid('setSelection',&13&);
});&主从表HTML&
Invoice&Header
&table&id=&list10&&&/table&
&div&id=&pager10&&&/div&
Invoice&Detail
&table&id=&list10_d&&&/table&
&div&id=&pager10_d&&&/div&
&a&href=&javascript:void(0)&&id=&ms1&&Get&Selected&id's&/a&
Java&Scrpt&code&
jQuery(&#list10&).jqGrid({
&&&&&&&url:'server.php?q=2',
&&&&datatype:&&json&,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90},
&&&&&&&&&&&{name:'name',index:'name',&width:100},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:false}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#pager10',
&&&&&&&sortname:&'id',
&&&&viewrecords:&true,
&&&&sortorder:&&desc&,
&&&&multiselect:&false,
&&&&caption:&&Invoice&Header&,
&&&&onSelectRow:&function(ids)&{
&&&&&&&&if(ids&==&null)&{
&&&&&&&&&&&&ids=0;
&&&&&&&&&&&&if(jQuery(&#list10_d&).jqGrid('getGridParam','records')&&0&)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&jQuery(&#list10_d&).jqGrid('setGridParam',{url:&subgrid.php?q=1&id=&+ids,page:1});
&&&&&&&&&&&&&&&&jQuery(&#list10_d&).jqGrid('setCaption',&Invoice&Detail:&&+ids)
&&&&&&&&&&&&&&&&.trigger('reloadGrid');
&&&&&&&&&&&&}
&&&&&&&&}&else&{
&&&&&&&&&&&&jQuery(&#list10_d&).jqGrid('setGridParam',{url:&subgrid.php?q=1&id=&+ids,page:1});
&&&&&&&&&&&&jQuery(&#list10_d&).jqGrid('setCaption',&Invoice&Detail:&&+ids)
&&&&&&&&&&&&.trigger('reloadGrid');&&&&&&&&&&&&
jQuery(&#list10&).jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});
jQuery(&#list10_d&).jqGrid({
&&&&height:&100,
&&&&&&&url:'subgrid.php?q=1&id=0',
&&&&datatype:&&json&,
&&&&&&&colNames:['No','Item',&'Qty',&'Unit','Line&Total'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'num',index:'num',&width:55},
&&&&&&&&&&&{name:'item',index:'item',&width:180},
&&&&&&&&&&&{name:'qty',index:'qty',&width:80,&align:&right&},
&&&&&&&&&&&{name:'unit',index:'unit',&width:80,&align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'linetotal',index:'linetotal',&width:80,align:&right&,&sortable:false,&search:false}
&&&&&&&rowNum:5,
&&&&&&&rowList:[5,10,20],
&&&&&&&pager:&'#pager10_d',
&&&&&&&sortname:&'item',
&&&&viewrecords:&true,
&&&&sortorder:&&asc&,
&&&&multiselect:&true,
&&&&caption:&Invoice&Detail&
}).navGrid('#pager10_d',{add:false,edit:false,del:false});
jQuery(&#ms1&).click(&function()&{
&&&&var&s;
&&&&s&=&jQuery(&#list10_d&).jqGrid('getGridParam','selarrrow');
&&&&alert(s);
});&可展开的下级表HTML&
&&table&id=&list11&&&/table&
&div&id=&pager11&&&/div&
&script&src=&subgrid.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#list11&).jqGrid({
&&&&&&&url:'server.php?q=1',
&&&&datatype:&&xml&,
&&&&height:&200,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90},
&&&&&&&&&&&{name:'name',index:'name',&width:100},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#pager11',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&multiselect:&,
&&&&subGrid&:&,
&&&&subGridUrl:&'subgrid.php?q=2',
&&&&subGridModel:&[{&name&&:&['No','Item','Qty','Unit','Line&Total'],&
&&&&&&&&&&&&&&&&&&&&width&:&[55,200,80,80,80]&}&
&&&&caption:&&Subgrid&Example&
jQuery(&#list11&).jqGrid('navGrid','#pager11',{add:,edit:,del:});&壳展开的下级表2HTML&
&table&id=&listsg11&&&/table&
&div&id=&pagersg11&&&/div&
&script&src=&subgrid_grid.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#listsg11&).jqGrid({
&&&&&&&url:'server.php?q=1',
&&&&datatype:&&xml&,
&&&&height:&190,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90},
&&&&&&&&&&&{name:'name',index:'name',&width:100},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:}&&&&&&&&
&&&&&&&rowNum:8,
&&&&&&&rowList:[8,10,20,30],
&&&&&&&pager:&'#pagersg11',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&multiselect:&,
&&&&subGrid:&,
&&&&caption:&&Grid&as&Subgrid&,
&&&&subGridRowExpanded:&(subgrid_id,&row_id)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&subgrid_table_id,&pager_
&&&&&&&&subgrid_table_id&=&subgrid_id+&_t&;
&&&&&&&&pager_id&=&&p_&+subgrid_table_
&&&&&&&&$(&#&+subgrid_id).html(&&table&id='&+subgrid_table_id+&'&class='scroll'&&/table&&div&id='&+pager_id+&'&class='scroll'&&/div&&);
&&&&&&&&jQuery(&#&+subgrid_table_id).jqGrid({
&&&&&&&&&&&&url:&subgrid.php?q=2&id=&+row_id,
&&&&&&&&&&&&datatype:&&xml&,
&&&&&&&&&&&&colNames:&['No','Item','Qty','Unit','Line&Total'],
&&&&&&&&&&&&colModel:&[
&&&&&&&&&&&&&&&&{name:&num&,index:&num&,width:80,key:},
&&&&&&&&&&&&&&&&{name:&item&,index:&item&,width:130},
&&&&&&&&&&&&&&&&{name:&qty&,index:&qty&,width:70,align:&right&},
&&&&&&&&&&&&&&&&{name:&unit&,index:&unit&,width:70,align:&right&},
&&&&&&&&&&&&&&&&{name:&total&,index:&total&,width:70,align:&right&,sortable:}
&&&&&&&&&&&&],
&&&&&&&&&&&&&&&rowNum:20,
&&&&&&&&&&&&&&&pager:&pager_id,
&&&&&&&&&&&&&&&sortname:&'num',
&&&&&&&&&&&&sortorder:&&asc&,
&&&&&&&&&&&&height:&'100%'
&&&&&&&&});
&&&&&&&&jQuery(&#&+subgrid_table_id).jqGrid('navGrid',&#&+pager_id,{edit:,add:,del:})
&&&&subGridRowColapsed:&(subgrid_id,&row_id)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
jQuery(&#listsg11&).jqGrid('navGrid','#pagersg11',{add:,edit:,del:});&调整大小HTML&
&table&id=&list12&&&/table&
&div&id=&pager12&&&/div&
Java&Scrpt&code&
jQuery(&#list12&).jqGrid({
&&&&&&&url:'server.php?q=2',
&&&&datatype:&&json&,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90},
&&&&&&&&&&&{name:'name',index:'name',&width:100},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#pager12',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&multiselect:&,
&&&&width:&500,
&&&&height:&&100%&,
&&&&caption:&&Auto&height&example&
jQuery(&#list12&).jqGrid('navGrid','#pager12',{add:,edit:,del:});&搜索功能HTML&
&div&class=&h&&Search&By:&/div&
&&&&&input&type=&checkbox&&id=&autosearch&&onclick=&enableAutosubmit(this.checked)&&&Enable&Autosearch&&br/&
&&&&Code&br&/&
&&&&&input&type=&text&&id=&search_cd&&onkeydown=&doSearch(arguments[0]||event)&&/&
&&&&Name&br&
&&&&&input&type=&text&&id=&item&&onkeydown=&doSearch(arguments[0]||event)&&/&
&&&&&button&onclick=&gridReload()&&id=&submitButton&&style=&margin-left:30&&Search&/button&
&table&id=&bigset&&&/table&
&div&id=&pagerb&&&/div&
&script&src=&bigset.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#bigset&).jqGrid({&&&&&&&&
&&&&&&&url:'bigset.php',
&&&&datatype:&&json&,
&&&&height:&255,
&&&&&&&colNames:['Index','Name',&'Code'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'item_id',index:'item_id',&width:65},
&&&&&&&&&&&{name:'item',index:'item',&width:150},
&&&&&&&&&&&{name:'item_cd',index:'item_cd',&width:100}
&&&&&&&rowNum:12,
&&&&&&&mtype:&&POST&,
&&&&&&&pager:&jQuery('#pagerb'),
&&&&&&&pgbuttons:&,
&&&&&&&pgtext:&,
&&&&&&&pginput:,
&&&&&&&sortname:&'item_id',
&&&&viewrecords:&,
&&&&sortorder:&&asc&
&flAuto&=&;
&doSearch(ev){
&&&&(!flAuto)
&&&&(timeoutHnd)
&&&&&&&&clearTimeout(timeoutHnd)
&&&&timeoutHnd&=&setTimeout(gridReload,500)
&gridReload(){
&&&&&nm_mask&=&jQuery(&#item_nm&).val();
&&&&&cd_mask&=&jQuery(&#search_cd&).val();
&&&&jQuery(&#bigset&).jqGrid('setGridParam',{url:&bigset.php?nm_mask=&+nm_mask+&&cd_mask=&+cd_mask,page:1}).trigger(&reloadGrid&);
&enableAutosubmit(state){
&&&&flAuto&=&
&&&&jQuery(&#submitButton&).attr(&disabled&,state);
}&六、行编辑&基本例子HTML&
&table&id=&rowed1&&&/table&
&div&id=&prowed1&&&/div&
&input&type=&BUTTON&&id=&ed1&&value=&Edit&row&13&&/&
&input&type=&BUTTON&&id=&sved1&&disabled='true'&value=&Save&row&13&&/&
&input&type=&BUTTON&&id=&cned1&&disabled='true'&value=&Cancel&Save&&/&
&script&src=&rowedex1.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#rowed1&).jqGrid({
&&&&&&&url:'server.php?q=2',
&&&&datatype:&&json&,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90,&editable:},
&&&&&&&&&&&{name:'name',index:'name',&width:100,editable:},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&,editable:},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:,editable:}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#prowed1',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&editurl:&&server.php&,
&&&&caption:&&Basic&Example&
jQuery(&#rowed1&).jqGrid('navGrid',&#prowed1&,{edit:,add:,del:});
jQuery(&#ed1&).click(&()&{
&&&&jQuery(&#rowed1&).jqGrid('editRow',&13&);
&&&&.disabled&=&'true';
&&&&jQuery(&#sved1,#cned1&).attr(&disabled&,);
jQuery(&#sved1&).click(&()&{
&&&&jQuery(&#rowed1&).jqGrid('saveRow',&13&);
&&&&jQuery(&#sved1,#cned1&).attr(&disabled&,);
&&&&jQuery(&#ed1&).attr(&disabled&,);
jQuery(&#cned1&).click(&()&{
&&&&jQuery(&#rowed1&).jqGrid('restoreRow',&13&);
&&&&jQuery(&#sved1,#cned1&).attr(&disabled&,);
&&&&jQuery(&#ed1&).attr(&disabled&,);
});&客户端编辑HTML&
&table&id=&rowed2&&&/table&
&div&id=&prowed2&&&/div&
&script&src=&rowedex2.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#rowed2&).jqGrid({
&&&&&&&url:'server.php?q=3',
&&&&datatype:&&json&,
&&&&&&&colNames:['Actions','Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&{name:'act',index:'act',&width:75,sortable:},
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90,&editable:},
&&&&&&&&&&&{name:'name',index:'name',&width:100,editable:},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&,editable:},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:,editable:}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#prowed2',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&gridComplete:&(){
&&&&&&&&&ids&=&jQuery(&#rowed2&).jqGrid('getDataIDs');
&&&&&&&&(&i=0;i&&&ids.i++){
&&&&&&&&&&&&&cl&=&ids[i];
&&&&&&&&&&&&be&=&&&input&style='height:22width:20'&type='button'&value='E'&onclick=\&jQuery('#rowed2').editRow('&+cl+&');\&&&/&&;&
&&&&&&&&&&&&se&=&&&input&style='height:22width:20'&type='button'&value='S'&onclick=\&jQuery('#rowed2').saveRow('&+cl+&');\&&&/&&;&
&&&&&&&&&&&&ce&=&&&input&style='height:22width:20'&type='button'&value='C'&onclick=\&jQuery('#rowed2').restoreRow('&+cl+&');\&&/&&;&
&&&&&&&&&&&&jQuery(&#rowed2&).jqGrid('setRowData',ids[i],{act:be+se+ce});
&&&&&&&&}&&&&
&&&&editurl:&&server.php&,
&&&&caption:&Custom&edit&&
jQuery(&#rowed2&).jqGrid('navGrid',&#prowed2&,{edit:,add:,del:});&使用事件HTML&
&table&id=&rowed3&&&/table&
&div&id=&prowed3&&&/div&
&script&src=&rowedex3.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#rowed3&).jqGrid({
&&&&&&&url:'server.php?q=2',
&&&&datatype:&&json&,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90,&editable:},
&&&&&&&&&&&{name:'name',index:'name',&width:100,editable:},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&,editable:},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:,editable:}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#prowed3',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&onSelectRow:&(id){
&&&&&&&&(id&&&&id!==lastsel){
&&&&&&&&&&&&jQuery('#rowed3').jqGrid('restoreRow',lastsel);
&&&&&&&&&&&&jQuery('#rowed3').jqGrid('editRow',id,);
&&&&&&&&&&&&lastsel=
&&&&editurl:&&server.php&,
&&&&caption:&&Using&events&example&
jQuery(&#rowed3&).jqGrid('navGrid',&#prowed3&,{edit:,add:,del:});&完全控制HTML&
&table&id=&rowed4&&&/table&
&div&id=&prowed4&&&/div&
&input&type=&BUTTON&&id=&ed4&&value=&Edit&row&13&&/&
&input&type=&BUTTON&&id=&sved4&&disabled='true'&value=&Save&row&13&&/&
&script&src=&rowedex4.js&&type=&text/javascript&&&&/script&
Java&Scrpt&code&
jQuery(&#rowed4&).jqGrid({
&&&&&&&url:'server.php?q=2',
&&&&datatype:&&json&,
&&&&&&&colNames:['Inv&No','Date',&'Client',&'Amount','Tax','Total','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:55},
&&&&&&&&&&&{name:'invdate',index:'invdate',&width:90,&editable:},
&&&&&&&&&&&{name:'name',index:'name',&width:100,editable:},
&&&&&&&&&&&{name:'amount',index:'amount',&width:80,&align:&right&,editable:},
&&&&&&&&&&&{name:'tax',index:'tax',&width:80,&align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'total',index:'total',&width:80,align:&right&,editable:},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:150,&sortable:,editable:}&&&&&&&&
&&&&&&&rowNum:10,
&&&&&&&rowList:[10,20,30],
&&&&&&&pager:&'#prowed4',
&&&&&&&sortname:&'id',
&&&&viewrecords:&,
&&&&sortorder:&&desc&,
&&&&editurl:&&server.php&,
&&&&caption:&&Full&control&
jQuery(&#ed4&).click(&()&{
&&&&jQuery(&#rowed4&).jqGrid('editRow',&13&);
&&&&.disabled&=&'true';
&&&&jQuery(&#sved4&).attr(&disabled&,);
jQuery(&#sved4&).click(&()&{
&&&&jQuery(&#rowed4&).jqGrid('saveRow',&13&,&checksave);
&&&&jQuery(&#sved4&).attr(&disabled&,);
&&&&jQuery(&#ed4&).attr(&disabled&,);
&checksave(result)&{
&&&&&(result.responseText==&&)&{alert(&Update&is&missing!&);&&;}
}&输入类型HTML&
&table&id=&rowed5&&&/table&
Java&Scrpt&code&
jQuery(&#rowed5&).jqGrid({
&&&&datatype:&&local&,
&&&&height:&250,
&&&&&&&colNames:['ID&Number','Name',&'Stock',&'Ship&via','Notes'],
&&&&&&&colModel:[
&&&&&&&&&&&{name:'id',index:'id',&width:90,&sorttype:&int&,&editable:&},
&&&&&&&&&&&{name:'name',index:'name',&width:150,editable:&,editoptions:{size:&20&,maxlength:&30&}},
&&&&&&&&&&&{name:'stock',index:'stock',&width:60,&editable:&,edittype:&checkbox&,editoptions:&{value:&Yes:No&}},
&&&&&&&&&&&{name:'ship',index:'ship',&width:90,&editable:&,edittype:&select&,editoptions:{value:&FE:FedEx;IN:InTTN:TNT;AR:ARAMEX&}},&&&&&&&&
&&&&&&&&&&&{name:'note',index:'note',&width:200,&sortable:,editable:&,edittype:&textarea&,&editoptions:{rows:&2&,cols:&10&}}&&&&&&&&
&&&&onSelectRow:&(id){
&&&&&&&&(id&&&&id!==lastsel2){
&&&&&&&&&&&&jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
&&&&&&&&&&&&jQuery('#rowed5').jqGrid('editRow',id,);
&&&&&&&&&&&&lastsel2=
&&&&editurl:&&server.php&,
&&&&caption:&&Input&Types&
&mydata2&=&[
&&&&&&&&{id:&12345&,name:&Desktop&Computer&,note:&note&,stock:&Yes&,ship:&FedEx&},
&&&&&&&&{id:&23456&,name:&Laptop&,note:&Long&text&&,stock:&Yes&,ship:&InTime&},
&&&&&&&&{id:&34567&,name:&LCD&Monitor&,note:&note3&,stock:&Yes&,ship:&TNT&},
&&&&&&&&{id:&45678&,name:&Speakers&,note:&note&,stock:&No&,ship:&ARAMEX&},
&&&&&&&&{id:&56789&,name:&Laser&Printer&,note:&note2&,stock:&Yes&,ship:&FedEx&},
&&&&&&&&{id:&67890&,name:&Play&Station&,note:&note3&,stock:&No&,&ship:&FedEx&},
&&&&&&&&{id:&76543&,name:&Mobile&Telephone&,note:&note&,stock:&Yes&,ship:&ARAMEX&},
&&&&&&&&{id:&87654&,name:&Server&,note:&note2&,stock:&Yes&,ship:&TNT&},
&&&&&&&&{id:&98765&,name:&Matrix&Printer&,note:&note3&,stock:&No&,&ship:&FedEx&}
&&&&&&&&];
(&i=0;i&&&mydata2.i++)
&jQuery(&#rowed5&).jqGrid('addRowData',mydata2[i].id,mydata2[i]);
-----------------------------------------------------
转载请注明来源此处
微网聚博客乐园 (C)2014 blog.mn886.net 鲁ICP备号&&