Выпадающее меню jQgrid, не заполняющее данные в форме

Question

Итак, я потратил целый день на трассировку данных, но не смог найти решение, поэтому разместил здесь.Ниже мой js код.

<script type="text/javascript">
jq(function() {
        jq("#Grid").jqGrid({
            url:'/indyaah/crud.htm',
            datatype: 'json',
            mtype: 'GET',
            colNames:['User Id','User Name','Book Id','Book Name'],
            colModel:[
                {name:'userId',index:'userId', formatter: 'select', stype: 'select',edittype: 'select',editoptions:{value:Users()},editable:true, editrules:{required:true,edithidden:true},searchoptions:{sopt: ['eq','ne','le','ge']},hidden:true},
                {name:'userName',index:'userName', width:100,editable:false},
                {name:'bookId',index:'bookId', formatter: 'select', stype: 'select',edittype: 'select',editoptions:{value:Books()},editable:true, editrules:{required:true,edithidden:true},searchoptions:{sopt: ['eq','ne','le','ge']},hidden:true},
                {name:'BookName',index:'BookName', width:100},
                ],
            postData: { 
            },
            rowNum:5,
            altRows:true,
            hiddengrid:true,
            rowList:[5,10],
            height: "100%",
            autowidth: true,
            rownumbers: true,
            pager: '#pager',
            sortname: 'userId',
            viewrecords: true,
            sortorder: "asc",
            caption:"Details",
            emptyrecords: "Empty records",
            loadonce: false,
            autowidth:true,
            loadComplete: function() {
            },
            jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                cell: "cell",
                id: "id"
            }
        });
        function Users()
        {
            jq.getJSON('/indyaah/readUsers.htm', function(data) {
            var len = data.rows.length;
            for ( var i = 0; i < len; i++) {
                if(i===0) html += '' + data.rows[i].userId + ' : \'' + data.rows[i].userName + '\',' ;
                else if(i===len-1) html +=  data.rows[i].userId + ' : \'' + data.rows[i].userName + '\'' ;
                else html += data.rows[i].userId + ' : \'' + data.rows[i].userName + '\',' ;
            }   
            });
            return html;
        }
        function Books()
        {
            jq.getJSON('/indyaah/readBooks.htm', function(data) {
            var len = data.rows.length;
            for ( var i = 0; i < len; i++) {
                if(i===0) html += '{\'' + data.rows[i].bookId + '\':\'' + data.rows[i].name + '\',\n' ;
                else if(i===len-1) html += '\''+ data.rows[i].bookId + '\':\'' + data.rows[i].name + '\'}' ;
                else html += '\''+ data.rows[i].bookId + '\':\'' + data.rows[i].name + '\',\n' ;
            }
            });
            return html;
        }
        jq("#Grid").jqGrid('navGrid','#pager',
                {edit:false,add:false,del:false,search:true},
                { },
                { },
                { }, 
                { 
                    sopt:['eq', 'ne', 'le', 'ge', 'cn', 'bw', 'ew'],
                    closeOnEscape: true, 
                        multipleSearch: true, 
                        closeAfterSearch: true },
                {width:500}
        );      
        jq("#Grid").navButtonAdd('#pager',
                {   caption:"Add", 
                    buttonicon:"ui-icon-plus", 
                    onClickButton: add,
                    position: "last", 
                    title:"", 
                    cursor: "pointer"
                } 
        );

        jq("#Grid").navButtonAdd('#pager',
                {   caption:"Edit", 
                    buttonicon:"ui-icon-pencil", 
                    onClickButton: edit,
                    position: "last", 
                    title:"", 
                    cursor: "pointer"
                } 
        );

        jq("#Grid").navButtonAdd('#pager',
            {   caption:"Delete", 
                buttonicon:"ui-icon-trash", 
                onClickButton: delete,
                position: "last", 
                title:"", 
                cursor: "pointer"
            } 
        );

        jq("#btnFilter").click(function(){
            jq("#Grid").jqGrid('searchGrid',
                    {multipleSearch: true, 
                        sopt:['eq']}
            );
        });


        jq("#Grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"});

    });
</script>

оба Jsons имеют следующий формат (я показал только 3-4 столбца, но есть 8 и 10 соответственно),

{
page: 1
records: 5
rows: [
        0: {displayName:ABC, password:null, userName:123, userId:1,…}
        1: {displayName:DEF, password:null, userName:456, userId:2,…}
        2: {displayName:GHI, password:null, userName:789, userId:3,…}
        3: {displayName:JKL, password:null, userName:234, userId:4,…}
        4: {displayName:MNO, password:null, userName:548, userId:5,…}
        5: {displayName:PQR, password:null, userName:968, userId:6,…}
]
}

