Тип редактирования JQGrid: «выбор» с использованием dataurl возвращает <select>с <optgroup>без сохранения значения выбора - PullRequest
2 голосов
/ 27 июня 2011

У меня есть столбец JQGrid с типом редактирования: «Выбрать» с помощью dataUrl, чтобы получить список учетных записей с группами для разных групп учетных записей.

Моя проблема: при сохранении строки значение не передается в editurl для моего столбца Select.Если я удаляю, то значение sa передается в editurl для моего столбца Select.

Описание: Для данных моего столбца я возвращаю имя учетной записи, а не значение, поэтому при загрузке сетки отображается имя.

Когда редактируется строка (in-line edit), вызывается dataUrl, и отображается список выбора, и для данных строк выбирается моя Учетная запись.

Затем я выбираю новую Учетную запись изВыберите список и нажмите Enter, чтобы сохранить.Выбранное значение учетной записи не передается в функцию editurl для столбца.если я удаляю s из учетной записи, значение передается в функцию editurl.

Я не уверен, что делаю что-то не так, т.е. не устанавливая параметр сетки,

Надеюсь, вы поможете мне.

Заранее спасибо,

Крис

Код моей сетки:

$(document).ready(
function () {
    var lastSelection;
    var grid = jQuery("#BankTransactions");
    grid.jqGrid({
        url: '/DropDown/GridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],
        colModel: [
                    { name: 'transactionLineId', index: 'transactionLineId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'transactionId', index: 'transactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'bankTransactionId', index: 'bankTransactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },
                    { name: 'Amount', index: 'SubAmount', editable: true, width: 100, align: 'right', sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'class="BankTranEdit"' }, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '&nbsp;'} },
                    { name: 'CategoryIdURL', index: 'CategoryIdURL',
                        editable: true,
                        edittype: 'select',
                        //formatter: 'select',
                        editoptions: { dataUrl: "/DropDown/CategorySelectList" },
                        width: 220,
                        align: 'left'
                    },
                  ],
        pager: jQuery('#pager'),
        rowNum: 100,
        rowList: [25, 50, 100],
        editurl: "/Dropdown/GridSave",
        sortname: 'Number',
        sortorder: "desc",
        viewrecords: true,
        width: 1250,
        height: 450,
        onCellSelect: function (rowid, iCol, cellContent, e) {
                        grid.restoreRow(lastSelection);
                        grid.editRow(rowid, true, null, null, null, null, null);
                        lastSelection = rowid;  
                      }

    });
});

Вывод / Dropdown / GridData:

{"total":1,
"page":1,
"records":6,
"rows":[
    {"id":165,"cell":["165","249","125","DM000249","1500.00","Sales"]},
    {"id":145,"cell":["145","229","105","SM000229","100.00","Rent"]},
    {"id":153,"cell":["153","237","113","SM000237","38.07","Bank Fees"]},
    {"id":185,"cell":["185","269","145","SM000269","750.00","Cash Discounts"]},
    {"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},
    {"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]
}   

Вывод / Dropdown / CategorySelectList

<select>
<optgroup label='Expenses'>
<option value='42'>Accounting Fees</option>
<option value='60'>Bank Fees</option>
<option value='23'>Bank Service Charges</option>
<option value='24'>Books and Publications</option>
<option value='25'>Cash Discounts</option>
<option value='43'>Rent</option>
</optgroup>
<optgroup label='Income'>
<option value='19'>Sales</option>
<option value='20'>Services</option>
<option value='21'>Interest Income</option>
<option value='22'>Other Income</option>
</optgroup>
</select>

1 Ответ

5 голосов
/ 28 июня 2011

Текущая версия jqGrid не работает с <optgroup> внутри <select>.

enter image description here

Я считаю, что использование <optgroup> может быть полезным в некоторых случаях. Поэтому я немного отладил код jqGrid и обнаружил, что нужно изменить только две строки кода jqGrid (строки 143-144 grid.inlinedit.js или строки 8262-8263 jquery.jqGrid.src.js из jqGrid 4.1.1) из

tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();

до

tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();

или просто

tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();

чтобы решить проблему.

Если требуется поддержка выбора с атрибутом multiple: true:

enter image description here

следует изменить так же, как и выше, еще одну строку ( строка 149 ) для grid.inlinedit.js, имеющего "select>option:selected". Чтобы заставить jqGrid с атрибутом multiple: true работать со свойством dataUrl, нужно исправить еще одну строку ( строка 67 ) grid.inlinedit.js. Нужно изменить

if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
    $(elc).width($(elc).width());
}

например, к следующему

if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
   cm[i].editoptions.multiple===true &&
   typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {

    $(elc).width($(elc).width());
}

Это изменение предотвратит установку очень маленького значения width для выбора до того, как будет загружено запросом $.ajax из dataUrl. Вероятно, следует поместить такое же исправление width в обработчик событий success соответствующего вызова $.ajax из grid.common.js, куда будут загружены данные для dataUrl. Я тестировал свои демки в IE9, и не нужно делать исправления для IE9.

Здесь вы можете увидеть демонстрационные ролики с фиксированным кодом jqGrid: демо одиночного выбора , демо мультиселекта . Вы должны принять во внимание, что на сервере нет кода для "/ Dropdown / GridSave", который будет использоваться в editurl. Тем не менее, вы увидите в Fiddeler of Firebug, что опубликованные данные, которые будут отправлены на сервер, содержат информацию о выбранном элементе. Если вы хотите, чтобы демонстрационная программа работала локально, вы должны изменить editurl на 'clientArray' и, возможно, установить дополнительно loadonce:true.

...