强大的JQuery的插件jqGrid

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

jQuery 的jqGrid包 现在已经更新到了3.8了 ，但是其中的主要应用是不会有太大的改动的，希望这个帮助文档能对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 模态对话框的编辑

jqDnR.js 可拖拉的表格编辑

themes 包含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:center;"></div>

</body>

list表格id，pager为表格导航条id 三、 写jqGrid函数

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

',

datatype: 'xml',

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

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等

mtype： 数据传递的方式,有get 和post两种

editurl: 定义inline和form 编辑的后台处理url

Expandcolumn: 在定义treeGrid情况下，指明那一列用来伸展树

forceFit：设置表格在被拖动时自动调整大小以不破坏表格整体布局，注：该属性和 shrinkToFit不能同时使用

gridstate: 设置通用表格在使用hiddengrid属性时，hidegrid的值，可以是：’visible’

或’hidden’默认为visible

shrinkToFit

loadonce: 如果该值设置为true则表格数据仅加载一次，在第一次请求之后数据信息自动转变为客户端处理，pager导航条上的函数都不可用。

loadtext： 在请求数据时显示字幕，默认值为：Loading….

colNames：要显示数据表格的列名 ，需要在前台定义好表格列名

colMode： 对要展示的每列值属性进行定义，最常用的有：

align: 定义表格对齐方式，默认值为left

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

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： 定义索引名

name: 定义属性名，必填项

resizable: 定义列是否可调整大小

index: 定义列id

width： 宽度

align： 对齐方式

pager： 导航条要展示的位置

rowNum： 默认的每页显示记录数

rowList： 可选的每页显示数

viewrecords： 是否设置表格可选，为true是可选，但此时表格不可编辑，只有在false是才可以编辑

imgpath： 图片路径

注：以上属性并不会全部同时出现在jqGrid表格设置里，jqGrid设计了灵活多变的不同组合来展示表格不同的功能。在以后的实际应用里，将对重点属性的组合和分配进行说明。

四、 增加、删除、修改操作的实现

1) 增加

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

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

这段代码是编辑、增加、查找等功能执行的代码，写在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");

var gr=chooseid;

if( gr != null&gr!="" ) {

jQuery("#list").delGridRow(gr,{

afterSubmit: function(xhr,postdata){

alert ('After Submit: ' + postdata);

return [true]},

url: pathname +'/xmlTableEdit?openagent&oper=del' //执行删除代理rul

});

} else {

alert("Please Select Row to delete!");

};},position:"last"

})

上面这段代码就添加了一个删除按钮，并获得选中的id数组，并通过url代理去处理该操作。

事实上，通过.navButtonAdd()函数可以添加任何我们想要的按钮，而该函数里面属性分别定义按钮出现的位置’#pager’,按钮标题字符’caption’，按钮图标路径’buttonimg’,点击按钮的onClickButton事件，在事件里面可以写任何你想要的js代码，以满足你的需求。position属性定义了按钮显示的位置。

除了这种直接添加按钮和事件的方法外，jqGrid还提供了重写和替换部分功能函数的能力。举例编辑功能说明。

四、jqGrid的修改编辑功能

jqGrid定义了三种可以用于修改和编辑表格数据的方法，分别是cellEdit、inline Edit、

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

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.responseText;

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

var arr = text.split(";");

if(arr[0].indexOf("true")!=-1){

var num = parseFloat(arr[1]);

jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'});

}

},

以上代码展示了cellEdit设置需要的代码。cellEdit功能的实现只需要设置cellEdit为true，并设置cellurl在后台写处理数据的程序即可。而要满足功能上的需要，还需要添加afterEditCell等事件。

afterSubmitCell：提交完成后事件，serverrepsponse从后台返回数据，rowid选中行id， cellname 单元格name属性在colModel里设置，value cell的值，iRow index of the row,iCol the index of the column

jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'}//设行id为rowid，列名为’N_JinEr’的单元格值为num，样式设置为{color:'red','text-align':'center'}。

afterSubmitCell处理了cellEdit编辑后，从后台取回数据并处理单元格值的过程，在实际情况下根据需要添加不同事件即可。

(二) inlineEdit:

