javascript - full - jqGrid con una columna de casilla de verificación editable
jqgrid jquery example (6)
He compartido un código completo en el siguiente enlace, puede echar un vistazo si lo necesita.
Al usar jqGrid, ¿cómo fuerza que una celda se cargue en su vista editable en la carga de la página, así como cuando se hace clic en ella?
Si configura ''edición de celda'' como a continuación, la casilla de verificación solo aparece cuando hace clic en la celda.
{ name: ''MyCol'', index: ''MyCol'', editable:true, edittype:''checkbox'', editoptions: { value:"True:False" },
cellEdit:true,
También al hacer clic en la casilla de verificación, ¿hay alguna manera de enviar una publicación de AJAX al servidor de forma instantánea en lugar de tener que confiar en que el usuario presione enter?
Para permitir que las casillas de verificación siempre puedan hacer clic, use la propiedad disabled del formateador de casilla de verificación:
{ name: ''MyCol'', index: ''MyCol'',
editable:true, edittype:''checkbox'', editoptions: { value:"True:False"},
formatter: "checkbox", formatoptions: {disabled : false} , ...
Para responder a su segunda pregunta, deberá configurar un controlador de eventos para las casillas de verificación, de modo que cuando se haga clic en una función se llame, por ejemplo, para enviar una POST AJAX al servidor. Aquí hay un código de ejemplo para comenzar. Puede agregar esto al evento loadComplete :
// Assuming check box is your only input field:
jQuery(".jqgrow td input").each(function(){
jQuery(this).click(function(){
// POST your data here...
});
});
Este es uno antiguo pero tiene mucha vista, así que decidí agregar mi solución aquí también.
Hago uso de la función .delegate de JQuery para crear una implementación de enlace tardía que lo liberará de la obligación de utilizar el evento loadComplete.
Solo agregue lo siguiente:
$(document).delegate(''#myGrid .jqgrow td input'', ''click'', function () { alert(''aaa''); });
Esto vinculará tarde ese manejador a cada casilla que esté en las filas de la grilla. Puede tener un problema aquí si tiene más de una columna de casilla de verificación.
Tuve el mismo problema y supongo que encontré una buena solución para manejar la casilla de verificación, haga clic inmediatamente. La idea principal es activar el método editCell cuando el usuario hace clic en la casilla de verificación no editable. Aquí está el código:
jQuery(".jqgrow td").find("input:checkbox").live(''click'', function(){
var iRow = $("#grid").getInd($(this).parent(''td'').parent(''tr'').attr(''id''));
var iCol = $(this).parent(''td'').parent(''tr'').find(''td'').index($(this).parent(''td''));
//I use edit-cell class to differ editable and non-editable checkbox
if(!$(this).parent(''td'').hasClass(''edit-cell'')){
//remove "checked" from non-editable checkbox
$(this).attr(''checked'',!($(this).attr(''checked'')));
jQuery("#grid").editCell(iRow,iCol,true);
}
});
Excepto esto, debe definir eventos para su grilla:
afterEditCell: function(rowid, cellname, value, iRow, iCol){
//I use cellname, but possibly you need to apply it for each checkbox
if(cellname == ''locked''){
//add "checked" to editable checkbox
$("#grid").find(''tr:eq(''+iRow+'') td:eq(''+iCol+'') input:checkbox'').attr(''checked'',!($("#regions").find(''tr:eq(''+iRow+'') td:eq(''+iCol+'') input:checkbox'').attr(''checked'')));
//trigger request
jQuery("#grid").saveCell(iRow,iCol);
}
},
afterSaveCell: function(rowid, cellname, value, iRow, iCol){
if(cellname == ''locked''){
$("#grid").find(''tr:eq(''+iRow+'') td:eq(''+iCol+'')'').removeClass(''edit-cell'');
}
},
Luego, su casilla de verificación enviará solicitudes de edición cada vez que el usuario haga clic en ella.
Tengo una función de envío que envía todas las filas de la grilla al servidor web.
Resolví este problema usando este código:
var checkboxFix = [];
$("#jqTable td[aria-describedby=''columnId''] input").each(function () {
checkboxFix.push($(this).attr(''checked''));
});
Luego mezclé con los valores obtenidos del código a continuación.
$("#jqTable").jqGrid(''getGridParam'', ''data'');
Espero que esto ayude a alguien.
Mejor solución:
<script type="text/javascript">
var boxUnformat = function ( cellvalue, options, cell ) { return ''-1''; },
checkboxTemplate = {width:40, editable:true,
edittype: "checkbox", align: "center", unformat: boxUnformat,
formatter: "checkbox", editoptions: {"value": "Yes:No"},
formatoptions: { disabled: false }};
jQuery(document).ready(function($) {
$(document).on(''change'', ''input[type="checkbox"]'', function(e){
var td = $(this).parent(), tr = $(td).parent(),
checked = $(this).attr(''checked''),
ids = td.attr(''aria-describedby'').split(''_''),
grid = $(''#''+ids[0]),
iRow = grid.getInd(tr.attr(''id''));
iCol = tr.find(''td'').index(td);
grid.editCell(iRow,iCol,true);
$(''input[type="checkbox"]'',td).attr(''checked'',!checked);
grid.saveCell(iRow,iCol);
});
});
</script>
En tu colmodelo:
...
{name:''allowAccess'', template: checkboxTemplate},
...