0

在这个论坛上寻找一些解决这些问题的方法但没有成功之后,我希望有人能花一些时间来推动我了解发生了什么以及如何解决它。

这是麻烦的快照:

在此处输入图像描述

以及来自服务器的 JSON 响应:

{"page":"1","total":1017,"records":"20335","rows":[{"id":"10390","cell":["10390",
" MM23398A","***.REVISION NE PAS UTILISER","ECHANGEUR","Echangeurs complets
\u00e0 plaques","","","","","","0","1"]},{"id":"1","cell":["1","\"304010","Joint
arm\u00e9 NE PAS UTILISER voir Z304010","VANNE","Pi\u00e8ces d\u00e9tach\u00e9es 
de vannes","","","","54.00","","0","4"]},{"id":"13583","cell":["13583","#POMPES"
,"Article g\u00e9n\u00e9rique pompes.","POMPE","Pompes centrifuges compl\u00e8tes
PANTHER","","","","","","0","3"]},{"id":"3","cell":["3","#POMPES\/10944\/0001",
"","ECHANGEUR","Echangeurs complets \u00e0 plaques","","","","","","0","1"]},
{"id":"4","cell":["4","#POMPES\/10944\/0002","","ECHANGEUR","Echangeurs complets 
\u00e0 plaques","","","","","","0","1"]},{"id":"5","cell":["5","#POMPES\/10971
\/0003","Article g\u00e9n\u00e9rique pompes","POMPE","Pompes centrifuges compl
\u00e8tes PANTHER","","","","","","0","3"]}

(最后一个单元格是上面选定的行)

如您所见,所选行中的信息和编辑表单('S/famille')中的信息不相似!这是因为第二个列表框没有填充好项目,这取决于第一个列表框。

我怎样才能用好的项目初始化这个列表?根据论坛上的一些帖子,我尝试了几种方法都没有成功。

2013 年 4 月 5 日更新

首先,这些列表框的 colModels :

            {name:'fam',index:'f.code', width:80,
            formoptions:{
                elmprefix:"<span style='visibility:hidden;'>&nbsp;&nbsp;(<span style='color:red;'>*</span>)&nbsp;</span>"
            },
            editable:true,
            edittype:'select',
            editoptions:{
                dataUrl:'selfam.php',
                dataEvents: [
                    {
                        type: 'change',
                        fn: function(e) {
                            $.ajax({
                                url:'selsfm.php?id='+$(e.target).val(),
                                async:false,
                                mType:'GET',
                                success:function(data){
                                    $("#tr_sfm select.FormElement").html(data);
                                }
                            });

                        }
                    }
                ]
            }
        }, 
        {name:'sfm',index:'s.code', width:80,
            formoptions:{
                elmprefix:"<span style='visibility:hidden;'>&nbsp;&nbsp;(<span style='color:red;'>*</span>)&nbsp;</span>"
            },
            editable:true,
            edittype:'select',
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                return ' title="'+rawObject[13]+'"';
            }
        }, 

以及用于编辑按钮的代码,我从 rowdata 中获取 id 用于最初加载第二个列表框,并在单击导航按钮时从上一行/下一行获取 id:

    myGrid.jqGrid('navGrid','#tab21p',{search:false,del:false}, 
    { // edit options
        width:500,
        modal:true,
        closeOnEscape:true,
        recreateForm: true,
        editCaption:"Modifier un ARTICLE",
        onInitializeForm: function(form) {
            rowdata = myGrid.jqGrid('getRowData',selectedId);
            id_fam=rowdata['fam_id'];
            id_sfm=rowdata['sfm_id'];
            $.ajax({
                url:'selsfm.php?id='+id_fam+'&edit',
                async:false,
                mType:'GET',
                success:function(data){
                    $("#tr_sfm select.FormElement").html(data);
                    $("#tr_sfm select.FormElement").val(id_sfm);
                }
            });
        },
        onclickPgButtons : function (whichbutton, formid, rowid) {
            var row = myGrid.jqGrid('getGridParam','selrow');
            if(whichbutton=='next'){row+=1;}else{row-=1;}
            rowdata = myGrid.jqGrid('getRowData',row);
            id_fam=rowdata['fam_id'];
            id_sfm=rowdata['sfm_id'];
        } 
    },
    {    // add options
        width:500,
        modal:true,
        closeOnEscape:true,
        recreateForm: true,
        addCaption:"Créer un ARTICLE",
        onInitializeForm: function(form) {
            id_fam=1;
            id_sfm=1;
            $.ajax({
                url:'selsfm.php?id='+id_fam+'&add',
                async:false,
                mType:'GET',
                success:function(data){
                    $("#tr_sfm select.FormElement").html(data);
                    $("#tr_sfm select.FormElement").val(id_sfm);
                }
            });
    },
    {}, //del options
    {} //search options
);  

最后,当从主网格中选择一行时,我从 rowdata 中获取 id 来加载第二个列表:

    onSelectRow:function(id,status){
        selectedId=id;
        rowdata = myGrid.jqGrid('getRowData',id);
        id_fam=rowdata['fam_id'];
        id_sfm=rowdata['sfm_id'];
        $.ajax({
            url:'selsfm.php?id='+id_fam+'&select',
            async:false,
            mType:'GET',
            success:function(data){
                $("#tr_sfm select.FormElement").html(data);
                $("#tr_sfm select.FormElement").val(id_sfm);
            }
        });
    },

奥列格,如果你有时间看看,非常感谢你告诉我关于这段代码的评论,这样我就可以减少新手了!再次感谢您分享您的经验。祝你今天过得愉快。继和

2013 年 4 月 8 日更新

我应用了 Oleg 的一些评论,让我获得更清晰的代码。非常感谢奥列格,我非常感谢您的经验推动。因为你,我越来越爱 jqGrid。

  1. 关于'dataEvents',我不明白你为什么告诉我使用它,e.target。我已经看到它可以在编辑选项中使用,但我不知道你的意思。
  2. 当我编辑一行并使用 pgButtons 导航时,会使用变量“selectedId”。如果我不记住新的行 ID,则第二个列表框不会更新并且与第一个框不同。
  3. 一个新点,当我验证表单时,我在 Firebug 中看到所有发布到服务器的对。 在此处输入图像描述

如您所见,第一个元素是空白的,有一个值,在我看来它是“sfm”,即第二个列表框的 colName。请您知道为什么会发生这种情况以及如何解决它?

我希望不要用这些连续的问题来打扰你。我没有找到任何可以给我一些关于编码 jqGrid 的知识的书。我希望这几乎可以存在。提前感谢您花时间。祝你今天过得愉快。继和

4

1 回答 1

2

jqGrid 不包含任何对依赖选择的内置支持。

如果您确实需要基于实现依赖选择,我可以转发答案。它显示了如何根据第一个选择的更改手动更改第二个(依赖)选择的内容。

一般来说,jqGrid 需要一些灵活的方式来根据新参数(例如新参数)刷新一些选择。dataUrl

于 2013-04-04T10:54:03.407 回答