editurl:pathname+'/xmlTableEdit?openagent&oper='+oper+'&showView='+showView+'&formName='+formName+'&punid='+unid, //设置添加、更新的url /* //以下参数根据需要添加， /* oper: 操作类型，edit 编辑、 del 删除、

showView: 操作视图名，即表格展示的试图

formName： 操作标识符，区分不同表单的不同操作

punid: 主文档id

*/

ultiselect: false, //选择行属性inlineEdit时不能设置多选行

onSelectRow: function(id){

chooseid=id;

if(id && id!==lastsel2){

jQuery('#list').restoreRow(lastsel2); //选中不同表格id变化 jQuery('#list').editRow(id,true,oneditfunc,aftersavefunc); //表格编辑函数

lastsel2=id;

};

// 表格编辑时触发函数，一般无用可以为空

function oneditfunc(id){

};

//格编辑保存后执行函数，可以用来处理相关事件

function aftersavefunc(id,res){

jQuery("#list").trigger("reloadGrid");

changeValueafEdit(showView,unid);

};

},

// 重写编辑验证提示

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

jQuery.jgrid.edit = {

editCaption: "编辑记录",

bSubmit: "提交",

bCancel: "退出",

processData: "处理中...",

width:400,

dodal:true,

msg: {

required:"Field is required",

number:"请输入数字!",

minValue:"数值应大于 ",

maxValue:"数值应小于"

}

};

$.extend($.jgrid.edit,{Edit:'修改'});

五、xml数据格式的解释

XML Data

jqGrid解释数据的方式有三种：xml、json、xmlString，我们使用xml这种方式来处理。Xml的格式和作用，这里不做说明，有兴趣的可以自己到网上查。

xmlReader :

{ root: "rows",

row: "row",

page: "rows>page",

total: "rows>total",

records : "rows>records",

repeatitems: true,

cell: "cell",

id: "[id]",

userdata: "userdata",

subgrid: { root:"rows", row: "row", repeatitems: true, cell:"cell" }

}

上面一段代码，放在jqGrid里面，作为对后台传送xml数据格式的解释方式。标准的jqGrid 支持的xml格式如下所示：

<?xml version='1.0' encoding='utf-8'?>

<root>

<rows> -----root：rows

<row> -----row：row

<cell>sss</cell> ------cell：cell

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

<cell>sss</cell>

<cell>sss</cell>

</row>

<row>

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

<cell>sss</cell>

</row>

</rows>

</root>

如果xml格式发生变化，则xmlReader里的数据做相应修改即可。

page: "rows>page",

total: "rows>total",

records : "rows>records",

repeatitems: true,

这几行代码的作用在于，定义分页的条件，使页面正确显示数据和分页。最后一个repertitems是设置xml格式里的cell是否可以重复一样。

六、一些操作函数

jQuery("#grid_id").trigger("reloadGrid"); 刷新表格

jQuery("#grid_id").getGridParam('selarrrow'); 获取选择表格的id 多选的

jQuery("#grid_id").getGridParam('selrow'); 获取选中表格id 单选

//设置不可编辑的单元格被选中后触发的事件

onSelectCell:function(rowid,celname,value,iRow,iCol){

var gg= jQuery("#list").getGridParam("selrow");

var gr= jQuery("#list").getCell(gg,"N_DanJia");

if(gr<100){

N_DanJia:1000;

};

},

beforeSubmitCell : function(rowid,celname,value,iRow,iCol){

UserData：

在某些情况下，我们接受到从服务器端传递过来的数据并不会自动的被jqGrid展现的，这个时候我们要么在接下来对它进行处理，要么在html代码里进行额外说明，这个时候userdata这个标签就用到了。

xmlReader: {userdata: "userdata",... }

In the data received from the server, this could be structured as follows (in xml): <invoices> <request>true</request>

希望这个帮助文档能对大家学习jQuery的插件jqGrid带来帮助(在个人的使用过程中不断更新),希望大家提出意见。

<userdata name="totalinvoice"> 240.00 </userdata> <userdata name="tax"> 40.00</userdata> ... <result>

<row>

<cell>data1</cell>

<cell>data2</cell>

<cell>data3</cell>

<cell>data4</cell>

<cell>data5</cell>

<cell>data6</cell>

</row> ... </result>

</invoices>

57页开始讲解增删查改

12.3 更新:

本文来源：https://www.bwwdw.com/article/ahp1.html