Slickgrid - флажки с одним щелчком мыши?

Ответ 1

Для будущих читателей я решил эту проблему, изменив сами данные сетки на событие click. Установка значения boolean в противоположную сторону, а затем форматирование будет отображаться с помощью щелчка или unclicked.

grid.onClick.subscribe (function (e, args)
{
    if ($(e.target).is(':checkbox') && options['editable'])
    {
        var column = args.grid.getColumns()[args.cell];

        if (column['editable'] == false || column['autoEdit'] == false)
            return;

        data[args.row][column.field] = !data[args.row][column.field];
    }  
});

function CheckboxFormatter (row, cell, value, columnDef, dataContext)
{
    if (value)
        return '<input type="checkbox" name="" value="'+ value +'" checked />';
    else
        return '<input type="checkbox" name="" value="' + value + '" />';
}

Надеюсь, что это поможет.

Ответ 2

То, как я это сделал, довольно прямолинейно.

• Прежде всего вам нужно отключить обработчик редактора для вашего флажка. В моем проекте это выглядит примерно так. У меня есть slickgridhelper.js для регистрации плагинов и работы с ними.

  function attachPluginsToColumns(columns) {
      $.each(columns, function (index, column) {
          if (column.mandatory) {
              column.validator = requiredFieldValidator;
          }
          if (column.editable) {
              if (column.type == "text" && column.autocomplete) {
                  column.editor = Slick.Editors.Auto;
              }
              else if (column.type == "checkbox") {
                  //Editor has been diasbled.   
                  //column.editor = Slick.Editors.Checkbox;
                  column.formatter = Slick.Formatters.Checkmark;
              }
          }
      });    
  

• Следующий шаг - зарегистрировать обработчик события onClick на вашей настраиваемой странице js, которую вы разрабатываете.

grid.onClick.subscribe(function (e, args) {

        var row = args.grid.getData().getItems()[args.row];
        var column = args.grid.getColumns()[args.cell];

        if (column.editable && column.type == "checkbox") {
            row[column.field] = !row[column.field];
            refreshGrid(grid);
        }
    });

Ответ 3

Зарегистрируйте обработчик для события onClick и внесите изменения в данные. См. http://mleibman.github.com/SlickGrid/examples/example7-events.html

grid.onClick.subscribe(function(e, args) {
    var checkbox = $(e.target);
    // do stuff
});

Ответ 4

Единственный способ, которым я нашел решение - отредактировать плагин slick.checkboxselectcolumn.js. Мне понравился метод подписки, но он не привязал ко мне никакого прослушивателя к переключателям.

Итак, я сделал, чтобы отредактировать функции handleClick (e, args) и handleHeaderClick (e, args). Я добавил вызовы функций, и в моем js файле я просто сделал то, что хотел с ним.

function handleClick(e, args) {
    if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
        ......
        //my custom line
        callCustonCheckboxListener();
        ......
    }
}

function handleHeaderClick(e, args) {
    if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
        ...
        var isETargetChecked = $(e.target).is(":checked");
        if (isETargetChecked) {
            ...
            callCustonHeaderToggler(isETargetChecked);
        } else {
            ...
            callCustonHeaderToggler(isETargetChecked);
        }
        ...
    }
}

код

pastebin.com/22snHdrw

Поиск моего имени пользователя в комментариях

Ответ 5

Я использовал событие onBeforeEditCell для достижения этого для моего логического поля can_transmit

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

grid.onBeforeEditCell.subscribe(function(row, cell) {                
            if (grid.getColumns()[cell.cell].id == 'can_transmit') {
                if (data[cell.row].can_transmit) {
                   data[cell.row].can_transmit = false;
                }
                else {
                    data[cell.row].can_transmit = true;
                }
                grid.updateRow(cell.row);
                grid.invalidate();
                return false;
            }

Это работает для меня. Однако, если вы используете функцию DataView (например, фильтрацию), есть дополнительная работа по обновлению dataview с этим изменением. Я еще не понял, как это сделать...

Ответ 6

Мне удалось получить один редактор кликов, который довольно хакерски работал с DataView, вызывая

setTimeout(function(){ $("theCheckBox").click(); },0);

в моей функции CheckBoxCellEditor и вызывая Slick.GlobalEditorLock.commitCurrentEdit(); при щелчке флажка CheckBoxCellEditor (с помощью этого setTimeout).

Проблема в том, что на флажке CheckBoxCellFormatter щелкнули, тогда это событие порождает код CheckBoxCellEditor, который заменяет этот флажок на новый. Если вы просто вызываете jquery.click() в этом селекторе, вы снова будете запускать событие CheckBoxCellEditor из-за того, что slickgrid не отменил обработчик, который доставил вас туда в первую очередь. SetTimeout запускает клик после удаления обработчика (я беспокоился о проблемах с синхронизацией, но я не смог создать ни одного в любом браузере).

Извините, я не мог предоставить какой-либо пример кода, код, который у меня есть, - это конкретная реализация, которая будет полезной в качестве общего решения.