jqGrid: как потерять фокус, когда я нажимаю вне сетки или где-либо еще, если на то пошло

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

заранее спасибо

9
jqgrid jqgrid-php jquery

6 ответов

Я точно не знаю, как вы запускаете встроенное издание. Я использую ondblClickRow событие jqGrid, а также искал способ восстановить строку, когда пользователь оставил input или select (редактировать) элемента.

Я считаю громоздким отслеживать последний выбранный элемент и проверять его при каждом щелчке по другим элементам. Итак, я думаю, что более удобный способ-прикрепить restoreRow триггер на blur событие input или select элемент в настоящее время редактируется следующим образом:

ondblClickRow: function(rowid, iRow, iCol, e) {
  grid.jqGrid('editRow', rowid, true);
  $("input, select", e.target).focus().blur(function() {
    grid.jqGrid('restoreRow', rowid);
  });
  return;
}

таким образом, строка восстанавливается всякий раз, когда пользователь покидает поле edition, не нажимая enter.

этот подход отлично работает для меня, надеюсь, что он поможет кому-то еще.

3

в любом случае, я уже понял, как это сделать. Просто подумал, что было бы неплохо оставить его где-нибудь в интернете, так как я потратил довольно много времени, выясняя, как это сделать. Надеюсь, это поможет =)

$(document).click(function(e){
    if(e.target.id != lastSelectRoot+"_FieldName"){
        jQuery('#grid').jqGrid('restoreRow',lastSelectRoot);
        lastSelectRoot = null;
    }
});

просто добавьте этот фрагмент кода где-нибудь и измените соответствующие части, такие как FieldName и lastSelectRoot и #grid, на то, что вы уже используете.

2

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

$(document).click(function(e) {
    e.preventDefault();
    //gets the element where the click event happened
    var clickedElement = e.target;      
    //if the click event happened outside the grid 
    if($("#myGridId").has(clickedElement).size() < 1){
        //unselect the grid row
        $("#myGridId").jqGrid("editCell", 0, 0, false);
    }
});
2

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

$(document).on('focusout', '[role="gridcell"] *', function() {
    $("#mygrid").jqGrid('editCell', 0, 0, false);
});

решения на основе $(document).on ('click') имеют потенциальный недостаток. Некоторые компоненты, такие как select2, не распространяют событие click в документ, поэтому оно завершится неудачей, если вы его на своей странице и щелкнули (это был мой случай).

1

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

когда я редактировал строку, я использовал какую-то вещь такого рода

var lastSel;

// In grid I am using some thing like this for editing
    ondblClickRow: function(rowId, iRow, iCol, e){
//initially I am saving my prev row selected for editing and then editing the selected row.

        if(rowId && rowId!==lastSel){ //lastSel is a global variable
            jQuery(this).saveRow(lastSel); 
            lastSel=rowId; 
         }        
        $(this).jqGrid('resetSelection');   
        $(this).jqGrid('editRow', rowId, true, null, null, 'clientArray');


    }

когда я хотел отправить данные на сервер для обновления, я использую следующий оператор в моей первой строке и отправляю, а затем отправляю данные на сервер.

$(gridId).saveRow(lastSel);//where lastSel is the global variable I have selected.

надеюсь, это даст вам представление о том, как решить вашу проблема. Кстати, я сделал только одну строку для редактирования в любой момент времени.

0

Я попробовал несколько разных вариантов. На основе Маурисио рейса код я написал свой собственный.

var lastSel = -1;

$("#mygrid").jqGrid({
    ...
    beforeSelectRow: function(rowid) {
        if (rowid !== lastSel) {
            lastSel = rowid;
            $("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
        }
        return true;
    },
    onCellSelect: function(rowId,iCol,cellcontent,e) {
        if(iCol == 1 || iCol == 2) // editable columns
            sgrid.jqGrid('editRow', rowId, true);
    },
    ...
});
...
$(document).click(function(e) {
    if(sgrid.has(e.target).size() < 1)
        $("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
});

Если вы хотите сохранить строку вместо отмены редактирования просто поставить

$("#mygrid").jqGrid('saveRow', lastSel); // save row

вместо

$("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
0