jQGrid + jQueryUI Autocomplete + комбинированный список автоматически открывается в фокусе - PullRequest
4 голосов
/ 14 ноября 2011

Я уверен, что мне не хватает чего-то очень простого в этом. Пару дней назад (буквально) ударившись головой о стол, я подчиняюсь стеку:

Я использую jQuery UI Autocomplete в качестве комбинированного списка в моем jQGrid (я знаю! Я уже искал решение в другом месте, но безрезультатно!). Я хотел бы, чтобы раскрывающийся список открывался при доступе к ячейке для редактирования через событие onSelectRow в jqGrid. В принципе, я хочу сделать именно то, что обсуждается здесь:

Открыть JQuery UI ComboBox в фокусе

и демо-версию здесь:

http://jsfiddle.net/gEuTV/

Разница лишь в том, что мне это нужно в jqGrid. Я пробовал код, приведенный ниже, через который (по ошибке) я запускаю комбинированный список, когда строка находится в фокусе, но этот список не отображается в фокусе строки в событии onSelect. У меня есть подлое подозрение, что я просто помещаю следующий код в неправильное место, но я пробовал его везде, о чем могу подумать:

$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", ''); 

Вот мой полный код, включая сетку:

$(function(){
    var lastsel;
     $("#list2").jqGrid({
            url: 'php_includes/uploadgrid.php',
            datatype: "json",
            mtype: 'GET',
            colNames:[
                    'User Value',
                    'Translated Value',
                    'User Validation,
                    ],
            colModel:[
                    {name:'usr_value',index:'usr_value', sortable:'true', width:60, align:"center", editable:false},
                    {name:'translated_value',index:'translated_value', sortable:'true', width:60, align:"center", editable:false},
                    {name:'usr_validation',index:'usr_validation', sortable:'true', width:60, align:"center", editable:true}
                    ],
            pager: '#pager2',
            rowNum: 1000,
            scroll: true,
            gridview: true,
            viewrecords: false,
            height: 'auto',
            hidegrid: false,
            autowidth: true,
            pgbuttons: false,
            pginput: false,
            forceFit: true,
            emptyrecords: "No record was loaded",
            onSelectRow: function(id){
                            if(id && id==lastsel){
                                    $("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
                                    } else {
                            if(id && id!==lastsel){
                                    $("#list2").jqGrid('saveRow',lastsel);
                                    $("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
                                    lastsel=id;
                                    }
                                }
                            },
            editurl: '/php_includes/jqGridCrud.php',
            });
            jQuery("#list2").jqGrid('navGrid',"#pager2",{edit:false, search:false, del:false, add:false})

         function selectNone(){
                     $("#list2").jqGrid('resetSelection');
                    }
                    //this function de-selects all previously accessed rows

            function autocomp(id) {
                    var term2 = $("#list2").jqGrid('getCell',id,'usr_value');
                    $("#"+id+"_usr_validation","#list2")
                            .autocomplete({
                                    source: function(request, response) {
                                              $.ajax({
                                                    url: "/php_includes/Autocomplete.php",
                                                    dataType: "json",
                                                    data: {
                                                            term : request.term,
                                                            term2 : term2,
                                                            },
                                                    success: function(data) {
                                                            response(data);
                                                            }
                                                    });
                                            },
                                    minLength: 0,
                                    select: function(event, ui) {
                                            $("#list2").val(ui.item.id);
                                            },

                            });
             $("#"+id+"_usr_validation","#list2").bind("focus", function () {
                    this.value = '';
                    $(this).autocomplete("search", '');
              });

            }
    });

1 Ответ

1 голос
/ 14 ноября 2011

Вы должны изменить 'User Validation, на 'User Validation' и удалить запятые в разных местах вашего кода (например, от editurl: '/php_includes/jqGridCrud.php',} и close, которые являются синтаксическими ошибками в JavaScript, но игнорируются во многих, но не во всех веб-браузерах).

ОБНОВЛЕНО : Еще одна проблема заключается в том, что фокус на поле редактирования будет установлен до того, как будет вызван oneditfunc , поэтому «фокус»«событие не может быть инициировано.В качестве обходного пути вы можете вызвать событие «focus» сразу после .bind("focus", ....

См. Ваше модифицированное демо здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...