jqgrid - jqGridは特定の行のedittypeを動的に変更します

Question

私が手に入れたいと思う方法を見つけたこの投稿に続いて、私はそれでいくつかの問題に遭遇します。これが私のコードです：

var myDlg = $("#dlgpers"),lastsel;
myDlg.jqGrid({
    url:'pers.php?id='+dataRow.id,
    mtype:'GET',
    datatype: "json",
    ajaxGridOptions: { cache: false },
    height:250,
    cmTemplate: {sortable:false},
    gridview: true,
    cellEdit:true,
    scroll:false,
    colNames:['Id','Label','Information','Type','Data'],
    colModel:[ 
        {name:'id',index:'id',hidden:true,key:true},
        {name:'label',index:'label',align:'right',width:100,editable:false,
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"' ;
            }
        },
        {name:'info',index:'info',width:200,editable:true,edittype:'text'},
        {name:'type',index:'type',width:30,hidden:true},
        {name:'data',index:'data',width:30,hidden:true}
    ],
    loadComplete: function () {
        var rowIds = myDlg.jqGrid('getDataIDs');
        $.each(rowIds, function (i, row) {
            var rowData = myDlg.jqGrid('getRowData',row);
            if (rowData.type == 'select') {
                myDlg.jqGrid('restoreRow', row);
                var cm = myDlg.jqGrid('getColProp', 'info');
                cm.edittype = 'select';
                cm.editoptions = { value: rowData.data };
                myDlg.jqGrid('editRow', row);
                cm.edittype = 'text';
                cm.editoptions = null;
                cm.editable = true;
            }else{
                myDlg.jqGrid('restoreRow', row);
                var cm = myDlg.jqGrid('getColProp', 'info');
                cm.edittype = 'text';
                cm.editoptions = null;
                cm.editable = true;
                myDlg.jqGrid('editRow', row);
                cm.edittype = 'text';
                cm.editoptions = null;
                cm.editable = true;
            }
        });
    }
});

そして画像としての結果：

およびJSON応答：

{"page":1,"total":1,"records":1,"rows":[
{"cell":[0,"Nom ","LEBRUN","text",""]},
{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},
{"cell":[2,"Initiales ","LJ","text",""]},
{"cell":[3,"Fonction ","","text",""]},
{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},
{"cell":[5,"T\u00e9l\u00e9phone ","","text",""]},
{"cell":[6,"Email ","","text",""]},
{"cell":[7,"Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int"]},
{"cell":[8,"Entr\u00e9 le ","2008-10-06","text",""]},
{"cell":[9,"Sorti le ","0000-00-00","text",""]}]}

私があなたの知識に提出する2つの質問：

1. ご覧のとおり、2行目（プレノム）は編集可能ではないようですが、編集可能です。
2. これらの入力が表示される理由がわかりません。セルを編集した場合にのみ表示されるようにしたいからです。

私の間違った方法を解決する（そして説明する）ためのすべてのあなたの親切な助けに感謝します。JiheL

2013年3月29日更新

私はあなたの回答コードを適用しました、そしてそれはうまくいきます！どうもありがとう。しかし、私は別の主題のためにそのような方法で別のフォームを作成しました、そしてそれは私にいくつかの問題を引き起こします。

