jquery - JQgrid にドロップダウンを動的に追加する

Question

JQGrid にドロップダウンを動的に追加したい。

例えば：-

以下のタイプのグリッドがあります。

ボタンをクリックすると、新しい行がグリッドに追加されます。新しい行の場合、最初の列のデータはドロップダウン、2 番目のハイパーリンク、3 番目のドロップダウン、4 番目のチェックボックスになります。

つまり、最初の行と同じでなければなりません。

ボタンをクリックするたびに、最初の行と同様に新しい行を追加する必要があります。

Answer 1

タイプ formatter='select' および type='select' の属性の場合、jQgrid はキーと値のペアのリストを内部的に維持します。

そのため、新しい行を挿入するときに、ドロップダウン ボックスの値として「ID」を指定する必要があります。

例えば ​​：

新しい行を挿入する場合:

  $("#listData").jqGrid('addRowData',index,{kpiParameter:1,product:'XYZ',metric:'1',perkSharing:'XYZ'});

ここで、「1」は KpiParameter の ID です。このソリューションを機能させるには、jQgrid を定義するときに、ドロップダウンのキーと値のペアのリスト全体をロードする必要があります。

以下のようにjqGridを書くことができます：

jQuery('#kpisetup').jqGrid({
            autowidth: true,
            autoheight: true,
            url : '',
            mtype : 'POST',
            colNames : [  'KPI ID','KPI Parameter', 'Product','Metric','Perk Sharing'],
            colModel : [ {name : 'kpi_id',index : 'kpi_id',autowidth: true,hidden:true,align:'center'},
                         {name : 'kpi_parameter',index : 'kpi_parameter',width:200,
                                                sortable:true,
                                                align:'center',
                                                editable:true,
                                                cellEdit:true,
                                                edittype: 'select', 
                                                formatter: 'select',
                                                editrules: { required: true},
                                                editoptions:{value: getKPIParameters()//LOAD ALL THE KPI PARAMETER KEY-VALUE PAIR}
                         },
                         {name : 'product',index : 'product',autowidth: true,formatter:'showlink',formatoptions:{baseLinkUrl:'#'},align:'center'},
                         {name : 'metric',index : 'metric',width:75,
                                                editable:true,
                                                edittype: "select",
                                                align:'center',
                                                formatter: 'select',
                                                editrules: { required: true},
                                                editoptions: {value: '1:select' //LOAD ALL THE METRIC VALUEs}
                         },
                         {name : 'perksharing',align:'left',index : 'perksharing',autowidth: true,editable:true,edittype: "checkbox",align:'center'}
                       ],
            rowNum : 10,
            sortname : 'kpi_parameter',
            viewrecords : true,
            gridview:true,
            pager : '#kpisetup_pager',
            sortorder : 'desc',
            caption : 'KPI Setup',
            datatype : 'json'
        });

これがうまくいくことを願っています。

ありがとう、グンジャン。