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);