この新しいフォームのコードは次のとおりです。

        var showAbs=function(){
        $('#EditDialog').empty();
        var $table=$('<table></table>')
        .attr('id','dlgcong')
        .appendTo($('#EditDialog'));
        var myCong = $("#dlgcong");
        myCong.jqGrid({
            url:'xpabs.php?id='+id+'&y='+y,
            datatype: "json",
            height:"auto",
            cmTemplate: {sortable:false},
            gridview: true,
            colNames:['Type absence','Début','Fin','id'],
            colModel:[ 
                {name:'abs',index:'abs',width:155,editable:true,edittype:'select',
                    editoptions:{ 
                        dataUrl:"selabs.php", 
                    dataEvents: [
                            {
                                type: 'change',
                                fn: function(e) {
                                    $(this).parent().css('background-color','#'+$(this).find('option:selected').attr('colr'));
                                    if($(this).find('option:selected').attr('colr')=='ffffff'){
                                        $(this).parent().parent().find('input').datepicker('disable');
                                    }else{
                                        $(this).parent().parent().find('input').datepicker('enable');
                                        $(this).parent().parent().attr('changed',true);
                                    }
                                }
                            }
                        ]
                    },
                    cellattr: function (rowId, val, rawObject, cm, rdata) {
                        return ' style="background-color:#'+rawObject[4]+';color:white;"';
                    }
                },
                {name:'debut',index:'debut',align:'center',width:70,editable:true},
                {name:'fin',index:'fin',align:'center',width:70,editable:true},
                {name:'id',index:'id',hidden:true}
            ],
            jsonReader: {
                cell: "", 
                root: function (obj) { 
                    return obj; 
                } 
            },                  
            loadComplete: function (data) {
                var $self = $(this),
                        cm = $self.jqGrid("getColProp", "debut"),
                        idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
                        l = data.length,
                        i,
                        item;
                for (i = 0; i < l; i++) {
                    item = data[i];
                    cm.editoptions = {
                        dataInit: function(element) {
                            $(element).datepicker({
                                setDate:item[1],
                                minDate:'01/01/'+y,
                                maxDate:'31/12/'+y,
                                onSelect: function( selectedDate,inst ) {
                                    $(element).val(selectedDate );
                                    $(element).parent().parent().attr('changed',true);
                                }
                            })
                        }
                    }
                }
                var cm = $self.jqGrid("getColProp", "fin");
                for (i = 0; i < l; i++) {
                    item = data[i];
                    cm.editoptions = {
                        dataInit: function(element) {
                            $(element).datepicker({
                                setDate:item[2],
                                minDate:'01/01/'+y,
                                maxDate:'31/12/'+y,
                                onSelect: function( selectedDate,inst ) {
                                    $(element).val(selectedDate );
                                    $(element).parent().parent().attr('changed',true);
                                }
                            })
                        }
                    }
                    $self.jqGrid("editRow", idPrefix + item[3]);
                }
                myCong.find('select').each(function(){
                    $(this).css({
                        backgroundColor:'transparent',
                        color:'white',
                        border:0,
                        width:155
                    });
                });
            },
            idPrefix: "cong",
            rowNum: 10000   
        });
        //********************
        //  Button ' Valider '
        //********************
        $('<input />')
        .attr({
            type:'button',          
        })
        .css({
            float:'right',
            marginTop:'5px'
        })
        .click(function(){
            var toBeSaved='';
            myCong.find('tr[changed=true]').each(function(idx){
                if(toBeSaved.length>0){
                    toBeSaved+='|';
                }
                toBeSaved+=$(this).find('td:eq(3)').text()+';';
                toBeSaved+=$(this).find('select option:selected').val()+';';
                toBeSaved+=$(this).find('input:eq(0)').val()+';';
                toBeSaved+=$(this).find('input:eq(1)').val();
            });
            if(toBeSaved.length>0){
                $.ajax({
                    url:'majpabs.php?id='+id+'&data='+toBeSaved,
                    async:false,
                    dataType:'json',
                    success:function(data){
                        myGrid.trigger('reloadGrid');
                        $('#newAbs').val(' Nouveau ').attr('disabled',false);
                    }
                });
            }
        })
        .val(' Valider les absences ')
        .appendTo($('#EditDialog'));
        //*******************
        //  Button ' Retour '
        //*******************
        $('<input />')
        .attr({
            type:'button',
            id:'newAbs'
        })
        .css({
            float:'left',
            marginTop:'5px'
        })
        .click(function(){
            showPers();
        })
        .val(' Retour ')
        .appendTo($('#EditDialog'));
        //********************
        //  Button ' Nouveau '
        //********************
        $('<input />')
        .attr({
            type:'button',
            disabled:false
        })
        .css({
            float:'left',
            marginTop:'5px',
            marginLeft:'7px'
        })
        .click(function(){
            if($(this).val()==' Nouveau '){
                var myRow = {abs:"0", debut:'00/00/'+y, fin:'00/00/'+y, id:'0'};
                myCong.jqGrid('addRowData','',myRow, 'last');
                $(this).val(' Sauver ').attr('disabled',true);
            }else{
            }
        })
        .val(' Nouveau ')
        .appendTo($('#EditDialog'));
    }

