HI, Sto guardando SlickGrid e posso vedere un esempio su come modificare la cella, tuttavia posso salvare queste modifiche. Devo ancora trovare un esempio che mi dice come fare questo.Salvataggio delle modifiche in SlickGrid
Il trucco per salvare SlickGrid consiste nel rendersi conto che la griglia aggiornerà la matrice di dati fornita durante la creazione della griglia man mano che le celle vengono modificate.
Il modo in cui quindi viene salvato è includere un modulo con un pulsante di invio e un campo nascosto sotto la griglia. Intercetto l'evento di invio e utilizzo lo JSON plugin per serializzare l'array e posizionarlo nel campo nascosto. Sul lato server riceverai una stringa JSON che puoi deserializzare, scorrere e scrivere sul database.
Assumendo che l'array di dati si chiama "dati", come i campioni, il seguente dovrebbe funzionare per voi:
<form action="?" method="POST">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script>
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
Mentre sto personalmente utilizzando il serializzare JSON e inviare in un approccio campo nascosto from my previous answer un'altra l'approccio potrebbe essere quello di intercettare l'evento onCellChange generato da SlickGrid dopo che un valore di cella è stato modificato ed effettuare una chiamata Ajax al server per salvare il valore modificato. Ciò comporterà numerose richieste Ajax al server (che potrebbero aumentare il carico) ma aggiorna il server non appena vengono apportate modifiche.
Ho implementato un esempio in questo modo ma preferirei il primo esempio in cui vengono elaborati gli aggiornamenti batch, ma posso vedere i vantaggi di entrambi, sicuramente fantastico vedere che c'è qualcun altro fuori dal mondo che lo utilizza;) – Rubans
Preferisco il metodo batch , ma ho pensato di aggiungere l'altra idea per completezza :) –
Molto meglio e più affidabile del metodo batch imo. – EarlyPoster
Per completezza, un esempio minimale che dimostra l'utilizzo di onCellChange, indicato nel post di Jim OHalloran.
Per ulteriori informazioni e per visualizzare tutti gli eventi che possono essere utilizzati in modo simile a onCellChange, vedere i commenti all'inizio di SlickGrid source.
<head>
<!-- boilerplate omitted ... -->
<script type="text/javascript">
var grid;
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
autoEdit: false,
editable: true,
};
var columns = [
{id: "item_key", name: "Key", field: "item_key" },
{id: "value", name: "value", field: "value", editor: LongTextCellEditor }
];
var data = [
{item_key: "item1", value: "val1"},
{item_key: "item2", value: "val2"},
];
$(document).ready(function() {
grid = new Slick.Grid($("#myGrid"), data, columns, options);
//Earlier code for earlier version of slickgrid
// grid.onCellChange = function (currentRow, currentCell, item) {
// alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']);
//Updated code as per comment.
grid.onCellChange.subscribe(function (e,args) {
console.log(args);
});
};
});
</script>
</head>
<body>
<div id="myGrid" style="height:10em;"> </div>
</body>
L'API per questo metodo è leggermente cambiata: 'grid.onCellChange.subscribe (funzione (É, args) { console.log (argomenti); });' args è un oggetto con la cella, riga l'oggetto griglia e l'oggetto modificato. – Solsys
@Iclark Puoi spiegare come sceglierei come target una cella specifica per un aggiornamento db? Poiché i tuoi dati sono fondamentalmente una coppia di valori chiave in cui la chiave deve corrispondere al valore della chiave del campo della colonna, non vedo come posso fornire un ID univoco del mio elemento di cella in modo che possa corrispondere all'elemento del database? Come posso passare l'ID univoco del mio elemento cella al punto in cui quando eseguo l'aggiornamento DB, aggiorno solo l'elemento dalla cella che è stata modificata e non l'intera griglia? – Marko
buono. Ho usato un'implementazione di javascript hashtable per raccogliere le righe modificate (http://www.mojavelinux.com/articles/javascript_hashes.html) – Amit
HI Jim, è l'idea con cui sono andato. Pensavo ci fossero forse altre implementazioni ma non lo so. Va bene, grazie. – Rubans
Questo appena mi porta una griglia vuota dopo faccio clic sul pulsante Salva. Che cosa sto facendo di sbagliato? – randomizertech
Voglio solo aggiungere che l'uso predefinito del browser ['JSON.stringify'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) dovrebbe andare bene questi giorni. Non è necessario eseguire il percorso del plugin jQuery a meno che non sia necessario supportare alcuni browser molto vecchi. – user128216