jqGridの一般的なプロパティとメソッド

JQgridプラグイン：

jqueryグリッドは、XMLおよびAjaxグリッドプラグインに基づくリッチクライアント側のjQueryライブラリです。jqGridViewは、ネットワーク上のテーブルデータを表現および編集するための専門的なソリューションを提供します。強力なスクリプトAPIを備えた適切に設計されたこの編集可能なグリッドは、DHTMLとXMLの非常にシンプルな構成であり、説得力のある結果と大量のデータを示します。これで、jqueryグリッドの使用法と一般的に使用されるいくつかのオプション設定に慣れました。

まず、jqGridの機能：

jquery UIテーマに基づいて、開発者は顧客の要件に応じてさまざまなテーマを変更できます。
すべての一般的なWebブラウザーと互換性があります。
Ajaxページネーションは、各ページに表示されるレコードの数を制御できます。
XML、JSON、および配列の形式でデータソースをサポートします。
豊富なオプション構成とメソッドイベントインターフェイスを提供します。
テーブルの並べ替えのサポート、列のドラッグのサポート、列の非表示。
ローリングデータの読み込みをサポートします。
データコンテンツのリアルタイム編集と保存をサポートします。
サブフォームとツリーフォームをサポートします。
複数の言語をサポートします。
キーは現在無料です。

次に、jqGridのプロパティ設定：

コード：

$(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. jqGridの一般的なメソッド：

1.グリッドを呼び出す

jqGridはすでにサーバーからデータを取得して、グリッドテーブルに表示できます。グリッドテーブルとそのデータの操作方法について説明します。jqGridには、データを操作したり、グリッドテーブル自体を操作したりするための多くのメソッドと関数があります。jqGridを呼び出す方法は2つあります。

$（ "＃grid_id"）。jqGridMethod（parameter1、.....、parameterN）;

または

$（ "＃grid_id"）。jqGrid（function（）{}、paramter1、..... parameterN）;

1. getGridParam

コード：

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

私信关注

jqGridの一般的なプロパティとメソッド

おすすめ