そして画像としての結果：

1. ご覧のとおり、最初の行は他の行のようにselectとdatepickerを受け取りません。変 ！
2. 新しい行を追加すると、最初の行としてselectとdatepickerが表示されません。この方法を理解するのは間違っていると思います。

私はこれらの質問であなたを悩ませることを心配しています、私はこれらの点を正しくする方法を見つけるために成功せずにウィキを調べました。いくつかの事例を示す、より詳細なチュートリアルを見つけたいと思います。

jqGrid.JiheLをより効率的に使用する方法を教えてください。

2013年4月1日更新

私はオレグの提案を適用しました、そしてそれは今うまくいきます。しかし、問題は残っています。ここに画像があります：

最初の行の選択ボックスはOKです。最初の入力フィールドは日付ピッカーを受け取りますが、2番目の入力フィールド（「fin」と呼ばれる列）は受け取りません！他のすべての行は適切な日付ピッカーを受け取りますが、最初の行の最後のフィールドは受け取りません。コードは次のとおりです。

                loadComplete: function (data) {
                var $self = $(this),
                        idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
                        l = data.length,
                        i,
                        item,
                        cm;
                for (i = 0; i < l; i++) {
                    item = data[i];
                    cm = $self.jqGrid("getColProp", "debut");
                    cm.editoptions = {
                        dataInit: function(element) {
                            //alert('deb'+i);
                            $(element).datepicker({
                                setDate:item[1],
                                minDate:'01/01/'+y,
                                maxDate:'31/12/'+y,
                                onSelect: function( selectedDate,inst ) {
                                    $(element).val(selectedDate );
                                    $(element).parent().parent().attr('changed',true);
                                }
                            })
                        }
                    };
                    $self.jqGrid("editRow", idPrefix + item[3]);
                    //
                    cm = $self.jqGrid("getColProp", "fin");
                    cm.editoptions = {
                        dataInit: function(element) {
                            //alert('fin'+i);
                            $(element).datepicker({
                                setDate:item[2],
                                minDate:'01/01/'+y,
                                maxDate:'31/12/'+y,
                                onSelect: function( selectedDate,inst ) {
                                    $(element).val(selectedDate );
                                    $(element).parent().parent().attr('changed',true);
                                }
                            })
                        }
                    };
                    $self.jqGrid("editRow", idPrefix + item[3]);
                }
                myCong.find('select').each(function(){
                    $(this).css({
                        backgroundColor:'transparent',
                        color:'white',
                        border:0,
                        width:155
                    });
                });
            },

もう一度、この問題を解決してこのリクエストを閉じるのを手伝っていただければ幸いです。初心者を助けるためにあなたが費やすすべての時間をありがとう。JiheL

Answer 1

私はあなたのコードの問題から多くが一般的だと思います。だから私はあなたの質問にもっと詳細に答えようとしました。

まず、間違ったJSONデータを投稿しました。この線

{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},

2つのエラーが含まれています：

1. 「セル」の後に「：」はありません
2. "後はありません"Service

変更後、行はそうなります