и

{
page: 1
records: 5
rows: [
        0: {displayName:ABC,  bookName:123, bookId:1,…}
        1: {displayName:DEF,  bookName:456, bookId:2,…}
        2: {displayName:GHI,  bookName:789, bookId:3,…}
        3: {displayName:JKL,  bookName:234, bookId:4,…}
        4: {displayName:MNO,  bookName:548, bookId:5,…}
        5: {displayName:PQR,  bookName:968, bookId:6,…}
]
}

Моя форма редактирования / добавления выглядит как Обратите внимание, что в режиме редактирования / добавления я использую только некоторые значения, отправленные в Json сервером.* Таким образом, в основном проблема заключается в том, что сетка загружается идеально, но как только я пытаюсь добавить или изменить, поля выбора пусты. Когда я отлаживаю в firebug, контроллер отправляет данные, но это не такзагружен в сетку.

Итак, что мне здесь не хватает ??

Answer 1

Причина вашей проблемы ясна, но решение не так просто, потому что использование formatter: 'select' вместе с editoptions.value, загруженным с сервера, в действительности не поддерживается jqGrid. Я пытаюсь описать происхождение вашей проблемы и описать пути ее решения.

Первая проблема заключается в том, что $.getJSON работает асинхронно . Таким образом, если будет вызван Users() или Books(), то значение undefined будет возвращено из функций. Кстати, переменная html действительно не определена в вашем коде.

Я могу предложить несколько способов решения вашей текущей проблемы.

Вы можете просто удалить edittype: 'select', editoptions: {value: Users()}, editable: true и edittype: 'select' ,editoptions: {value: Books()}, editable: true из определения столбца. Вы можете установить настройки внутри обработчика success соответствующих вызовов $.getJSON:

jq("#Grid").jqGrid({
    ...
});
jq.getJSON('/indyaah/readUsers.htm', function (data) {
    var len = data.rows.length, i, html = '', item;
    for (i = 0; i < len; i++) {
        item = data.rows[i];
        if (i !== 0) {
            html += ',';
        }
        html += item.userId + ":'" + item.userName + "'";
    }
    jq("#Grid").jqGrid('setColProp', 'userId', {
        edittype: 'select',
        editoptions: {value: html},
        editable: true
    });
});
jq.getJSON('/indyaah/readBooks.htm', function (data) {
    ...
    jq("#Grid").jqGrid('setColProp', 'bookId', {
        edittype: 'select',
        editoptions: {value: html},
        editable: true
    });
});

В тот момент, когда откроется форма «Добавить» или «Изменить», правильное значение для editoptions.value будет уже в colModel, и выбор должен отображаться правильно.

Проблема, с которой вы все еще будете сталкиваться, заключается в использовании formatter: 'select', который необходимо заполнить editoptions.value перед заполнением тела сетки . Вы написали, что сетка была заполнена правильно. Я думаю, это означает, что серверы до '/indyaah/crud.htm' ответили на запросы к /indyaah/readUsers.htm и /indyaah/readBooks.htm. Я считаю это опасным.

Поэтому я бы порекомендовал вам использовать первую опцию datatype: 'local' в jqGrid. Это предотвратит загрузку сетки. Вы должны установить datatype: 'json' и вызвать jq("#Grid").trigger("reloadGrid") после того, как будут загружены все выборки (оба выбора) colModel. Соответствующая реализация проста. Например:

var filledSelects = 0,
    $grid = jq("#Grid");
    fillSelectWithData = function (data, colName, idProp, nameProp) {
        var len = data.rows.length, i, html = '', item;
        for (i = 0; i < len; i++) {
            item = data.rows[i];
            if (i !== 0) {
                html += ',';
            }
            html += item[idProp] + ":'" + item[nameProp] + "'";
        }
        $grid.jqGrid('setColProp', colName, {
            edittype: 'select',
            editoptions: {value: html},
            editable: true
        });
    },
    loadGridIfRequired = function () {
        filledSelects++;
        if (filledSelects > 1) {
            $grid.jqGrid('setGridParam', {
                datatype: 'json'
            }).trigger('reloadGrid');
        }
    };

$grid.jqGrid({
    url:'/indyaah/crud.htm',
    datatype: 'local'
    ...
});
jq.getJSON('/indyaah/readUsers.htm', function (data) {
    fillSelectWithData(data, 'userId', 'userId', 'userName');
    loadGridIfRequired();
});
jq.ajax('/indyaah/readBooks.htm', function (data) {
    fillSelectWithData(data, 'bookId', 'bookId', 'user');
    loadGridIfRequired();
});

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