jqGrid说明.doc

jqGrid包说明: jquery.js is the jQuery library, jquery.jqGrid.js 主单元，包含的功能取决您的选择 grid.basic.js主插件，其他插件包依赖于该插件正常运行 grid.custom.jsGrid高级插件功能包 grid.formedit.js用于表格编辑、增加、删除功能 grid.inlinedit.js 线条编辑 grid.subgrid.js一个处理表格的插件 grid.postext.js 一个可以用来操作post数据的包 jqModal.js 模态对话框的编辑 jqDnR.js可拖拉的表格编辑 themes 包含gird需要的样式表Select * from class where id = max(id)一、 功能描述：jqGrid包主要用于将需要展示的数据动态的展示在页面的上，即动态画出表格，并封装了增、删、改、查、分类显示、在线编辑修改等功能。二、 关键使用说明：1、 导入jqGrid包，在首页属性里面添加如下包的信息 注：由于加载js包 会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。2、 在页面上需要添加表格的地方， 增加 list表格id，pager为表格导航条id三、 写jqGrid函数jQuery(document).ready(function() jQuery(#list).jqGrid( url:example.php, 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 的idaltRows : 设置表格显示斑马条纹属性，默认值为truecaption:定义表格标题名cellEdit：设置表格单元是否可以编辑，默认值为true，详见cellEdit介绍cellsubmit: 决定cell容器如何被保存，使用remote或者clientArray，详见cellEditcellurl:处理cell编辑的url路径，默认值为空datatype : 从后台展示的数据格式，有xml、 json等mtype： 数据传递的方式,有get 和post两种editurl:定义inline和form 编辑的后台处理urlExpandcolumn:在定义treeGrid情况下，指明那一列用来伸展树forceFit：设置表格在被拖动时自动调整大小以不破坏表格整体布局，注：该属性和shrinkToFit不能同时使用gridstate:设置通用表格在使用hiddengrid属性时，hidegrid的值，可以是：visible 或hidden默认为visibleshrinkToFitloadonce:如果该值设置为true则表格数据仅加载一次，在第一次请求之后数据信息自动转变为客户端处理，pager导航条上的函数都不可用。loadtext：在请求数据时显示字幕，默认值为：Loading.colNames：要显示数据表格的列名 ，需要在前台定义好表格列名colMode： 对要展示的每列值属性进行定义，最常用的有：align:定义表格对齐方式，默认值为leftdatefmt：日期格式，默认值为：Y-M-deditable：定义field是否可编辑，该属性用于inline和form编辑，默认值为falseeditrules：editrules：edithidden:true,/如果为true，则该列在添加和编辑时被隐藏required:true,/如果为true，则该列表格不能为空number:true,/true时表格必须为数字型integer:true,/true时，表格数字为整形minValue:val,/设置数字最小值与最大值maxValue:val,email:true/验证是否为emailedittype：定义编辑类型：text,texttarea,select,checkbox,passworadhidedlg:为true时，该列不会显示在表格对话框中hidden：定义列在初始化时是否被隐藏index：定义索引名name: 定义属性名，必填项resizable:定义列是否可调整大小index: 定义列idwidth： 宽度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这段代码是编辑、增加、查找等功能执行的代码，写在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、rowEdit分别对应单元格编辑、在线行编辑、以对话框式的行编辑。以下将分别简单介绍这三种编辑方法和用法。(一) cellEdit:l 单元格编辑支持键盘操作，当选中某一单元格时，可以按上下、左右来切换选中l 如果单元格可编辑，当我们按下Enter键或鼠标点击其他键时cell编辑后将被保存，除非我们按下Esc键l 当cell被编辑过后，cell编程dirty数据，这时候在左上角会显示出一个红色标记l 当我们点击可编辑的cell时，我们可以直接进入编辑状态properties:1、有三个属性来设置cellEdit:cellEdit:当为true时，cell才可编辑，此时Multiselect（设置选择多行）则不可用，onSelectRow函数不可用cellsubmit：定义cell容器在那里被保存，remote或clientArray。如果是remote则数据会立刻通过cellUrl用Ajax方式传递到后台去处理，传递格式为：id:rowed,mycell:cellvaluecellurl:设置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编辑时，此属性必须为trueafterEditCell: 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; var arr = text.split(;); if(arr0.indexOf(true)!=-1) var num = parseFloat(arr1); 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 columnjQuery(#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.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: rowspage,total: rowstotal, records : rowsrecords, repeatitems: true, cell: cell, id: id, userdata: userdata, subgrid: root:rows, row: row, repeatitems: true, cell:cell 上面一段代码，放在jqGrid里面，作为对后台传送xml数据格式的解释方式。标准的jqGrid 支持的xml格式如下所示： -root：rows -row：rowsss -cell：cellsssssssssssssssssssssssssssssssssssssss如果xml格式发生变化，则xmlReader里的数据做相应修改即可。page: rowspage,total: rowstotal, records :