{"cell":[4,"Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},

そしてJSONデータを読み取ることができます。次の問題は、1つの配列で文字列と一緒に数値を使用することです。jqGridコードの行のバグのため

idr = ccur !== undefined ? ccur[idn] || idr : idr;

idsを整数値0にすることはできませんでした。エラーに関するバグレポートを投稿しました。jqGridの既存のコードを使用して問題を修正するには、数値の代わりに文字列を使用する必要があります。たとえば、行

{"cell":[0,"Nom ","LEBRUN","text",""]},

に変更する必要があります

{"cell":["0","Nom ","LEBRUN","text",""]},

変更を加えないと、IDが重複します。最初の行（{"cell":[0,"Nom ","LEBRUN","text",""]}と{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},）は両方とも、0と1ではなく1に等しい同じIDを取得します。これがあなたが説明した問題の主な理由でした。

さらに、次のことをお勧めします。

• cellEdit:trueオプションを削除します。コードの後半で使用editRowします。これは、セル編集の代わりにインライン編集を使用することを意味します。つまり、。1つのグリッドで両方の編集モードを組み合わせることはできません。cellEdit:true
• height:250オプションをに置き換えますheight:"auto"
• indexからすべてのプロパティを削除しますcolModel。colModelデフォルト値（edittype:'text'、editable:false）でのすべてのプロパティを削除します
• mtype:'GET'デフォルト値（ 、scroll:false）でjqGridのオプションを削除します
• JavaScriptの関数のすべてのパラメーターはオプションです。したがって、たとえばコールバックのパラメータを使用しない場合は、次のようにcellattr置き換えることができますcellattr: function (rowId, val, rawObject, cm, rdata) {...}。cellattr: function () {...}
• コールバックには、サーバーから返されたすべてのデータを提供できるloadComplete1つのパラメーターがあります。したがって、とdataを使用する必要はありません。アレイは直接使用できます。getDataIDsgetRowDatadata.rows
• dataコールバックのパラメータを使用すると、グリッドからloadComplete不要な列を削除できます'type'。'data'
• id後に関する情報を配置すると、のプロパティを'Label','Information'使用して、グリッドから非表示の列を削除することもできます。たとえば、配列の最後として移動する場合は、グリッドから非表示の列を使用して削除できます。にプロパティを追加すると、入力データから削除できます。関数として定義されたプロパティを使用する場合（ドキュメントを参照）、サーバーの応答から不要なデータを削除できます。idjsonReaderididcelljsonReader: {id: 4}idcell: ""jsonReader"cell":rootjsonReader

たとえば、サーバーは簡略化されたデータを生成できます

[
["Nom ","LEBRUN","text","","0"],
["Pr\u00e9nom ","Jacques","text","","1"],
["Initiales ","LJ","text","","2"],
["Fonction ","","text","","3"],
["Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests","4"],
["T\u00e9l\u00e9phone ","","text","","5"],
["Email ","","text","","6"],
["Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int","7"],
["Entr\u00e9 le ","2008-10-06","text","","8"],
["Sorti le ","0000-00-00","text","","9"]
]

対応するjqGridは次のようになります

$("#dlgpers").jqGrid({
    url: "pers.php?id=" + dataRow.id,
    datatype: "json",
    height: "auto",
    cmTemplate: {sortable: false},
    gridview: true,
    colNames: ["Label", "Information"],
    colModel: [
        {name: "label", align: "right", width: 100,
            cellattr: function () {
                return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"';
            }},
        {name: "info", width: 200, editable: true}
    ],
    jsonReader: {id: 4, cell: "", root: function (obj) { return obj; } },
    loadComplete: function (data) {
        var $self = $(this),
            cm = $self.jqGrid("getColProp", "info"),
            idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
            l = data.length,
            i,
            item;

        for (i = 0; i < l; i++) {
            item = data[i];
            cm.edittype = item[2] === "select" ? "select" : "text";
            cm.editoptions = { value: item[3] };
            $self.jqGrid("editRow", idPrefix + item[4]);
        }
    },
    idPrefix: "dlg",
    rowNum: 10000 // to have no paging
});

デモを見る：