jqGrid сохраняет неверное значение ячейки после всплывающего меню EditRules

Question

@ Олег - я новичок в jqGrid. У меня три проблемы. Требуется срочная помощь. Я использую jqGrid 3.8, встроенный режим редактирования.

1. Я хочу сохранить недопустимые значения ячейки после всплывающего окна для недопустимой ячейки.
2. Также я хочу установить фокус обратно на недопустимую ячейку.
3. У меня есть функция добавления строки и панель инструментов фильтра в моем jqGrid. Я использовал решение Олега при создании выпадающего списка для панели инструментов фильтра (опубликовано в другой ветке jQuery).

** - Проблема:

** Я звоню setSearchSelect из afterSaveCell, потому что я хочу добавлять новые значения в раскрывающемся списке фильтра каждый раз, когда добавляю или удаляю столбец (Примечание: столбец - это текстовое поле). Но панель инструментов фильтра не обновляется, даже если я использую

var sgrid = $("#list")[0];
sgrid.triggerToolbar();

См. Приведенный ниже код для настройки панели инструментов.

<script type="text/javascript">
var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i=0;i<textsLength;i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    },
    buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });     
        return values;
    },
    setSearchSelect = function(columnName) {    
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(getUniqueNames(columnName)),
                            sopt:['eq']
                        }
                    }
        );      
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 ,editable:true},
        { name:'Category', index:'Category', width:200,editable:true },
        { name:'Subcategory', index:'Subcategory', width:200,editable:true }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    editurl: "clientArray",
    multiselect: true,
    pagination:true,
    cellEdit: true,
    cellsubmit: 'clientArray',
    //ignoreCase: true,
    pager: '#pager',
    height: "auto",
    enableSearch: true,
    caption: "How to use filterToolbar better locally", 
    afterSaveCell: function(rowid,name,val,iRow,iCol) { 
        setSearchSelect(name);  

        jQuery("#list").('setColProp', name,
                    {
                       width:100
                    }
        );
        var sgrid = $("#list")[0];
        sgrid.triggerToolbar();
alert(name);        
    },
    loadComplete: function () {
                    setSearchSelect('Category');    
                }
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:true});

setSearchSelect('Category');
setSearchSelect('Subcategory');

grid.jqGrid('setColProp', 'Name',
            {
                searchoptions: {
                    sopt:['cn'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:getUniqueNames('Name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

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


function addRow(tableId){
    var loopRow = document.getElementById("addRowsInput").value;                
    var recordCount = '';
    var rwData = '';
    //var selRowIds = getRowIDs('list');
    var gridProducts =  $("#list"); 
    var resetFirstRow = jQuery("#list").getRowData( 1 );
    jQuery("#list").setRowData( 1, resetFirstRow );
    if(loopRow == null || loopRow == "" || loopRow == "Enter number of units to be added")
    {
        loopRow = 1;
    }

        for(i=0; i< loopRow; i++)
        {       
                recordCount = jQuery("#list").getGridParam("records") ;
                var emptydata = [
                    {id:(recordCount+1), Name:"",     Category:"",   Subcategory:""}]
                    gridProducts.jqGrid('addRowData', recordCount+1, emptydata[0]);                                 
        }
    }
</script>

@ Олег - еще один вопрос по предложенному вами решению. Извините, я пытался найти его, но не смог. В методе buildSearchSelect: как включить фильтр для пустой строки. Как объяснено выше, у меня есть кнопка «Добавить строку». Поэтому, когда пользователь хочет фильтровать строки с пустыми столбцами, мне нужно значение фильтра.

Answer 1

Реализация функции setSearchSelect из моего старого ответа работает, только если панель инструментов поиска еще не существует.Если панель инструментов существует, необходимо изменить параметры элемента select или источника автозаполнения виджета автозаполнения пользовательского интерфейса jQuery.

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

Вот модифицированный код JavaScript:

var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i=0;i<textsLength;i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        uniqueTexts.sort();
        return uniqueTexts;
    },
    buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });
        return values;
    },
    setSearchSelect = function(columnName) {
        var $select = $('select#gs_'+columnName), un = getUniqueNames(columnName),
            htmlForSelect = '<option value="">All</option>', i, l=un.length, val;
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(un),
                            sopt:['eq']
                        }
                    }
        );
        if ($select.length > 0) {
            // The searching toolbar already exist. One have to update it manually
            for (i=0;i<l;i++) {
                val = un[i];
                htmlForSelect += '<option value="'+val+'">'+val+'</option>';
            }
            $select.html(htmlForSelect);
        }
    },
    setAutocomplete = function(columnName) {
        var $input = $('input#gs_'+columnName), un = getUniqueNames(columnName);
        grid.jqGrid('setColProp', columnName,
                    {
                        searchoptions: {
                            sopt:['cn'],
                            dataInit: function(elem) {
                                $(elem).autocomplete({
                                    source:un,
                                    delay:0,
                                    minLength:0
                                });
                            }
                        }
                    });
        if ($input.length > 0) {
            // The searching toolbar already exist. One have to update the source
            $input.autocomplete('option', 'source', un);
        }
    },
    selectColumns = ['Category','Subcategory'], autocompleteColumns = ['Name'];

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 ,editable:true},
        { name:'Category', index:'Category', width:200,editable:true },
        { name:'Subcategory', index:'Subcategory', width:200,editable:true }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    cellEdit: true,
    cellsubmit: 'clientArray',
    ignoreCase: true,
    pager: '#pager',
    height: "auto",
    caption: "How to use filterToolbar better locally including local cell editing",
    afterSaveCell: function(rowid,name,val,iRow,iCol) {
        if ($.inArray(name,selectColumns) !== -1) {
            setSearchSelect(name);
        } else if ($.inArray(name,autocompleteColumns) !== -1) {
            setAutocomplete(name);
        }
    }
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:true});

$.each(selectColumns,function() {
    setSearchSelect(String(this));
});

$.each(autocompleteColumns,function() {
    setAutocomplete(String(this));
});

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