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",""]}]}

我提交给您的两个问题:

1. 如您所见,第二行(Prénom)似乎不可编辑,但确实如此.
2. 我不明白为什么这些输入是可见的,因为我希望它们只在我编辑某个单元格时出现.

非常感谢您帮助解决(并解释)我错误的方式.JiheL

更新2013-03-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-04-01

我已经应用了Oleg的建议,现在可以使用了.但问题仍然存在.这是图像:

对于第一行,选择框即可.第一个输入字段接收datepicker,但第二个(名为'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"]},

包含两个错误:

1. "细胞"之后没有':'
2. 无"后"Service

更改后,行将是如此

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

和JSON数据可以读取.下一个问题是在一个数组中使用数字和字符串.因为jqGrid代码行中的bug

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",""]},)将获得相同的id等于1而不是0和1. 这是您描述的问题的主要原因.

此外,我会建议你以下:

• 删除cellEdit:true选项.您editRow稍后在代码中使用.这意味着,您使用内联编辑,而不是单元格编辑,这意味着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 () {...}
• 回调loadComplete有一个参数data,可以为您提供从服务器返回的所有数据.所以你不需要使用getDataIDs和getRowData.该阵列data.rows可以直接使用.
• 如果使用回调data参数,则loadComplete可以从网格中删除不需要的列'type'和'data'列.
• 如果您放置了有关id之后的信息,'Label','Information'那么您也可以使用id属性jsonReader并id从网格中删除隐藏列.例如,如果您id作为cell数组中的最后一个移动,则可以使用jsonReader: {id: 4}并id从网格中删除隐藏列.如果添加其他cell: ""属性,则jsonReader可以"cell":从输入数据中删除.如果要使用root已jsonReader定义为函数的属性(请参阅文档),则可以从服务器响应中删除一些不需要的数据.

例如,服务器可以生成简化数据

[
["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
});

看演示: