Проблемы jqGrid со связанными списками выбора при редактировании формы

После безуспешных поисков на этом форуме способов решения этих проблем, я надеюсь, что кто-то может потратить некоторое время на то, чтобы заставить меня понять, что происходит и как это решить.

Вот снимок беды:

введите здесь описание изображения

и ответ 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') не похожа! Это связано с тем, что второй список не заполнен хорошими элементами, в зависимости от первого списка.

Как я могу инициализировать этот список хорошими элементами? Я безуспешно пробовал несколько способов, судя по некоторым сообщениям на форуме.

ОБНОВЛЕНО 05 апреля 2013 г.

Прежде всего, 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]+'"';
            }
        }, 

и код для редактирования кнопок, я беру идентификатор из данных строки для первоначальной загрузки второго списка и идентификатор из предыдущей/следующей строки при нажатии на кнопки навигации:

    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
);  

и, наконец, при выборе строки из основной сетки я беру идентификаторы из данных строки для загрузки второго списка:

    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);
            }
        });
    },

Олег, пожалуйста, если у вас есть немного времени, чтобы посмотреть, большое спасибо, чтобы сказать мне замечания об этом коде, чтобы я мог быть менее новичком! Еще раз спасибо, что поделились своим опытом. Хорошего дня. Джихел

ОБНОВЛЕНО 8 апреля 2013 г.

Я применил некоторые замечания Олега, что позволило получить более понятный код. Большое спасибо, Олег, я очень ценю, что меня вдохновляет ваш опыт. Я люблю jqGrid все больше и больше из-за тебя.

  1. Что касается «dataEvents», я не понимаю, почему вы говорите мне использовать это с e.target. Я видел, что его можно использовать в настройках редактирования, но я не знаю, что вы имеете в виду.
  2. Переменная 'selectedId' используется, когда я редактирую строку и перемещаюсь с помощью pgButtons. Если я не запомню новый идентификатор строки, второе поле со списком не будет обновлено и не будет соответствовать первому полю.
  3. Новый момент, когда я проверяю форму, я вижу в Firebug все пары, которые отправлены на сервер. введите здесь описание изображения

Как видите, первый элемент пустой со значением, мне кажется, что это 'sfm', colName второго списка. Пожалуйста, у вас есть идея, почему это происходит и как это решить?

Надеюсь, не надоедать вам этими бесконечными вопросами. Я не нашел ни одной книги, которая могла бы дать мне некоторые знания о кодировании jqGrid. Я надеюсь, что почти это может существовать. Заранее спасибо за потраченное время. Хорошего дня. Джихел


person JiheL    schedule 04.04.2013    source источник


Ответы (1)


jqGrid не содержит встроенной поддержки зависимого выбора.

Если вам действительно нужно реализовать зависимый выбор, я могу переслать вам ответ. Он показывает, как вручную изменить содержимое второго (зависимого) выбора на основе изменений в первом.

Как правило, jqGrid нужен какой-то гибкий способ обновлять некоторые выборки на основе новых параметров (например, новый dataUrl).

person Oleg    schedule 04.04.2013
comment
еще раз я должен поблагодарить вас за вашу любезную помощь и то, как вы помогаете мне найти решение этой проблемы. Поскольку эти списки заполняются из базы данных, мне пришлось изменить способ, я обновляю свой вопрос, чтобы внести изменения в ваше соглашение. Много времени для меня сэкономлено, надеюсь, вы не слишком много времени потратили на мою проблему. Хорошего дня. Джихел - person JiheL; 05.04.2013
comment
@user2132268: Добро пожаловать! Трудно комментировать код без его отладки. Некоторые вещи можно было бы улучшить: Почему onSelectRow должен делать $.ajax, особенно имея async:false, и он пытается установить данные в форме, которой не может быть? Вместо введения переменной selectedId вы можете использовать getGridParam с "selrow". Вместо использования myGrid вы можете использовать $(this) внутри всех обратных вызовов. dataEvents работает для всех режимов редактирования. Поэтому я рекомендую вам проверить, находится ли e.target внутри формы, и выполнить код, соответствующий используемому режиму редактирования. - person Oleg; 05.04.2013
comment
@ user2132268: Некоторые другие общие замечания о коде JavaScript: вы используете переменные rowdata, id_fam, id_sfm, которые объявлены во внешней области видимости или глобально. Переменные, используемые для временных целей, лучше объявлять локально внутри соответствующей функции или обратного вызова. Вам лучше использовать rowdata.fam_id вместо rowdata['fam_id']. Я бы порекомендовал вам ввести такую ​​функцию, как reloadSelect, которая делает $.ajax и заполняет зависимый выбор. Вы можете вызвать его с параметром $(e.target).val() или $(this).jqGrid('getCel',$(this).jqGrid('getGridParam','selrow'),'fam_id'). - person Oleg; 05.04.2013
comment
Большое спасибо за вашу любезную помощь, много много хороших вещей в ваших комментариях, которые я стараюсь применить как можно ближе. Я не все понял, поэтому я обновляю свой вопрос, чтобы выявить проблему. Большое спасибо еще раз. Джихел - person JiheL; 08.04.2013