jqGrid简单介绍-飞外

 script src='/Scripts/js/jquery-2.0.3.min.js'  /script  script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js'  /script  script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js'  /script 

但是经过实际验证,这种方式不可行,当选中行,再点击同一行会出现获取不到行号的情况。

最后先在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  每页显示行数 /param  /// param  当前页 /param  /// param  结果总记录数 /param  /// param  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  每页显示数 /param  /// param  结果总记录数 /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、属性


object对ajax的select参数进行全局设置,设置editoptions跟searchoptions 参数的select属性值
String用于表格行交替变色的class属性。你可以定义自己的class来替代默认值。只有当altRows属性设置为true时,该属性才起作用ui-priority-secondary是,但需要重新加载
boolean如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidthfalse
integer定义了单元格padding + border 宽度。通常不必修改此值。初始值为5,paddingLef?2+paddingRight?2+borderLeft?1=5
array对显示列属性的设置,是一个数组对象。常用到的属性:name列显示的名称;index传到服务器端用来排序用的列名称;width列宽度;align对齐方式;sortable是否可以排序
string从服务器端返回的数据类型,(表格期望接收的数据类型)。可选类型:xml,xmlstring,json,local,function
boolean当为ture时,调整列宽度不会改变表格的宽度。当shrinkToFit 为false时,此属性会被忽略false
boolean构造一行数据后添加到grid中,如果设为true则是将整个表格的数据都构造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用false
boolean当为ture时,表格不会被显示,只显示表格的标题。只有当点击显示表格的那个按钮时才会去初始化表格数据。只有当caption 属性不为空而且hidegrid为ture时才起作用false
boolean如果为ture则数据只从服务器端抓取一次,之后所有操作都是在客户端执行,翻页功能会被禁用false
string当执行ajax请求时要干什么。disable禁用ajax执行提示;enable默认,当执行ajax请求时的提示;block启用Loading提示,但是阻止其他操作enable
string只有在multiselect设置为ture时起作用,定义使用那个key来做多选。shiftKey,altKey,ctrlKey
boolean只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用,false
mixed指定分页栏对象,必须为一个有效的html元素。可以是'pager', '#pager', jQuery('#pager').推荐用'#pager'
arrayDefault valuesprmNames: {page: page ,rows: rows , sort: sidx ,order: sord , search: _search , nd: nd , npage:null} 当参数为null时不会被发到服务器端
integer只读属性,定义了grid中确切的行数。通常情况下与records属性相同,但有一种情况例外,假如rowNum=15,但是从服务器端返回的记录数是20,那么records值是20,但reccount值仍然为15,而且表格中也只显示15条记录。
string显示记录数信息。{0} 为记录数开始,{1}为记录数结束。 viewrecords为ture时才能起效,且总记录数大于0时才会显示此信息
array[]一个数组用来调整表格显示的记录数,此参数值会替代rowNum参数值传给服务器端。如果为空则不显示,设置格式:[10,20,30]。
integer设置表格中显示的记录数,参数会被自动传到后台。如果此参数设为10,但是从服务器端返回15条记录,那么在表格中只会显示10条记录。如果设为-1则禁用此检查
boolean or integer创建一个动态滚动的表格,当为true时,翻页栏被禁用,使用垂直滚动条加载数据,且在首次访问服务器端时将加载所有数据到客户端。当此参数为数字时,表格只控制可见的几行,所有数据都在这几行中加载false
boolean此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
array表 格的工具栏。数组中有两个值,页码不同的新页码并回车时。
rowid,
iRow,
iCol,
e此事件发生在右击行后。(此事件在Opera浏览器中无效)
rowid为行ID;iRow为行索引(勿与rowid混淆)
iCol为列索引;
e为事件对象
aRowids,
status此事件发生在点击标题的复选框时发生(multiselect为true)
aRowids选定行ID的数组(哪些行的复选框与头复选框相同)
status头复选框的选定的布尔值,true为选中,false为
rowid,
status此事件发生在行点击后
rowid为行ID;
status 为选择状态。当multiselect为true时使用,当行被选中时返回true;为选中时返回false。
index,
iCol,
sortorder此事件发生在列排序被点击之后,数据排序前
index为colModel 中定义的索引名iCol为列的索引号
sortorder为新的排序方式,asc或desc
event, index此事件发生在列被重新定义宽度时。event为事件对象;index为在colModel 中定义的列索引。
newwidth, index此事件发生在列被重新定义宽度后。
newwidth为新的列宽度;index为在colModel 中定义的列索引。
postData通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据(如JSON字符串、XML字符串)要发给服务器时,可使用该事件。


用传递的data(数组)填充网格。用法:假如我们从web服务器获得的数据(jsonresponse),则
var mygrid = jQuery( # +grid_id)[0];
var myjsongrid = eval( ( +jsonresponse.responseText+ ) );
mygrid.addJSONData(myjsongrid);
myjsongrid = null;
jsonresponse =null;
将填充网格。当然,myjsongrid中的数据在传递到addJSONData之前可以被操作。
rowid,
data,
position,
srcrowidtrue on success,
false otherwise插入一新行,rowid为新行的ID,data(数组)为新行数据,position为新行插入的位置(first为表头,last为表尾,srcrowid指定偏移位置)。Data数组的格式为:{name1:value1,name2: value2 } ,name为colModel指定的名称。
用传入的data填充网格。用法:假如我们从web服务器获得数据
(xmlresponse),则 var mygrid = jQuery( # +grid_id)[0];
mygrid.addXmlData(xmlresponse.responseXML);
将填充网格。当然,xmlresponse中的数据在传递到addXmlData之前可以被操作。
jqGrid object清除网格中当前装入的数据,如果clearfooter 参数为true,则清除网格最后一行数据。
true on success,
false otherwise删除id = rowid的行。但不会删除服务器上的数据。
jqGrid object此方法获得或设置网格底部数据。
action 可设置为get(缺省)或set。 Get从底部返回name:value对象(name为colModel中的名称)。此时其他两个参数无效。
Set将data数组(对象)设置到底部。Data为colName中的名称和值对。
format 缺省为true,表示设置时使用formatter (如果colModel中已定义)。false表示不使用formatter
cell content返回id = rowid行,column = iCol列的内容。 iCol可以是列的索引或colName中定义的名称。在编辑行或列时不能使用该方法,此时返回的不是当前值,而是原始值。
array[] 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。若此参数进行了有效设置,则返回计算后的值,若无效,则返回空数组。
mixed当rowcontent 设置为false(缺省)时,返回id= rowid行的索引值。若rowcontent设置为true,则返回整行。若为找到rowid则返回false。
row objectReturn the row data from the local array stored in data parameter when the datatype is local
array{}返回id = rowid行的数据数组。格式为name:value对,name为colModel中的名称,value为该行的值。未找到返回空数组。在行或列编辑时此方法不可用,此时返回的不是当前值,而是原始值。
若rowid为设置,则返回网格中所有数据数组。
jqGrid object根据colname或colnames数组给定的列名隐藏相应的列,列名必须是colModel中定义的名称。表格的宽度不会改变。
调整列的显示顺序。permutation指定调整后的顺序,如 [1,0,2] 表示面缩放摆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: '', 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; } );