【jqGrid】beforeSelectRowを使って行を選択不可にする方法

beforeSelectRowアクションでreturn falseをすると行選択自体ができなくなります。行選択実行直前に、選択を強制的に中止するイメージです。

beforeSelectRow: function(rowid, e){
        return false;
}

具体的にどう設定するのかを説明します。

こんなグリッドがあったとします。
構造としてはシンプルで、十種類のポケモンの番号、名前、タイプ１、タイプ２を表示するものです。

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/plugins/css/ui.multiselect.min.css"/>

<body>

<table id="my-grid"></table>

</body>

<script>

// 列ごとの詳細設定
var colModelSettings= [	
    {name:"no", width:100, align:"center", sortable:true},
    {name:"name", width:120, align:"center", sortable:true},
    {name:"type1", width:120, align:"center", sortable:true},
    {name:"type2", width:120, align:"center", sortable:true}
];

// 列の表示名
var colNames = ["No","名前","タイプ1","タイプ2"];

// Gridに挿入するデータ
var data = [
    {no:1,name:"フシギダネ",type1:"くさ",type2:"どく"},
    {no:2,name:"フシギソウ",type1:"くさ",type2:"どく"},
    {no:3,name:"フシギバナ",type1:"くさ",type2:"どく"},
    {no:4,name:"ヒトカゲ",type1:"ほのお",type2:""},
    {no:5,name:"リザード",type1:"ほのお",type2:""},
    {no:6,name:"リザードン",type1:"ほのお",type2:"ひこう"},
    {no:7,name:"ゼニガメ",type1:"みず",type2:""},
    {no:8,name:"カメール",type1:"みず",type2:""},
    {no:9,name:"カメックス",type1:"みず",type2:""},
    {no:10,name:"キャタピー",type1:"むし",type2:""}
];

$(function(){
    $("#my-grid").jqGrid({
    // データ
    data:data,
    // データの種類
    datatype : "local",
    // 列ヘッダー名(配列)
    colNames : colNames,
    // 列の各種設定(オブジェクト配列)
    colModel : colModelSettings,
    // 行選択を無効にする
    beforeSelectRow: function(rowid, e){
        return false;
    }
    });
});

</script>
    
</html>

jqGridのオプションとしてbeforeSelectRowアクションをこのように設定します。

beforeSelectRowは行が選択される直前に呼び出されるアクションで、第1引数に行IDが、第2引数にイベントオブジェクトが入ってきます。

これをうまく活用すれば、指定した行だけ選択不可、なんてことも可能になります。以下はキャタピーの行だけ選択できないようにした例です。

beforeSelectRow: function(rowid, e){
    
    //{no: "10", name: "キャタピー", type1: "むし", type2: ""}
    var rowObj = $(this).getRowData(rowid);

    // キャタピーの行だけ選択不可
    if(rowObj.name === "キャタピー"){
        return false;
    }
}

jqGridのオプションを詳しく知りたい方は、よかったらこちらもどうぞ。