Slickgrid - ¿Casillas de verificación con un solo clic?

Question

Cuando creo una columna de casilla de verificación (mediante el uso de formateadores/editores) en Slickgrid, he notado que se necesitan dos clics para interactuar con ella (una para enfocar la celda y otra para interactuar con la casilla de verificación). (Lo cual tiene perfecto sentido)

Sin embargo, me he dado cuenta de que puedo interactuar con el complemento de selectores de casilla de verificación (para seleccionar varias filas) con un solo clic. ¿Hay alguna forma en que pueda hacer que TODAS mis casillas de verificación se comporten de esta manera?

Answer 1

que utiliza el evento onBeforeEditCell para lograr esto para mi campo booleano 'can_transmit'

capturar Básicamente una edición celular clic en la columna que desea, realizar el cambio usted mismo, entonces return false para detener la edición celular evento.

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; 
      } 

Esto funciona para mí. Sin embargo, si está utilizando la función DataView (por ejemplo, filtrado), hay trabajo adicional para actualizar la vista de datos con este cambio. Todavía no he resuelto cómo hacerlo ...

Answer 2

Registre un controlador para el evento "onClick" y realice los cambios en los datos allí. Ver http://mleibman.github.com/SlickGrid/examples/example7-events.html

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

Answer 3

He conseguido un solo clic editor de trabajo en lugar hackishly con DataView llamando

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

en mi función CheckBoxCellEditor, y llamando Slick.GlobalEditorLock.commitCurrentEdit(); cuando se hace clic en la casilla de verificación CheckBoxCellEditor creado (por ese setTimeout).

El problema es que se hace clic en la casilla de verificación CheckBoxCellFormatter, luego ese evento genera el código CheckBoxCellEditor, que reemplaza la casilla con una nueva. Si simplemente llama a jquery's .click() en ese selector, activará nuevamente el evento CheckBoxCellEditor debido a que slickgrid no ha liberado el controlador que lo llevó allí en primer lugar. El setTimeout dispara el clic después de eliminar ese controlador (me preocupaban los problemas de sincronización, pero no pude generar ninguno en ningún navegador).

Lo siento, no pude proporcionar ningún código de ejemplo, el código que tengo es específico de la implementación para ser útil como una solución general.

Answer 4

La única manera en que encontré la solución es editando el complemento slick.checkboxselectcolumn.js. Me gustó el método de suscripción, pero no me ha conectado ningún oyente a los botones de opción.

Así que lo que hice es editar las funciones handleClick (E, args) & handleHeaderClick (e), args. Agregué llamadas a función, y en mi archivo js hice lo que quería con él.

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); 
     } 
     ... 
    } 
} 

Código

pastebin.com/22snHdrw

Buscar mi nombre de usuario en los comentarios

Answer 5

Para los lectores futher He resuelto este problema mediante modifing los datos propia red de haga clic en evento. Estableciendo el valor booleano en opuesto y luego el formateador mostrará la casilla de verificación cliqueada o no.

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

Espero que ayude.

Answer 6

La forma en que lo hice es bastante directa.

1. El primer paso es que hay que desactivar el manejador editor para su casilla. En mi proyecto se ve algo como esto. Tengo un slickgridhelper.js para registrar complementos y trabajar con ellos.

   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. El siguiente paso es registrar un manejador de evento de clic en la página de su encargo js que se está desarrollando.

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); 
 
     } 
 
    });

Ahora un solo clic es suficiente para cambiar el valor de su casilla de verificación y persistir él.