3

在这篇文章之后，我找到了一些我想要的方法，但我遇到了一些麻烦。这是我的代码：

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. 我不明白为什么这些输入是可见的，因为我希望它们只有在我编辑某些单元格时才会出现。

非常感谢您为解决（并解释）我的错误方式提供的所有帮助。继和

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 作为第一行。我认为我对这种方法的理解是错误的。

我担心这些问题会打扰您，我查看了 wiki，但没有成功找到任何方法来纠正这些问题。我想找到一些更详细的教程来展示一些案例。

非常感谢您，如果您能再花一些时间给我一种使用 jqGrid.JiheL 提高效率的方法

2013 年 4 月 1 日更新

我已经应用了 Oleg 的建议，现在可以了。但麻烦依然存在。这是图像：

在此处输入图像描述

对于第一行，选择框就可以了。第一个输入字段接收日期选择器，但第二个（称为“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
                    });
                });
            },

下次，我希望你能帮我解决这个问题并关闭这个请求。非常感谢您花时间帮助新手。继和

4

1 回答 1

7

我认为很多来自您代码中的常见问题。所以我试图更详细地回答你的问题。

首先，您发布了错误的 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 duplicates。第一行 ({"cell":[0,"Nom ","LEBRUN","text",""]}和{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},) 都将获得等于 1 而不是 0 和 1 的相同 id。这是您描述的问题的主要原因。

此外，我会向您推荐以下内容：

  • 删除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，可以为您提供从服务器返回的所有数据。所以你不需要使用getDataIDsand 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
});

查看演示：

在此处输入图像描述

于 2013-03-25T11:57:02.273 回答