简介: JqGrid是一款功能强大的表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能. 基础平台在此基础上对其进行了进一步的封装及扩展.使得其更简单.更好用. 维基文档地址 常见属性设置 属性名称 | 属性说明 | 是否必须 | 默认值 | datasource | 数据源地址 | 是 | | pager | 是否分页,如果设置成true,将创建分页框 | 否 | true | custom_pager | 如果设置成true,将创建自定义分页框.注意,如果page的值未设置,将不会起到作用 | 否 | false | rownumbers | 是否显示序列号 | 否 | true | colNames | 列标题说明,数组 | 是 | | colModel | 字段模型说明,object对象,name(绑定字段),sortable(是否排序字段),actions(操作列,数组),action_icons(图标列,数组) | 是 | | autowidth | 自动填充宽度 | 否 | true | altrow | 是否显示斑马条纹 | 否 | true | jsonReader | 数据源的补充说明(id,根元素) 有统一的格式,一般只要配置id就可以 | 是 | | tbar | 工具栏说明,数组,扩展属性(可配置图标,按钮说明及事件,新增,修改,删除,导入,导出按钮有默认的标准图标 | 否 | | rowNum | 每页行数 | 否 | 10 | multiselect | 是否多选 | 否 | true | caption | 标题 | 否 | | height | 高度 | 否 | auto | grouping | 是否分组 | 否 | false | groupingView | 分组具体配置(详见示例) 对象 包括 groupField(分组字段),groupOrder(排序方向),gridCollapse(是否收缩) | 否 | | 控件事件 控件名称 | 事件说明 | 是否必须 | 默认值 | onSelectRow | 单击一行时发生的事件 | | null | ondbClickRow | 双击一行时发生的事件(方法) | 否 | null | 常见问题 - 如何获取grid选中的行的ID?
var rowid = $( "#searchResultList" ).getGridParam( "selrow" );
- 如何在表格中动态增加一行数据?
//$("#jqgrid").addRowData(rowId, data, pos, idx);
//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID
$( "#jqgrid" ).addRowData( "1" , { "name" : "test" , "age" :12}, "first" );
- 如何动态修改某行的数据内容,如某几列的值?
//setRowData( rowid, data );
$( "#jqgrid" ).setRowData( "1" , { tax: "5" , total: "205" });
- jqgrid的常用属性?
$( "#jqgrid" ).jqGrid({
url: "${ctx}/sys/role/search.dm" ,
colNames:[ "角色名称" ], //,"角色代码"
colModel:[ "roleName" ], //"roleCode"还可以用对象替换
jsonReader:{id: "roleId" ,root: "dataList" },
width:240,
height:250,
rowNum:20, //每页20条记录
pager: "logListPager" , //分页显示的DIVID
sortname: "actionTime" , //默认排序的列名
sortorder: "desc" , //默认排序的顺序
scroll: true , //鼠标滚动翻页
onSelectRow: function (rowid) {}
});
- 获取某一行的数据对象?
var rowid = $( "#searchResultList" ).getGridParam( "selrow" );
var rowData = $( "#searchResultList" ).getRowData(rowid);
- 如何使用API动态修改选中的行?
//true:重新加载表格数据, false:不重新加载表格数据
$( "#jqGrid" ).setSelection( "1" , true );
- 如何获取某一列的值
var col= jQuery("#jqGrid ").jqGrid('getCol',4,false);//获取第4列的值
var col= jQuery("#jqGrid ").jqGrid('getCol','name',false);//获取列名为name的列的值
- 如何删除一行或多行
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
$("#gridTable").jqGrid('delRowData', selectedId);
- 一些常用的API
$( "#jqgrid" ).resetSelection();
$( "#jqgrid" ).clearGridData();
$( "#jqgrid" ).setCell(rowid,colname,nData,cssp,attrp);
|