jqgrid Разрешить выделение только одной ячейки в строке.Не работает после выполнения сортировки - PullRequest
Новая
       30

jqgrid Разрешить выделение только одной ячейки в строке.Не работает после выполнения сортировки

0 голосов
/ 12 декабря 2018

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

loadComplete: function () {
    var gridParams = jQuery(this).jqGrid("getGridParam");
    var selectedCells = gridParams.mySelection;
    var rowId, columnName, cellValue;
    if (selectedCells.length > 0) {
        for (var i = 0; i < selectedCells.length; i++) {
            rowId = selectedCells[i].rowId;
            columnName = selectedCells[i].columnName;
            cellValue = selectedCells[i].cellValue;
            jQuery(this).setCell(rowId, columnName, cellValue, 'ui-state-highlight', '', true);
            jQuery(this).jqGrid('getLocalRow', rowId).columnName = cellValue;
        }
    }
},

1 Ответ

0 голосов
/ 22 декабря 2018

Ваш вопрос (и ваша проблема ) не прост.Поэтому я отвечаю с задержкой.

Прежде всего, вы должны включить в ваши данные уникальные значения id, чтобы быть уверенными, что значения rowid останутся без изменений после сортировки данных.В качестве значений можно использовать любые уникальные значения, например, 1, 2, ..., 5 или 10, 20, ... 50 или любые другие значения.Я изменил входные данные из вашей демонстрации на следующее: 

var data = [
        { id: 10, win: 50, draw: 20, defeat: 30 },
        { id: 20, win: 40, draw: 10, defeat: 50 },
        { id: 30, win: 30, draw: 50, defeat: 20 },
        { id: 40, win: 20, draw: 60, defeat: 20 },
        { id: 50, win: 70, draw: 20, defeat: 10 }
    ];

Следующая проблема: информация, которую вы сохраняете в параметре mySelection.Ваша текущая реализация сохраняет массив объектов со следующими свойствами: rowId, cellId, columnName, cellValue и selectedCell, где selectedCell - это элемент DOM, который представляет выбранный элемент <td>.Я считаю нехорошим сохранение selectedCell, поскольку содержимое сетки будет перестроить после сортировки, а selectedCell будет указывать на элемент DOM удаленный со страницы HTML.Кроме того, вы просматриваете элементы в mySelection по rowid (см. Код функции returnExistingRowSelectedCells).Код можно сократить до одной строки, если вы измените информацию, сохраненную в mySelection, на карту: имя столбца по rowid.Например, если вы выберете 3 ячейки в сетке, как показано на рисунке ниже

image

, то текущая реализация будет содержать mySelection, как 

[{
    "rowId": "20",
    "selectedCell": {...},
    "cellId": "20_draw",
    "columnName": "draw",
    "cellValue": 10
}, {
    "rowId": "40",
    "selectedCell": {...},
    "cellId": "40_win",
    "columnName": "win",
    "cellValue": 20
}, {
    "rowId": "30",
    "selectedCell": {...},
    "cellId": "30_defeat",
    "columnName": "defeat",
    "cellValue": 20
}]

(в исходной демоверсии rowId были такие значения, как "jqg4", "jqg2" и "jqg3").Я предлагаю заменить массив на объект наподобие 

{
    "20": "draw",
    "40": "win",
    "30": "defeat"
}

Я использую имена столбцов вместо индексов столбцов, чтобы быть уверенным, что не нужно обновлять данные, если порядок столбцов будет изменен путем перетаскивания.& отбрасывать заголовки столбцов (необходимо добавить к демонстрации jquery-ui.min.js причины, чтобы сделать опцию sortable: true, которую вы используете работоспособной).

Последнее замечание касается адресации ячеек по имени столбца.Свободный jqGrid содержит внутренний параметр iColByName, который позволяет получить индекс столбца по имени столбца (gridParams.iColByName[colName]).Кроме того, метод getGridRowById можно использовать для получения <tr> по rowid, а затем один фургон использует $.jgrid.getCell для получения оболочки jQuery в ячейку (<td>) по индексу столбца: 

var tr = $(this).jqGrid("getGridRowById", rowid);
var $td = $jgrid.getCell.call(this, tr, iCol); // mostly $(tr.cells[iCol]);

Inтак, как вам нужно, просто держать rowid и имя столбца и получить $td с информацией.Затем вы можете использовать $td.addClass("ui-state-highlight") или $td.removeClass("ui-state-highlight") для выбора / отмены выбора ячейки.

Модифицированный код может выглядеть следующим образом: 

mySelection: {},
loadComplete: function() {
  var $this = jQuery(this), gridParams = $this.jqGrid("getGridParam"),
      selectedCells = gridParams.mySelection,  rowId, tr, iCol, $td;

  for (rowId in selectedCells) {
      if (selectedCells.hasOwnProperty(rowId)) {
          tr = $this.jqGrid("getGridRowById", rowId);
          iCol = gridParams.iColByName[selectedCells[rowId]];
          $td = jQuery.jgrid.getCell.call(this, tr, iCol);
          $td.addClass("ui-state-highlight");
      }
  }
},
onCellSelect: function(rowId, iCol, cellContent, element) {
  var $this = jQuery(this),
      gridParams = $this.jqGrid("getGridParam"),
      selectedCells = gridParams.mySelection;
  if (selectedCells[rowId]) {
      // some sell is already selected in the row
      var tr = $this.jqGrid("getGridRowById", rowId),
          iColSelected = gridParams.iColByName[selectedCells[rowId]],
          $tdSelected = jQuery.jgrid.getCell.call(this, tr, iColSelected);
      $tdSelected.removeClass("ui-state-highlight");
      if (gridParams.iColByName[selectedCells[rowId]] === iCol) {
          // the current cell will be unselected
          delete selectedCells[rowId];
          return;
      }
  }
  // select the cell
  jQuery(element.target).closest("td").addClass("ui-state-highlight");
  // update column name in mySelection
  selectedCells[rowId] = gridParams.colModel[iCol].name;
},
beforeSelectRow: function(rowId, element) {
  return false;
},

См. Модифицированную демонстрацию https://jsfiddle.net/OlegKi/hwondp71/37/.

...