jQuery EasyUI-Erweiterung -Editierbares DataGrid

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung

Nutzung

Erstellen Sie ein Datenraster (datagrid) in HTML-Tags

    <table id="tt" style="width:600px;height:200px"
            title="Editable DataGrid"
            singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
                <th field="productid" width="100" editor="text">Product ID</th>
                <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
                <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
                <th field="attr1" width="150" editor="text">Attribute</th>
            </tr>
        </thead>
    </table>

Machen Sie das Datenraster (datagrid) editierbar

$('#tt').edatagrid({
    url: 'datagrid_data.json',
    saveUrl: ...,
    updateUrl: ...,
    destroyUrl: ...
});

Jetzt können Sie auf eine Zeile des Datenrasters doppelklicken, um mit der Bearbeitung zu beginnen. Sie können auch die Eigenschaften saveUrl, updateUrl und destroyUrl festlegen, um Daten automatisch zwischen Client und Server zu synchronisieren.

Eigenschaften

Diese Eigenschaften sind vom Datenraster (datagrid) abgeleitet. Die folgenden Eigenschaften wurden für das editierbare Datenraster (edatagrid) hinzugefügt.

Name Type Beschreibung Standardwert
destroyMsg Objekt Die Meldung im Bestätigungsdialog, die beim Löschen einer Zeile angezeigt wird. 
destroyMsg:{
    norecord:{    // when no record is selected
        title:'Warning',
        msg:'No record is selected.'
    },
    confirm:{    // when select a row
        title:'Confirm',
        msg:'Are you sure you want to delete?'
    }
}
autoSave boolesch Wenn auf true gesetzt, wird die bearbeitete Zeile automatisch gespeichert, wenn außerhalb des Datenrasters geklickt wird. false
url string Eine URL zum Abrufen von Daten vom Server. null
saveUrl string Eine URL, um Daten auf dem Server zu speichern und die hinzugefügte Zeile zurückzugeben. null
updateUrl string Eine URL, um Daten auf dem Server zu aktualisieren und die aktualisierte Zeile zurückzugeben. null
destroyUrl string Eine URL, um den Parameter 'id' an den Server zu senden, um die Zeile zu löschen. null
tree selector Zeigt die Baumauswahl der entsprechenden Baumkomponente an. null
treeUrl string Eine URL zum Abrufen der Baumdaten. null
treeDndUrl string Eine URL zum Verarbeiten von Drag-and-Drop-Vorgängen. null
treeTextField string Definiert den Namen des Textfelds des Baums. name
treeParentField string Definiert den Feldnamen des übergeordneten Knotens des Baums. parentId

Ereignisse

Diese Ereignisse erweitern das Data Grid (datagrid). Die folgenden Ereignisse wurden für das editierbare Data Grid (edatagrid) hinzugefügt.

Name Parameters Beschreibung
onAdd index,row Wird ausgelöst, wenn eine neue Zeile hinzugefügt wird.
onEdit index,row Wird ausgelöst, wenn eine Zeile bearbeitet wird.
onBeforeSave index Wird ausgelöst, bevor eine Zeile gespeichert wird; geben Sie false zurück, um den Speichervorgang abzubrechen.
onSave index,row Wird ausgelöst, wenn eine Zeile gespeichert wird.
onDestroy index,row Wird ausgelöst, wenn eine Zeile zerstört wird.
onError index,row Wird ausgelöst, wenn ein Serverfehler auftritt.
Der Server sollte eine Zeile mit der auf true gesetzten Eigenschaft 'isError' zurückgeben, um anzuzeigen, dass ein Fehler aufgetreten ist.

Codebeispiel:

//server side code
echo json_encode(array(
    'isError' => true,
    'msg' => 'error message.'
));

//client side code
$('#dg').edatagrid({
    onError: function(index,row){
        alert(row.msg);
    }
});

Methoden

Diese Methoden erben vom Datenraster (datagrid). Die folgenden Methoden wurden für das editierbare Datenraster (edatagrid) hinzugefügt oder überschrieben.

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
enableEditing none Aktiviert die Bearbeitung des Datenrasters (datagrid).
disableEditing none Deaktiviert die Bearbeitung des Datenrasters (datagrid).
editRow index Bearbeitet die angegebene Zeile.
addRow index Fügt eine neue Zeile am angegebenen Zeilenindex hinzu.
Wenn der Indexparameter nicht angegeben ist, wird eine neue Zeile an der letzten Position angehängt.

Codebeispiel:

// append an empty row
$('#dg').edatagrid('addRow');

// append an empty row as first row
$('#dg').edatagrid('addRow',0);

// insert a row with default values
$('#dg').edatagrid('addRow',{
    index: 2,
    row:{
        name:'name1',
        addr:'addr1'
    }
});
saveRow none Speichert die bearbeitete Zeile und sendet sie an den Server.
cancelRow none Bricht die Bearbeitung der Zeile ab.
destroyRow index Löscht die aktuell ausgewählte Zeile.
Wenn der Parameter index nicht angegeben ist, werden alle ausgewählten Zeilen gelöscht.

Codebeispiel:

// destroy all the selected rows
$('#dg').edatagrid('destroyRow');

// destroy the first row
$('#dg').edatagrid('destroyRow', 0);

// destroy the specified rows
$('#dg').edatagrid('destroyRow', [3,4,5]);

jQuery EasyUI-Beispiele herunterladen

jquery-easyui-edatagrid.zip

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung Weitere Erweiterungen