jqGrid 使用及二次封装经验

简介:

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" },   
          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);