Пользовательский выпадающий форматер для jQuery jqGrid - PullRequest
Новая
       18

Пользовательский выпадающий форматер для jQuery jqGrid

1 голос
/ 02 марта 2011

Я пытаюсь отформатировать ячейку в jqGrid, чтобы при редактировании пользователем она представляла пользовательскую реализацию комбинированного списка (называемого activecombo), так как компонент select html выглядит ужасно.

Я прочитал это и посмотрел на демоверсии, но они, похоже, не совсем то, что я хочуВот что я попробовал: 

    var maritalStatusPickerFunction = function(cellvalue, options,
            rowObject) {
        var optionsArray = [ {
            "id" : 1,
            "status" : "Married"
        }, {
            "id" : 2,
            "status" : "Divorced"
        }, {
            "id" : 3,
            "status" : "Separated"
        }, {
            "id" : 4,
            "status" : "Widowed"
        }, {
            "id" : 5,
            "status" : "Unmarried"
        }

        ];
        var comboInput = $("<input type='text' value='" + cellvalue
                + "' />");
        comboInput.activecombo( {
            source : optionsArray
        });
        return comboInput;
    };

    $('#relationshipsGrid').jqGrid( {
        datatype : "local",
        colNames : [ 'Contact', 'Relationship' ],
        colModel : [ {
            name : 'contact',
            index : 'contact',
            width : 420
        }, {
            name : 'relationship',
            index : 'relationship',
            editable : true,
            formatter : maritalStatusPickerFunction,
            width : 120
        } ],
        width : 600,
        height : 100,
        cellEdit : true,
        editurl : "server.php"
    });

Но это, очевидно, не то, что я должен делать, поскольку это просто отображает объект Object на входе в ячейку.

Может кто-нибудь дать мне какие-нибудь указатели?

Спасибо,

Эми

1 Ответ

5 голосов
/ 02 марта 2011

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

Пользовательские форматеры используются для построения HTML-представления ячейки в виде строки .Пользовательские элементы управления для редактирования используются для создания пользовательского элемента DOM , который будет помещен внутри элемента <span> поля редактирования.В качестве примера см. это , это и это старые ответы.

Я не знаю плагин activecombo, но мне кажется, чтоВы не могли бы написать собственный контроль редактирования.Вместо этого вы можете попытаться определить dataInit дескриптор события внутри editoptions вроде 

editoptions: {
    dataInit : function (elem) { 
        $(elem).activecombo( {
            source : optionsArray
        }); 
    } 
}

или, если у вас возникнут какие-либо проблемы, такие как 

editoptions: {
    dataInit : function (elem) { 
        setTimeout(function(){
            $(elem).activecombo( {
                source : optionsArray
            }); 
        },100);
    } 
}

Byкак вы можете сделать то же самое для поиска .Тогда пользователь будет использовать те же преимущества в диалоге поиска / фильтрации.

...