Slickgrid - флажки в один клик?

Question

Когда я создал столбец флажка (с помощью средств форматирования / редактирования) в Slickgrid, я заметил, что для взаимодействия с ним требуется два щелчка (один для фокусировки на ячейке и один для взаимодействия с флажком). (Что имеет смысл)

Однако я заметил, что могу взаимодействовать с плагином селекторов флажков (для выбора нескольких строк) одним щелчком мыши. Есть ли способ заставить ВСЕ мои флажки вести себя таким образом?

Answer 1

Для дальнейших читателей я решил эту проблему, изменив сами данные сетки при событии нажатия. Если установить логическое значение на противоположное, а затем в модуле форматирования появится флажок «нажата или не нажата».

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 + '" />';
}

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

Answer 2

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

1. Первый шаг - отключить обработчик редактора для вашего флажка.В моем проекте это выглядит примерно так.У меня есть 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;
               }
           }
       });    
   

2. Следующим шагом является регистрация обработчика события 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);
        }
    });

Теперь достаточно одного клика, чтобы изменить значение вашего флажка и сохранить его.

Answer 3

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

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

Answer 4

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

Поэтому я редактировал функции handleClick (e, args) & handleHeaderClick (e, args) .Я добавил вызовы функций, и в своем js-файле я просто сделал с ним то, что хотел.pastebin.com/22snHdrw

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

Answer 5

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

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

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

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

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

Answer 6

Я использовал событие 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 (например, фильтрацию), есть дополнительная работа по обновлению представления данных с этим изменением. Я еще не понял, как это сделать ...