Common properties and methods of jqGrid

JQgrid plugin:

jquery grid is a rich client-side, jQuery library based on XML and Ajax grid plugin. jqGridView provides professional solutions to represent and edit table data on the network. Well-designed, with a powerful scripting API, this editable grid is a very simple configuration of DHTML and XML, and shows convincing results and large amounts of data. Now I am familiar with the usage of jquery grid and some commonly used option settings.

First, jqGrid features:

Based on the jquery UI theme, developers can change different themes according to customer requirements.
Compatible with all popular web browsers.
Ajax pagination can control the number of records displayed on each page.
Supports data sources in the form of XML, JSON, and arrays.
Provide rich option configuration and method event interface.
Support table sorting, support dragging columns, hiding columns.
Support rolling data loading .
Support real-time editing and saving data content.
Supports sub-forms and tree forms .
Support multiple languages.
The key is currently free.

Second, the property settings of jqGrid:

Code:

$(document).ready(function(){
       $(“#id_name”).jqGrid({
        //key:value,形式配置属性类似于Ajax
        url: "jqGrid01.action"，//地址值，数据来源的地址值，可以是个xml文件也可以是Json
        datatype: "json" ,//  数据类型xml，json。
        mtype: "POST" ,//请求方式“POST”或者“GET“
        multiselect:true,    //多选按钮       
        multiselectWidth:20,    //多选列宽度     
        height:"auto",   //表格高度自动        
        autowidth:true,   //宽度自动 也可在colModel设置每列宽度        
        colNames:["Id","姓名","年龄","身高","爱好"],//列的表头      
         colModel:[   //每一列的具体属性            
             {name:"id",index:"id",align:"center",hidden:false},              
             {name:"name",index:"name",align:"center",hidden:false},         
             {name:"age",index:"age",align:"center",hidden:false},           
             {name:"sg",index:"sg",align:"center",hidden:false},          
             {name:"love",index:"love",align:"center",hidden:false}             
           ],        
         viewrecords:true,   //是否显示总记录数     
         rowNum:5,           //每页记录数       
         rowList:[5,10,15],   // 每页记录数可选项      
         pager:"#gridPager",   //分页设置       
         sortable:true,        //是否可排序    
         sortname:"id",        //排序列名，这个参数会被传到后台     
         sortorder:"asc",      //排序顺序asc升序desc降序
         altRows: true,         // 设置为交替行表格，默认为false      
         rownumber:true,       //序号列是否显示（不显示名称QWQ）     
         rownumWidth:50,       //序号列宽度
         viewrecords: true,    //是否在浏览器导航栏显示记录总数      
         gridview:true,            //构造一行数据后添加到grid中     
         loadComplete:function(){                  
           var  t=this;               
           setTimeout(function(){         
            updatePageIcons(t);            
             },0);            
            }   
       });
});

3. Common methods of jqGrid:

1. Call grid

jqGrid can already get data from the server and display it in the grid table. Let me talk about how to operate the Grid table and its data. jqGrid has many methods and functions for manipulating data or manipulating the grid table itself . There are two ways to call jqGrid:

$("#grid_id").jqGridMethod(parameter1,.....,parameterN);

$("#grid_id").jqGrid(function(){},paramter1,.....parameterN);

1. getGridParam

Code:

var id = $("#id_name").jqGrid("getGridParam","selrow");

代码表示：获取的是选中的行的id值，selrow是jqGrid选项之一，默认值是null。

2. getRowData

代码：

var selectedId = $("# id_name ").jqGrid("getGridParam", "selrow");

var rowdate = $("#id_name").jqGrid("getRowData",selectId);

代码表示：获取某行的数据，返回的是一个name：value的数组

3. addRowData

这个方法用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：

rowid ：新行的id号；

data ：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；

position ：插入的位置（ first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后 ）；

srcrowid ：新行将插入到srcrowid指定行的前面或后面。

代码：

$("#id_name").jqGrid("addRowData"，rowid，data，"before"，selectId);

4. setRowData

这个方法用于 为某行数据设置数据值 。执行成功返回true，否则返回false。它具有3个参数：

rowid ：更新数据的行id；

data ：更新的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的 列名称name ；这个数据对象，不必设置完全，需要更新哪列，就设置哪列的 name:value对 ；

cssprop ：如果cssprop为String类型，则会使用jQuery的addClass为行增加相应名称的 css类；如果为object类型，则会使用html的css属性，为行添加样式。如果只想增加css样式而不更新数据，可以将data参数设为false。

代码：

$("#id_name").jqGrid("setRowData"，rowid，data，cssprop);

5. delRowData

代码：

$("#id_name").jqGrid("delRowData"，rowid);

代码表示：删除某行数据

6. setGridParam

这个方法与getGridParam对应，用于设置jqGrid的options选项。

返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象（name来自jqGrid的options选项名）。某些选项在设置之后需要trigger("reloadGrid")，才能显示出效果。

7. setGridWidth

为Grid动态地设定一个新的宽度。两个参数：

new_width ：以px为单位的新宽度值；

shrink ：作用与jqGrid的shrinkToFit选项相同；如果此参数未设置，则沿用jqGrid的shrinkToFit选项的值。

8. trigger("reloadGrid")

根据当前设置， 重新载入Grid表格 ，即意味着向 Server发送一个新的请求 。此方法只能用于已经构建好的Grid。此外，此方法 不会使对colModel所做出的改变生效 。应该使用gridUnload来重新载入对colModel的新设置。

9. 其他方法

除了以上介绍的的方法外，jqGrid还有其他有用的方法，例如：

addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等

以及增强模块提供的方法，例如：

filterGrid、GridDestroy、GridUnload、setColProp等。

这些方法的具体用法，或浅显易懂，或不是非常常用。

参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ）

浮云浮影

发布了26 篇原创文章 · 获赞 0 · 访问量 9934

私信关注

Common properties and methods of jqGrid

Guess you like