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

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

9 голосов
/ 22 марта 2011

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

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

Ответы [ 6 ]

3 голосов
/ 24 ноября 2012

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

Мне неудобно отслеживать последний выбранный элемент и проверять его при каждом нажатии на другие элементы. Итак, я думаю, что более удобный способ - присоединить триггер 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;
}

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

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

2 голосов
/ 20 февраля 2014

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

$(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 голосов
/ 22 марта 2011

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

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

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

1 голос
/ 23 августа 2016

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

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

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

0 голосов
/ 05 апреля 2016

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

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 голосов
/ 22 марта 2011

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

Когда я редактировал строку, я использовал некоторыевещь такого рода 

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.

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

...