jQuery EasyUI griglia di dati - consente la modifica in linea
Funzione modificabile recentemente aggiunto alla griglia di dati (DataGrid) di. Esso consente all'utente di aggiungere una nuova riga alla griglia di dati (DataGrid). Gli utenti possono inoltre aggiornare una o più righe.
Questo tutorial vi mostra come creare una griglia di dati (DataGrid) e redattore in linea.
La creazione di una griglia di dati (DataGrid)
$ (Function () {
$ ( '# Tt'). DataGrid ({
Titolo: 'modificabile DataGrid',
iconCls: 'icona-edit',
Larghezza: 660,
altezza: 250,
singleSelect: vero,
idField: 'Itemid',
URL: 'datagrid_data.json',
colonne: [[
{Campo: 'Itemid', titolo: 'ID dell'oggetto', Larghezza: 60},
{Campo: 'IDProdotto', titolo: 'Prodotto', width: 100,
formattatore: function (value) {
for (var i = 0; i <products.length; i ++) {
se (prodotti [i] .productid == valore) prodotti di ritorno [i] .name;
}
valore di ritorno;
},
Editor: {
Tipo: 'combobox',
Opzioni: {
ValueField: 'ProductID',
textField: 'nome',
dati: prodotti,
richiesta: true
}
}
},
{Campo: 'Prezzo di listino', titolo: 'Listino', Larghezza: 80, allineare: 'destra', redattore: {type: 'numberbox', opzioni: {precisione: 1}}},
{Campo: 'Costounitario', titolo: 'Costo unitario', Larghezza: 80, allineare: 'destra', editore: 'numberbox'},
{Campo: 'attr1', titolo: 'attributo', Larghezza: 150, editor di: 'text'},
{Campo: 'status', titolo: 'Stato', Larghezza: 50, allineare: 'centro',
Editor: {
Tipo: 'casella',
Opzioni: {
on: 'P',
off: ''
}
}
},
{Campo: 'action', titolo: 'Azione', Larghezza: 70, allineare: 'centro',
formattatore: la funzione (valore, fila, index) {
if (row.editing) {
var s = '<a href="#" onclick="saverow(this)"> Salva </a>';
var c = '<a href="#" onclick="cancelrow(this)"> Cancellare </a>';
ritorno s + c;
} Else {
var e = '<a href="#" onclick="editrow(this)"> Edit </a>';
var d = '<a href="#" onclick="deleterow(this)"> Delete </a>';
tornare e + d;
}
}
}
]],
onBeforeEdit: la funzione (indice, riga) {
row.editing = true;
updateActions (indice);
},
onAfterEdit: la funzione (indice, riga) {
row.editing = false;
updateActions (indice);
},
onCancelEdit: la funzione (indice, riga) {
row.editing = false;
updateActions (indice);
}
});
});
updateActions funzione (indice) {
$ ( '# Tt'). DataGrid ( 'updateRow', {
Indice: indice,
fila: {}
});
}
Per attivare la griglia di modifica dei dati in linea, si dovrebbe aggiungere una proprietà alla colonna editore. Editor (redattore) dice a Data Grid (DataGrid) Come modificare il campo e come salvare il valore del campo. Come si può vedere, tre editor (a cura di) Definiamo: testo, casella combinata e casella di controllo.
Funzione getRowIndex (target) {
var TR = $ (target) .closest ( '-fila tr.datagrid');
tornare parseInt (tr.attr ( 'datagrid-fila-index'));
}
Funzione editrow (target) {
$ ( '# Tt') DataGrid ( 'BeginEdit', getRowIndex (target)) .;
}
Funzione DeleteRow (target) {
$ .messager.confirm ( 'Conferma', 'Sei sicuro?', Funzione (r) {
if (r) {
$ ( '# Tt') DataGrid ( 'deleteRow', getRowIndex (target)) .;
}
});
}
Funzione saverow (target) {
$ ( '# Tt') DataGrid ( 'EndEdit', getRowIndex (target)) .;
}
Funzione cancelrow (target) {
$ ( '# Tt') DataGrid ( 'CancelEdit', getRowIndex (target)) .;
}
