jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
jqGrid是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。
一、要引用的文件
要使用jqGrid,首先页面上要引入如下css与js文件。
1、css
<linkhref="/css/ui.jqgrid.css"rel="stylesheet"type="text/css"/>
2、js
<scriptsrc='/Scripts/js/jquery-2.0.3.min.js'type="text/javascript"></script> <scriptsrc='/Scripts/js/jqGrid/jquery.jqGrid.min.js'type="text/javascript"></script> <scriptsrc='/Scripts/js/jqGrid/i18n/grid.locale-en.js'type="text/javascript"></script>
二、使用要点说明
1、获取值
(1)、获取单个id
获取行号,有这种方式:
varrowid=$("#grid-table").jqGrid("getGridParam","selrow");
但是经过实际验证,这种方式不可行,当选中行,再点击同一行会出现获取不到行号的情况。
最后先在js最外部定义一个变量selId,然后使用如下代码在选中行时赋值:
onSelectRow:function(rowid,status){ selId=rowid;//给最外层的selId赋值 }
(2)、获取多个选中行的id
varids=$('#gridTable').jqGrid('getGridParam','selarrrow');
其输出格式是逗号分隔的id,如:
1,2,3,4,5
(3)、获得所有行的ID数组
varids=$("jqgridtableid").jqGrid('getDataIDs');
(4)、获取行数据
如果想获取选择的行的数据,只要传入rowId即可,如下:
varrowData=$('#gridTable').jqGrid('getRowData',rowId);
而这个rowData是一个对象,如果要获取选择的行的这个对象的属性值,如name的值,需如下:
varName=rowData.name;
(5)、获取单元格数据
varcelldata=$("jqgridtableid").jqGrid('getCell',id,colnum);
(6)、设定行选中
//设定选中行,可设定多行选中: $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);
2、自定义分页、数据交互
何谓自定义?就是允许你用你自己喜欢的js对象与后端做数据交互。如jsonReader。
如果这个地方的Id设置错了,那么jqGrid就会自动以行号作为Id,这样会影响删除的。如果根据Id来删,很有可能删错行。
jsonReader:{ id:"Id",//相当于设置主键 root:"JsonArray",//Json数据 total:"TotalPage",//总页数 page:"CurrentPage",//当前页 records:"TotalRecord",//总记录数 repeatitems:false },
这样一来,对于数据表格,在C#中,我可以用一个泛型类,就能够与jqGrid表格进行交互(其中,包括了分页信息,数据内容)。
///<summary> ///分页ViewModel ///</summary> publicclassjQGrid<T>whereT:class { publicjQGrid() {} ///<summary> ///带4个参数的构造函数 ///</summary> ///<paramname="rows">每页显示行数</param> ///<paramname="currentPage">当前页</param> ///<paramname="totalRecord">结果总记录数</param> ///<paramname="jsonArray">JSON数据</param> publicjQGrid(introws,intcurrentPage,inttotalRecord,IList<T>jsonArray) { TotalPage=this.CalculateTotalPage(rows,totalRecord); CurrentPage=currentPage; TotalRecord=totalRecord; JsonArray=jsonArray; } publicintTotalPage{get;set;} publicintCurrentPage{get;set;} publicintTotalRecord{get;set;} publicIList<T>JsonArray{get;set;} ///<summary> ///根据每页显示数与总记录数计算出总页数 ///</summary> ///<paramname="rows">每页显示数</param> ///<paramname="totalRecord">结果总记录数</param> ///<returns></returns> publicintCalculateTotalPage(introws,inttotalRecord) { returnConvert.ToInt32(Math.Ceiling((double)totalRecord/(double)rows)); } }
3、搜索的实现
搜索的实现主要通过jqGrid的postData像服务器端传递参数。
$("#btnSearch").click(function(){ varrules=""; $("#multipleSearchDialog").each(function(i){ $(".div-padding:input").each(function(){ if($(this).val()){ rules+='"'+$(this).attr("name")+'":"'+$(this).val()+'"'; } }) }); ParamJson='{'+rules+'}'; varpostData=$("#grid-table").jqGrid("getGridParam","postData"); $.extend(postData,{Param:ParamJson}); $("#grid-table").jqGrid("setGridParam",{search:true}).trigger("reloadGrid",[{page:1}]);//重载JQGrid });
搜索功能主要通过postData向服务器端传递数据。后端获取参数从而进行处理:
Dictionary<string,string>DicParam=newDictionary<string,string>(); stringParam=Convert.ToString(Request["Param"]); if(!string.IsNullOrEmpty(Param)) { System.Web.Script.Serialization.JavaScriptSerializersr=newSystem.Web.Script.Serialization.JavaScriptSerializer(); DicParam=sr.Deserialize(Param,typeof(Dictionary<string,string>))asDictionary<string,string>; }
这样就获取到了查询参数的键值对,至于参数怎么用,一般都是用于sql的where子句。
三、更多jqGrid配置属性说明
1、属性
参数名称
类型
描述
默认值
是否可以被修改
2、事件
描述
afterInsertRow
rowid
rowdata
rowelem此事件发生在每次插入行后
rowid 为插入的行ID
rowdata 是被插入行的数据数组。格式为name:value对,name在colModel定义
rowelem 是应答元素。xml为xml行,json为所有行数据。
注意:若gridview为true,此事件不会发生
beforeRequest
none
此事件发生在任何数据请求前,但当datatype为function时不发生。
beforeSelectRow
rowid,e
此事件发生在用户点击行,选中该行前。
rowid 为行的ID,e为事件对象
该事件将返回布尔值true(行被选中)或false(行未被选中)。
gridComplete
none
此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。
loadBeforeSend
xhr,
settings此事件发生在XMLHttpRequest被发送前,用于修改对象属性(如headers)。xhr为XMLHttpRequest对象。
loadComplete
data
此事件发生在每个服务器请求后。xhr为XMLHttpRequest对象。
loadError
xhr,
status,
error此事件在请求失败时发生。事件有3个参数:
xhr 为XMLHttpRequest对象;
Satus 为错误类型描述;error 为错误对象。
onCellSelect
rowid,
iCol,
cellcontent,
e此事件在点击表格特定单元格时发生。
rowid 为行ID;iCol 为列索引;
cellcontent 为单元格中内容;
e 点击事件对象。
ondblClickRow
rowid,
iRow,
iCol,
e此事件发生在行双击后发生。
rowid为行ID;iRow 为行索引(勿与rowid混淆);
iCol为列索引;
e 为事件对象。
onHeaderClick
gridstate
此事件发生在点击显示或隐藏表格后发生(hidegrid为true)gridstate为表格状态,有visible和hidden两个值
onPaging
pgButton
此事件发生在点击pagebutton后,填充数据前,及用户输入一个与当前页页码不同的新页码并回车时。
onRightClickRow
rowid,
iRow,
iCol,
e此事件发生在右击行后。(此事件在Opera浏览器中无效)
rowid为行ID;iRow为行索引(勿与rowid混淆)
iCol为列索引;
e为事件对象
onSelectAll
aRowids,
status此事件发生在点击标题的复选框时发生(multiselect为true)
aRowids 选定行ID的数组(哪些行的复选框与头复选框相同)
status 头复选框的选定的布尔值,true为选中,false为
onSelectRow
rowid,
status此事件发生在行点击后
rowid 为行ID;
status 为选择状态。当multiselect为true时使用,当行被选中时返回true;为选中时返回false。
onSortCol
index,
iCol,
sortorder此事件发生在列排序被点击之后,数据排序前
index 为colModel中定义的索引名iCol 为列的索引号
sortorder 为新的排序方式,asc或desc
resizeStart
event,index
此事件发生在列被重新定义宽度时。 event 为事件对象;index 为在colModel中定义的列索引。
resizeStop
newwidth,index
此事件发生在列被重新定义宽度后。
newwidth 为新的列宽度;index 为在colModel中定义的列索引。
serializeGridData
postData
通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据(如JSON字符串、XML字符串)要发给服务器时,可使用该事件。
3、方法
描述
addJSONData
data
none
用传递的data(数组)填充网格。用法:假如我们从web服务器获得的数据(jsonresponse),则
varmygrid=jQuery(”#”+grid_id)[0];
varmyjsongrid=eval(”(”+jsonresponse.responseText+”)”);
mygrid.addJSONData(myjsongrid);
myjsongrid=null;
jsonresponse=null;
将填充网格。当然,myjsongrid中的数据在传递到addJSONData之前可以被操作。
addRowData
rowid,
data,
position,
srcrowidtrueonsuccess,
falseotherwise插入一新行,rowid 为新行的ID,data(数组)为新行数据,position为新行插入的位置(first为表头,last为表尾,srcrowid指定偏移位置)。Data数组的格式为:{name1:value1,name2:value2…},name为colModel指定的名称。
addXmlData
data
none
用传入的data填充网格。用法:假如我们从web服务器获得数据
(xmlresponse),则varmygrid=jQuery(”#”+grid_id)[0];
mygrid.addXmlData(xmlresponse.responseXML);
将填充网格。当然,xmlresponse中的数据在传递到addXmlData之前可以被操作。
clearGridData
clearfooter
jqGridobject
清除网格中当前装入的数据,如果clearfooter参数为true,则清除网格最后一行数据。
delRowData
rowid
trueonsuccess,
falseotherwise删除id=rowid的行。但不会删除服务器上的数据。
footerData
action,
data,
formatjqGridobject
此方法获得或设置网格底部数据。
action –可设置为get(缺省)或set。Get从底部返回name:value对象(name为colModel中的名称)。此时其他两个参数无效。
Set将data数组(对象)设置到底部。Data为colName中的名称和值对。
format –缺省为true,表示设置时使用formatter(如果colModel中已定义)。false表示不使用formatter
getCell
rowid,
iColcellcontent
返回id=rowid行,column=iCol列的内容。iCol可以是列的索引或colName中定义的名称。在编辑行或列时不能使用该方法,此时返回的不是当前值,而是原始值。
getCol
colname,returntype,mathoperation
array[]orvalue
返回列值数组。
colname可以是列的索引值或colModel中的名称。returntype确定返回数组的类型,为false(缺省)时,数组只包含值。为true时为对象数组,格式为{id:rowid,value:cellvalue},id为行的id,cellvalue为单元格的值。如[{id:1,value:1},{id:2,value:2}…]
mathoperation为可选参数,可以是sum、avg和count。若此参数进行了有效设置,则返回计算后的值,若无效,则返回空数组。
getDataIDs
none
array[]
返回当前网格显示数据的ID数组。无数据时返回空数组。
getGridParam
name
mixedvalue
返回请求的参数的值。name是options数组中的名称,若为设置则options被返回。
getInd
rowid,
rowcontentmixed
当rowcontent设置为false(缺省)时,返回id=rowid行的索引值。若rowcontent设置为true,则返回整行。若为找到rowid则返回false。
getLocalRow
rowid
rowobject
Returntherowdatafromthelocalarraystoredindataparameterwhenthedatatypeislocal
getRowData
rowidornone
array{}
返回id=rowid行的数据数组。格式为name:value对,name为colModel中的名称,value为该行的值。未找到返回空数组。在行或列编辑时此方法不可用,此时返回的不是当前值,而是原始值。
若rowid为设置,则返回网格中所有数据数组。
hideCol
colname
or
[colnames]jqGridobject
根据colname或colnames数组给定的列名隐藏相应的列,列名必须是colModel中定义的名称。表格的宽度不会改变。
remapColumns
permutation,updateCells,keepHeader
none
调整列的显示顺序。permutation指定调整后的顺序,如[1,0,2]表示第一列在第二位显示。若updateCells设置为true,列数据将重新排序。若keepHeader设置为true,header单元格将重新排序。
resetSelection
none
jqGridobject
选择(反选)行。多选择模式下同样可用。
setCaption
caption
jqGridobject
设置新的表头文字。若表头为隐藏,将显示。
setCell
rowid,
colname,
data,
class,
properties,
forceupjqGridobject
修改单元格的值、类或样式。其中:
rowid为行ID;colname为列名(可以是从0开始的列的索引值);
data 设置的内容,若为空,class若为字符串,将使用addClass为列加入一个类,若为数组,将直接加入CSS中;properties 设置单元格属性。
setGridParam
object
jqGridobject
设置一个特定的参数。
有些参数需trigger(“reloadGrid”)才能生效。注意这个方法可以覆盖事件。名称(name:value对)为选项数组中的名称。
setGridHeight
new_height
jqGridobject
动态设置网格高度。只能对单元格的高度进行设置而不是网格。new_height可以是像素、百分比或auto。
setGridWidth
new_width,
shrinkjqGridobject
动态设置网格宽度。new_width为新宽度的像素值;
shrink(true或false)作用同shrinkToFit。若不设置,则使用shrinkToFit设置。
setLabel
colname,
data,
class,
propertiesjqGridobject
设置指定列标题文字、属性和类:
colname 为列名,可以是从0开始的列索引;
data 为标题文字,为空则不修改;
class 若为字符串,则为类名,若为数组,则直接写入CSS;
properties 为标题文字的属性。
setRowData
rowid,
data,
cssproptrueonsuccess,
falseotherwise更新rowid指定行的数据(使用数组)。
Data数组的格式为:{name1:value1,name2:value2…}。name为colModel中描述的名称,value为新值。cssprop若为字符串,将使用addClass为行添加类;若为数组对象,则直接加入CSS中。将data设置为false的情况下,可设置属性和类名
setSelection
rowid,
onselectrowjqGridobject
选择或反选id=rowid指定的行。若onselectrow设置为true(缺省)则触发onSelectRow事件,否则不触发。
showCol
colname
jqGridobject
显示colname指定的列。若colname为字符串,只显示指定的列,若colname为数组[“name1”,”name2”]则显示name1和name2列,name必须是colModel中的名称。宽度不变。
trigger(“reloadGrid”)
none
none
按当前设置重新加载网格。若datatype为xml或json,将从服务器重新请求数据。此方法适用于一个已建立的网格。注意不会改变表头,也就是说改变colModel将没有作用。你可用gridUnload,使用新colModel来重新加载。
updateColumns
none
none
在拖拽表格时,同步网格宽度。用法:
varmygrid=jQuery(”#grid_id”)[0];
mygrid.updateColumns();
四、问题记录
1、IE9下jQgrid一直出现水平滚动条的问题。
解决:是因为jqGrid会在IE下出现border与padding造成宽度过大引起的,增加此属性可解决:
cellLayout:0
此时当页面缩放摆100%时,已经不显示滚动条,但是缩放比例不为100%时,依然会显示水平滚动条,终极解决方案为更改ui.jqgrid.css样式:
.ui-jqgrid.ui-jqgrid-bdiv{overflow-x:hidden;}
如果还是不行,还有一个方法:
$(grid_selector).closest(".ui-jqgrid-bdiv").css({'overflow-x':'hidden'});
当然你也可以直接修改样式.ui-jqgrid-bdiv增加overflow-x:hidden;
2、自定义操作列。
jqGrid默认的自定义编辑列,只能设置编辑按钮与删除按钮。并且图标基本上都很难控制,如果想自己实现自己的自定义编辑列,可以如下操作:
在actions列的formatoptions项,增加此行:
name:'myac',index:'',width:80,fixed:true,sortable:false,resize:false, formatter:'actions', formatoptions:{ keys:true, delbutton:false, delOptions:{recreateForm:true,beforeShowForm:beforeDeleteCallback}, formatter:"actionFormatter" },
然后在页面开始处增加如下代码:
$.extend($.fn.fmatter,{ actionFormatter:function(cellvalue,options,rowObject){ varretVal="显示在原来编辑按钮的按个地方的代码"; returnretVal; } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。