jqgrid用法
来源:互联网 发布:js中的map的使用 编辑:程序博客网 时间:2024/05/21 17:48
转载地址:http://www.cnblogs.com/kissdodog/p/3875992.html
一、要引用的文件
要使用jqGrid,首先页面上要引入如下css与js文件。
1、css
<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
2、js
<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>
二、使用要点说明
1、获取值
1、获取单个id
获取行号,有这种方式:
var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");
但是经过实际验证,这种方式不可行,当选中行,再点击同一行会出现获取不到行号的情况。
最后先在js最外部定义一个变量selId,然后使用如下代码在选中行时赋值:
onSelectRow: function (rowid, status) { selId = rowid; //给最外层的selId赋值 }
2、获取多个选中行的id
var ids=$('#gridTable').jqGrid('getGridParam','selarrrow');
其输出格式是逗号分隔的id,如:
1,2,3,4,5
3、获得所有行的ID数组
var ids = $("jqgridtableid").jqGrid('getDataIDs');
4、获取行数据
如果想获取选择的行的数据,只要传入rowId即可,如下:
var rowData = $('#gridTable').jqGrid('getRowData',rowId);
而这个rowData是一个对象,如果要获取选择的行的这个对象的属性值,如name的值,需如下:
var Name= rowData.name;
5、获取单元格数据
var celldata = $("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> public class jQGrid<T> where T : class { public jQGrid() { } /// <summary> /// 带4个参数的构造函数 /// </summary> /// <param name="rows">每页显示行数</param> /// <param name="currentPage">当前页</param> /// <param name="totalRecord">结果总记录数</param> /// <param name="jsonArray">JSON数据</param> public jQGrid(int rows, int currentPage, int totalRecord, IList<T> jsonArray) { TotalPage = this.CalculateTotalPage(rows, totalRecord); CurrentPage = currentPage; TotalRecord = totalRecord; JsonArray = jsonArray; } public int TotalPage { get; set; } public int CurrentPage { get; set; } public int TotalRecord { get; set; } public IList<T> JsonArray { get; set; } /// <summary> /// 根据每页显示数与总记录数计算出总页数 /// </summary> /// <param name="rows">每页显示数</param> /// <param name="totalRecord">结果总记录数</param> /// <returns></returns> public int CalculateTotalPage(int rows, int totalRecord) { return Convert.ToInt32(Math.Ceiling((double)totalRecord / (double)rows)); } }
3、搜索的实现
搜索的实现主要通过jqGrid的postData像服务器端传递参数。
$("#btnSearch").click(function () { var rules = ""; $("#multipleSearchDialog").each(function (i) { $(".div-padding :input").each(function () { if ($(this).val()) { rules += '"' + $(this).attr("name") + '":"' + $(this).val() + '"'; } }) }); ParamJson = '{' + rules + '}'; var postData = $("#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 = new Dictionary<string, string>(); string Param = Convert.ToString(Request["Param"]); if (!string.IsNullOrEmpty(Param)) { System.Web.Script.Serialization.JavaScriptSerializer sr = new System.Web.Script.Serialization.JavaScriptSerializer(); DicParam = sr.Deserialize(Param, typeof(Dictionary<string, string>)) as Dictionary<string, string>; }
这样就获取到了查询参数的键值对,至于参数怎么用,一般都是用于sql的where子句。
三、更多jqGrid配置属性说明
1、属性
url获取数据的地址datatype从服务器端返回的数据类型,默认xml。可选类型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientsidemtypeajax提交方式。POST或者GET,默认GETcolNames列显示名称,是一个数组对象。colModel对显示列属性的设置,是一个数组对象。常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序pager定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置rowNum在grid上显示记录条数,这个参数是要被传递到后台rowList一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台sortname默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台viewrecords定义是否要显示总记录数caption表格名称
事件参数描述afterInsertRowrowid
rowdata
rowelem此事件发生在每次插入行后
rowid 为插入的行ID
rowdata 是被插入行的数据数组。格式为name:value对,name在colModel定义
rowelem 是应答元素。xml为xml行,json为所有行数据。
注意:若gridview 为true,此事件不会发生beforeRequestnone此事件发生在任何数据请求前,但当datatype为function时不发生。beforeSelectRowrowid, e此事件发生在用户点击行,选中该行前。
rowid 为行的ID,e为事件对象
该事件将返回布尔值true(行被选中)或false(行未被选中)。gridCompletenone此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。loadBeforeSendxhr,
settings此事件发生在XMLHttpRequest被发送前,用于修改对象属性(如headers)。 xhr 为XMLHttpRequest对象。loadCompletedata此事件发生在每个服务器请求后。xhr 为XMLHttpRequest对象。loadErrorxhr,
status,
error此事件在请求失败时发生。事件有3个参数:
xhr 为XMLHttpRequest对象;
Satus 为错误类型描述;error 为错误对象。onCellSelectrowid,
iCol,
cellcontent,
e此事件在点击表格特定单元格时发生。
rowid 为行ID;iCol 为列索引;
cellcontent 为单元格中内容;
e 点击事件对象。ondblClickRowrowid,
iRow,
iCol,
e此事件发生在行双击后发生。
rowid为行ID;iRow 为行索引(勿与rowid混淆);
iCol为列索引;
e 为事件对象。onHeaderClickgridstate此事件发生在点击显示或隐藏表格后发生(hidegrid为true) gridstate为表格状态,有visible和hidden两个值onPagingpgButton此事件发生在点击page button后,填充数据前,及用户输入一个与当前页页码不同的新页码并回车时。onRightClickRowrowid,
iRow,
iCol,
e此事件发生在右击行后。(此事件在Opera浏览器中无效)
rowid为行ID;iRow为行索引(勿与rowid混淆)
iCol为列索引;
e为事件对象onSelectAllaRowids,
status此事件发生在点击标题的复选框时发生(multiselect为true)
aRowids 选定行ID的数组(哪些行的复选框与头复选框相同)
status 头复选框的选定的布尔值,true为选中,false为onSelectRowrowid,
status此事件发生在行点击后
rowid 为行ID;
status 为选择状态。当multiselect为true时使用,当行被选中时返回true;为选中时返回false。onSortColindex,
iCol,
sortorder此事件发生在列排序被点击之后,数据排序前
index 为colModel 中定义的索引名iCol 为列的索引号
sortorder 为新的排序方式,asc或descresizeStartevent, index此事件发生在列被重新定义宽度时。 event 为事件对象;index 为在colModel 中定义的列索引。resizeStopnewwidth, index此事件发生在列被重新定义宽度后。
newwidth 为新的列宽度;index 为在colModel 中定义的列索引。serializeGridDatapostData通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据(如JSON字符串、XML字符串)要发给服务器时,可使用该事件。
3、方法
方法参数返回值描述addJSONDatadatanone用传递的data(数组)填充网格。用法:假如我们从web服务器获得的数据(jsonresponse),则var mygrid = jQuery(”#”+grid_id)[0];
var myjsongrid = eval(”(”+jsonresponse.responseText+”)”);
mygrid.addJSONData(myjsongrid);
myjsongrid = null;
jsonresponse =null;
将填充网格。当然,myjsongrid中的数据在传递到addJSONData之前可以被操作。addRowDatarowid,
data,
position,
srcrowidtrue on success,
false otherwise插入一新行,rowid 为新行的ID,data(数组)为新行数据,position为新行插入的位置(first为表头,last为表尾,srcrowid指定偏移位置)。Data数组的格式为:{name1:value1,name2: value2…} ,name为colModel指定的名称。addXmlDatadatanone用传入的data填充网格。用法:假如我们从web服务器获得数据
(xmlresponse),则 var mygrid = jQuery(”#”+grid_id)[0];
mygrid.addXmlData(xmlresponse.responseXML);
将填充网格。当然,xmlresponse中的数据在传递到addXmlData之前可以被操作。clearGridDataclearfooterjqGrid object清除网格中当前装入的数据,如果clearfooter 参数为true,则清除网格最后一行数据。delRowDatarowidtrue on success,
false otherwise删除id = rowid的行。但不会删除服务器上的数据。footerDataaction,
data,
formatjqGrid object此方法获得或设置网格底部数据。
action – 可设置为get(缺省)或set。 Get从底部返回name:value对象(name为colModel中的名称)。此时其他两个参数无效。
Set将data数组(对象)设置到底部。Data为colName中的名称和值对。
format – 缺省为true,表示设置时使用formatter (如果colModel中已定义)。false表示不使用formattergetCellrowid,
iColcell content返回id = rowid行,column = iCol列的内容。 iCol可以是列的索引或colName中定义的名称。在编辑行或列时不能使用该方法,此时返回的不是当前值,而是原始值。getColcolname, returntype, mathoperationarray[] or value返回列值数组。
colname 可以是列的索引值或colModel中的名称。returntype 确定返回数组的类型,为false(缺省)时,数组只包含值。为true时为对象数组,格式为{id:rowid, value:cellvalue},id为行的id, cellvalue为单元格的值。如 [{id:1,value:1},{id:2,value:2}…]
mathoperation为可选参数,可以是sum、avg和count。若此参数进行了有效设置,则返回计算后的值,若无效,则返回空数组。getDataIDsnonearray[]返回当前网格显示数据的ID数组。无数据时返回空数组。getGridParamnamemixed value返回请求的参数的值。name 是options 数组中的名称,若为设置则options被返回。getIndrowid,
rowcontentmixed当rowcontent 设置为false(缺省)时,返回id= rowid行的索引值。若rowcontent设置为true,则返回整行。若为找到rowid则返回false。getLocalRowrowidrow objectReturn the row data from the local array stored in data parameter when the datatype is localgetRowDatarowid or nonearray{}返回id = rowid行的数据数组。格式为name:value对,name为colModel中的名称,value为该行的值。未找到返回空数组。在行或列编辑时此方法不可用,此时返回的不是当前值,而是原始值。
若rowid为设置,则返回网格中所有数据数组。hideColcolname
or
[colnames]jqGrid object根据colname或colnames数组给定的列名隐藏相应的列,列名必须是colModel中定义的名称。表格的宽度不会改变。remapColumnspermutation, updateCells, keepHeadernone调整列的显示顺序。permutation指定调整后的顺序,如 [1,0,2] 表示第一列在第二位显示。若updateCells 设置为true,列数据将重新排序。若keepHeader 设置为true,header单元格将重新排序。resetSelectionnonejqGrid object选择(反选)行。多选择模式下同样可用。setCaptioncaptionjqGrid object设置新的表头文字。若表头为隐藏,将显示。setCellrowid,
colname,
data,
class,
properties,
forceupjqGrid object修改单元格的值、类或样式。其中:
rowid为行ID;colname为列名(可以是从0开始的列的索引值);
data 设置的内容,若为空,class若为字符串,将使用addClass为列加入一个类,若为数组,将直接加入CSS中;properties 设置单元格属性。setGridParamobjectjqGrid object设置一个特定的参数。
有些参数需trigger(“reloadGrid”)才能生效。注意这个方法可以覆盖事件。名称(name:value对)为选项数组中的名称。 setGridHeightnew_heightjqGrid object动态设置网格高度。只能对单元格的高度进行设置而不是网格。new_height 可以是像素、百分比或auto。setGridWidthnew_width,
shrinkjqGrid object动态设置网格宽度。new_width 为新宽度的像素值;
shrink(true或false)作用同shrinkToFit。若不设置,则使用shrinkToFit设置。setLabelcolname,
data,
class,
propertiesjqGrid object设置指定列标题文字、属性和类:
colname 为列名,可以是从0开始的列索引;
data 为标题文字,为空则不修改;
class 若为字符串,则为类名,若为数组,则直接写入CSS;
properties 为标题文字的属性。setRowDatarowid,
data,
cssproptrue on success,
false otherwise更新rowid指定行的数据(使用数组)。
Data数组的格式为: {name1:value1,name2: value2…} 。name为colModel中描述的名称,value为新值。cssprop若为字符串,将使用addClass为行添加类;若为数组对象,则直接加入CSS中。将data设置为false的情况下,可设置属性和类名setSelectionrowid,
onselectrowjqGrid object选择或反选id = rowid指定的行。若onselectrow设置为true (缺省) 则触发onSelectRow事件,否则不触发。showColcolnamejqGrid object显示colname 指定的列。若colname为字符串,只显示指定的列,若colname为数组 [“name1”,”name2”] 则显示name1和name2列, name必须是colModel中的名称。宽度不变。trigger(“reloadGrid”)nonenone按当前设置重新加载网格。若datatype为xml或json,将从服务器重新请求数据。此方法适用于一个已建立的网格。注意不会改变表头,也就是说改变colModel将没有作用。你可用gridUnload,使用新colModel来重新加载。updateColumnsnonenone在拖拽表格时,同步网格宽度。用法:
var mygrid=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) { var retVal = "显示在原来编辑按钮的按个地方的代码"; return retVal; } } );
更多学习地址:
1、http://polaris.blog.51cto.com/1146394/260176/
2、http://blog.csdn.net/yangbobo1992/article/details/7929772
3、http://blog.csdn.net/yangbobo1992/article/category/1227409
4、http://blog.csdn.net/gengv/article/details/5758321
5、http://hi.baidu.com/baitly002/item/2a735e27ac5b7945469962bf
6、http://blog.csdn.net/seng3018/article/details/7756433
7、http://blog.csdn.net/gaofang2009/article/details/5845592
8、http://www.cnblogs.com/jes_shaw/archive/2011/01/18/1938742.html
9、http://www.coding123.net/article/20130704/jqGrid-predefined-formatter.aspx
10、http://mj4d.iteye.com/blog/1634857
11、http://hi.baidu.com/zhanglp/item/26a7f6fc5e39e855c9f33790
12、http://hi.baidu.com/feifan3211/item/c5831f44158761a5df2a9fc1
13、http://blog.csdn.net/yangbobo1992/article/details/7929772
14、http://www.2cto.com/kf/201111/109891.html
15、http://luocb1980.iteye.com/blog/1762997
16、http://blog.csdn.net/zhcj3672/article/details/6944955
- jqgrid用法
- 【JqGrid】jqGrid API之用法
- Jqgrid特殊用法
- Jqgrid特殊用法
- jqgrid一些特殊用法
- jqGrid的用法
- jqGrid API 及用法
- jqGrid API 及用法
- jqGrid API 及用法
- jqGrid API 及用法
- jqGrid API 及用法
- jqGrid API 及用法
- jqGrid API 及用法
- jqGrid分页显示用法
- 【JqGrid】JqGrid API 中文说明及用法
- Jqgrid中 checkBox的用法
- jqgrid colModel 中formatter的用法
- jqgrid使用:常用属性用法和含义
- Jmeter测试工具使用
- mysql基础知识
- CallAudioManager 是如何工作的
- 小程序之100推荐:901~1000
- 在Android Studio开发中遇到的一个waiting for debugger问题
- jqgrid用法
- ToolBar
- LeetCode 1. Two Sum
- 多任务学习-Multitask Learning
- 二叉树树的算法题目
- 基于Java代码实现支付充值的通用流程
- Oracle数据库查询上一篇下一篇
- 【TI BLE】主从机数据交互过程-蓝牙Notification方式
- 【国家集训队2010】小Z的袜子[莫队算法]