jQuery插件之【jqGrid】常用语法整理-【更新】

谁借莪１个温暖的怀抱￠ 2022-05-28 04:36 203阅读 0赞

# [jQuery插件之【jqGrid】常用语法整理-【更新】][jQuery_jqGrid_-] #

jqGrid常用语法整理，包含数据获取、常用函数、触发事件等

<table style="width:798px;"> 
 <tbody> 
 <tr> 
 <td colspan="2">jqGrid表格数据获取相关语法</td> 
 </tr> 
 <tr> 
 <td>获取表格所有数据</td> 
 <td>&nbsp;$("#grid").jqGrid("getRowData");</td> 
 </tr> 
 <tr> 
 <td>根据行id获取表格单行数据</td> 
 <td>&nbsp;$("#grid").jqGrid("getRowData", rowid);</td> 
 </tr> 
 <tr> 
 <td>获取选中单行记录</td> 
 <td>&nbsp;$("#grid").jqGrid("getGridParam", "selarow");</td> 
 </tr> 
 <tr> 
 <td>获取选中多行记录</td> 
 <td>&nbsp;$("#grid").jqGrid("getGridParam", "selarrrow");</td> 
 </tr> 
 <tr> 
 <td>获取行某单元格数据</td> 
 <td>&nbsp;$("#grid").getCell(rowid, columnName);</td> 
 </tr> 
 <tr> 
 <td>获取多行某单元格数组对象</td> 
 <td>&nbsp;$("#grid").geCol(columnName, returnTypeFlag, [mathoperation]);(mathoperation可选=sum,avg,count)</td> 
 </tr> 
 <tr> 
 <td>获取当前表格最大行号</td> 
 <td>&nbsp;$("#grid").jqGrid('getDataIDs');</td> 
 </tr> 
 <tr> 
 <td>设置表格单元格颜色</td> 
 <td>&nbsp;$($("#grid").find("tr")[columnIndex]).children(); -&gt;&nbsp;$(columnObj).css("background","#00EE00");</td> 
 </tr> 
 <tr> 
 <td>设置表格单行颜色</td> 
 <td>&nbsp;$($("#grid" "tr[id='"+ rowId +"']")).css("background", "");(无参表示无背景色，反之表示指定背景色)</td> 
 </tr> 
 <tr> 
 <td>表格追加行数据</td> 
 <td>&nbsp;$("#grid").jqGrid("addRowData", newRowId, dataJsonRow, ["first"]);</td> 
 </tr> 
 <tr> 
 <td>表格移除行数据</td> 
 <td>&nbsp;$($("#grid").find("tr[id='"+ gridRowId +"']")[rowIndex]).remove(); $("#grid").jqGrid("delRowData", rowId);</td> 
 </tr> 
 <tr> 
 <td>重新加载表格数据</td> 
 <td>&nbsp;$("#grid").jqGrid([..]).trigger("reloadGrid");</td> 
 </tr> 
 <tr> 
 <td>清空表格数据</td> 
 <td>&nbsp;$("#grid").jqGrid("clearGridData");</td> 
 </tr> 
 <tr> 
 <td>取消表格选中记录</td> 
 <td>&nbsp;$("#grid").jqGrid('resetSelection');</td> 
 </tr> 
 <tr> 
 <td>设置表格选中记录</td> 
 <td>&nbsp;$("#grid").jqGrid('setSelection', rowid);</td> 
 </tr> 
 <tr> 
 <td>加载子表格数据</td> 
 <td>&nbsp;$("#"+subgrid_table_id).jqGrid('navGrid',&nbsp; {……});</td> 
 </tr> 
 <tr> 
 <td>表格列字段显示/隐藏</td> 
 <td>&nbsp;$("#grid").hideCol("columnName");</td> 
 </tr> 
 <tr> 
 <td>动态给表格附加自定义属性[参数]</td> 
 <td>&nbsp;$("#grid").setGridParam({...});</td> 
 </tr> 
 <tr> 
 <td colspan="2">jqGrid表格数据触发事件</td> 
 </tr> 
 <tr> 
 <td>表格所有数据加载完成事件</td> 
 <td>&nbsp;gridComplete: function(){ }</td> 
 </tr> 
 <tr> 
 <td>远程数据返回完成事件</td> 
 <td>&nbsp;loadComplete: function(remoteDataJson){ }</td> 
 </tr> 
 <tr> 
 <td>表格渲染加载完成事件</td> 
 <td>&nbsp;gridCompleteExpansion: function( gridObject ){ }</td> 
 </tr> 
 <tr> 
 <td>表格单元格点击事件</td> 
 <td>&nbsp;onCellSelect: function( rowId, columnIndex, cellValue, event ){ }</td> 
 </tr> 
 <tr> 
 <td>表格选择行点击事件</td> 
 <td>&nbsp;onSelectRow: function(rowId, status){ }</td> 
 </tr> 
 <tr> 
 <td>表格全选行点击事件</td> 
 <td>&nbsp;onSelectAll: function(rowIds, status){ }</td> 
 </tr> 
 <tr> 
 <td>表格双击事件</td> 
 <td>&nbsp;ondblClickRow: function(rowId, rowIndex, colnumIndex, event){ }</td> 
 </tr> 
 <tr> 
 <td>子表格展开事件</td> 
 <td>&nbsp;subGridRowExpanded: function(subgrid_id, row_id){ }</td> 
 </tr> 
 <tr> 
 <td>子表格关闭事件</td> 
 <td>&nbsp;subGridRowColapsed: function(subgrid_id, row_id){ }</td> 
 </tr> 
 <tr> 
 <td>表格右键点击行事件</td> 
 <td>&nbsp;onRightClickRow: function(rowId, rowIndex, colnumIndex, event){ }</td> 
 </tr> 
 <tr> 
 <td>表格隐藏/显示点击事件</td> 
 <td>&nbsp;onHeaderClick: function(gridState){&nbsp; }; gridstate为表格状态，有visible和hidden两个值</td> 
 </tr> 
 <tr> 
 <td colspan="2">jqGrid表格其他函数</td> 
 </tr> 
 <tr> 
 <td>函数调用方式[新版本接口]</td> 
 <td>&nbsp;$("#grid").jqGrid('methodName', parameter1,...parameterN );&nbsp;</td> 
 </tr> 
 <tr> 
 <td>以JSON格式填充表格数据[远程]</td> 
 <td>&nbsp;$("#grid").jqGrid().addJSONData({json:json;……});</td> 
 </tr> 
 <tr> 
 <td>以JSON格式向表格追加数据[手动]</td> 
 <td>&nbsp;$("#grid").jqGrid().addRowData( newRowId, dataJsonRow, position["first"] , srcrowid); srcrowid表示偏移位置</td> 
 </tr> 
 <tr> 
 <td>以XML格式填充表格数据[远程]</td> 
 <td>&nbsp;$("#grid").jqGrid().addXmlData({json:json;……});</td> 
 </tr> 
 <tr> 
 <td>清空当前表格所有载入数据</td> 
 <td>&nbsp;$("#grid").jqGrid().clearGridData([clearfooter]); 如果clearfooter 参数为true，则清除网格最后一行数据</td> 
 </tr> 
 <tr> 
 <td>删除表格其中的行数据</td> 
 <td>&nbsp;$("#grid").jqGrid().delRowData(rowId);</td> 
 </tr> 
 <tr> 
 <td>获取/设置表格底部数据</td> 
 <td>&nbsp;$("#grid").jqGrid().footerData(action, data, format);&nbsp;</td> 
 </tr> 
 <tr> 
 <td>表格列动态隐藏/显示</td> 
 <td>&nbsp;$("#grid").jqGrid('hideCol'/'showCol', 'colnumName',&nbsp; );&nbsp;</td> 
 </tr> 
 <tr> 
 <td>表格取消选中/设置选中</td> 
 <td>&nbsp;$("#grid").jqGrid('resetSelection'/'setSelection('rowId', 'onSeletRowEvent')'); 缺省Event为true表示选中事件</td> 
 </tr> 
 <tr> 
 <td>拖拽表格时同步表格宽度</td> 
 <td>&nbsp;$("#grid").jqGrid('updateColumns') ;&nbsp;</td> 
 </tr> 
 <tr> 
 <td>调整列的显示顺序</td> 
 <td>&nbsp;$("#grid").jqGrid(). remapColumns('permutation', 'updateCellsFlag', 'keepHeaderFlag')</td> 
 </tr> 
 </tbody> 
</table>

[jQuery_jqGrid_-]: https://blog.csdn.net/u012411219/article/details/51315419