jqGridが使ったこと

jqGridは私の仕事の中で接触したフロントエンドのjQueryに基づく表のプラグインで、アプリケーションの中で出会ったいくつかの問題を記録して、自分の記憶の復習に便利にしたいと思っています.
jqGridは、編集したセルにイベントをバインドします.

onCellSelect : function (rowid, iCol, cellcontent, event) {
            var columnName = $(grid_selector).jqGrid("getGridParam","colNames")[iCol];
            setTimeout(function(){
                //         （       ）
                $("#"+ rowid + "_" + columnName).on("keyup", function(){
                    var inputValue = $(this).val();
                    if(inputValue.length==1){
                        $(this).val(inputValue.replace(/[^1-9]/g,''));
                    }else{
                        $(this).val(inputValue.replace(/\D/g,''));
                    }
                });
                //           
                $("#"+ rowid + "_" + columnName).on("blur", function(){
                    saveLastEditCellData();
                });
            },100);
        }

jqGridページ削除機能
jqGridの内部にはいくつかのページング機能が提供されていますが、ページングを必要としない場合があります.では、どのようにページング機能を削除しますか?

まずHTMLページからページング欄のタグ

を削除する.

そしてjqGridからいくつかの属性

を削除する

rowList:[10,20,30]

//  ：rowNum      -1,           

最後のバックグラウンドは、すべてのデータ

を返すようにクエリーします.
iRowによるrowIdの取得
iRowはローのインデックス順序を指し、rowIdはローごとに一意のIDです.途中から何行か削除しても、削除行の後ろのrowidは変わりませんが、iRowは変わりました.
行番号(iRow)に基づいてその行に対応する識別子(rowId)を取得する

//        
var rowId =  $(grid_selector).rows[iRow].id;

//           
var rowId = $(grid_selector).find("tr:eq(iRow)").attr("id");

rowIdによるiRowの取得

var iRow = $('#' + rowId)[0].rowIndex;

jqGridの行データ移動操作
原理:

まず移動する行データを取得し、

に保存する.

移動する行データをテーブルから

削除する.

保存したデータをテーブルに再挿入する

var Rid=$("#grid-table").find("tr:eq(iRow)").attr("id");
var rowData = jQuery("#grid-table").jqGrid("getRowData",id);
jQuery("#grid-table").jqGrid("delRowData",id);
jQuery("#grid-table").jqGrid("addRowData",id, rowData, "before",Rid);

jqGrid行ドラッグ機能

$(grid_selector).jqGrid('sortableRows', {  
    items : '.jqgrow:not(.unsortable)' 
});

カラム名および対応するcolModelの変更

$("#grid-table").jqGrid( 'setLabel',   ,       , 'labelstyle' );

$("#grid-table").setColProp(col_Name, { name :      , index :       });

//        
$("#grid-table").jqGrid( 'setLabel', 'rn', "  ", 'labelstyle' );

jqGridの設定はcheckboxをクリックした場合のみ現在の行を選択します
jqgridを使用する場合はmultiselect:trueを設定し、複数選択をサポートします.gridのいずれかのtdをクリックすると、現在の行が選択されます.checkboxのみをクリックしたい場合は、現在の行を選択します.beforeSelectRow関数を書き換えればいいです.

beforeSelectRow: function (rowid, e) {  
   var $myGrid = $(this),  
       i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),  
       cm = $myGrid.jqGrid('getGridParam', 'colModel');  
   return (cm[i].name === 'cb');  

}

よく使われる方法

選択行を設定しますが、onSelectRowのイベントをトリガーせず、3番目のパラメータをfalse

に設定します.

$("#grid_selector").jqGrid('setSelection',selectedId,false);

は、選択行をリセットすることによってこの問題を解決するが、この方法は、前の方法

よりも使いやすい.

$("#grid_selector").jqGrid('resetSelection');

getGridParamメソッド
getGridParam("url"):現在のAJAXのURLを取得
getGridParam(「sortname」):ソートされたフィールド
getGridParam(「sortorder」):ソートの順序
getGridParam("selrow"):選択した行のIDを取得
getGridParam("page"):現在のページ数
getGridParam(「rowNum」):現在のロー数
getGridParam(「datatype」):現在のdatatypeを取得
getGridParam("records"):合計レコード数を取得
getGridParam(「selarrow」):複数選択可能な場合は、選択した行のIDを返します.

var ids = $("grid_selector").jqGrid('getGridParam','selarrrow');
//      
$("grid_selector").getRowData()

//       
$("grid_selector").jqGrid('getRowData',1)

//  grid,       （               ）
$("grid_selector").getLocalRow(1);

setGridParamメソッド:
setGridParam({url:newvalue}):trigger(「reloadGrid」)と組み合わせて使用できるgridのajax urlを設定できます.
setGridParam({sortname:newvalue}):ソートのフィールドを設定
setGridParam({sortorder:newvalue}):ソートの順序asc or descを設定
setGridParam({page:newvalue}):設定を何ページ目に繰り返すか
setGridParam({rowNum:newvalue}):現在の各ページに表示される行数を設定します.
setGridParam({datatype:newvalue}):新しいdatatype(xml,json)の設定

jQuery('#tableID').jqGrid('getGridParam','url'))
jQuery("#tableID").jqGrid('setGridParam',{page:2}).trigger("reloadGrid")