javascript - dojo dgrid múltiples células editar
(0)
¿Es posible editar varias celdas de la cuadrícula al mismo tiempo?
Sé que podemos editar una sola célula a la vez haciendo doble clic en esa celda y actualizándola. Y en el onBlur
de esa celda, los datos editados se actualizan para esa celda.
Pero mi requisito es:
- haga clic en Editar enlace / Editar botón para cada fila, que mostrará los editores de todas las celdas editables de esa fila,
- actualizar / editar las celdas,
- luego haz clic en el botón guardar (que estará al lado del botón editar) para esa misma fila,
- Al hacer clic en el enlace / icono Guardar, el valor de la celda editada debe guardarse en la tienda / servidor.
A continuación se muestran algunas de las columnas de la Grilla.
// one of the editable columns others are also similar to this one..
editor({
label:"Outcome",
field:"outcome",
sortable: false,
editorArgs: {
options:[
{value: "1", label: "Opt1"},
{value: "2", label: "Opt2"},
{value: "3", label: "Opt3"},
]
},
renderCell: function(row, value, td, options){
put(td, "div", outcomeOptionsMap[value] || '''');
}
}, Select, "dblclick" ),
// last column
{label:"Actions", field:"actions",sortable: false,
renderCell: function(row, value, td, options){
newValue = "<a href=/"#/" title=/"Edit/" onclick=''editEntireRow(testgrid,event);''><img src=''../static/images/edit.gif''/></a>";
newValue = "<a href=/"#/" title=/"Save/" onclick=''saveRow(testgrid,event);''><img src=''../static/images/edit.gif''/></a>";
newValue += " <a href=/"#/" title=/"Delete/" onclick=''testgrid.store.remove("+row.id+");''><img src=''../static/images/delete_icon.png''/></a>";
td.innerHTML = newValue;
}
Por cierto, estoy usando el dojo.store.JsonRest como tienda.
Declaración de cuadrícula
var MyGrid = declare([Grid, Selection, Keyboard]);
window.testgrid = new MyGrid(
{
store : Observable(Cache(jsonRest, Memory())),
selectionMode : "none",
getBeforePut: false,
columns: getColumns,
allowSelectAll: true,
minRowsPerPage: 5,
maxRowsPerPage: 20,
}, "gridContainer");
Actualmente estoy intentando algo como esto, pero no funciona ...
function editEntireRow(grid,event){
// cols 3,5,7,8 steps to the left of the Action column are editable
grid.edit(grid.left(grid.cell(event),3));
grid.edit(grid.left(grid.cell(event),5));
grid.edit(grid.left(grid.cell(event),7));
//grid.edit(grid.left(grid.cell(event),8));
}