Extension jQuery EasyUI -DataGrid éditable

jQuery EasyUI 扩展Extension jQuery EasyUI

Utilisation

Créer une grille de données (datagrid) dans des balises HTML

    <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>

Rendre la grille de données (datagrid) éditable

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

Vous pouvez maintenant double-cliquer sur une ligne de la grille de données (datagrid) pour commencer l’édition. Vous pouvez également définir les propriétés saveUrl, updateUrl et destroyUrl pour synchroniser automatiquement les données entre le client et le serveur.

Propriétés

Ces propriétés étendent la grille de données (datagrid). Voici les propriétés ajoutées pour la grille de données éditable (edatagrid).

Name Type Description Valeur par défaut
destroyMsg objet Le message de la boîte de dialogue de confirmation à afficher lors de la destruction d’une ligne. 
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 booléen Lorsqu’elle est définie sur true, la ligne modifiée est automatiquement enregistrée lorsque vous cliquez en dehors de la grille de données. false
url string Une URL pour récupérer des données depuis le serveur. null
saveUrl string Une URL pour enregistrer des données sur le serveur et renvoyer la ligne ajoutée. null
destroyUrl string Une URL pour mettre à jour des données sur le serveur et renvoyer la ligne mise à jour. null
destroyUrl string Une URL pour envoyer le paramètre 'id' au serveur afin de supprimer la ligne. null
tree selector Affiche le sélecteur d'arborescence du composant d'arborescence correspondant. null
treeUrl string Une URL pour récupérer les données de l'arborescence. null
treeDndUrl string Une URL pour gérer les opérations de glisser-déposer. null
treeTextField string Définit le nom du champ texte de l'arborescence. name
treeParentField string Définit le nom du champ du nœud parent de l'arborescence. parentId

Événements

Ces événements étendent ceux de la grille de données (datagrid). Les événements suivants sont ajoutés pour la grille de données modifiable (edatagrid).

Name Parameters Description
onAdd index,row Déclenché lorsqu'une nouvelle ligne est ajoutée.
onEdit index,row Déclenché lorsqu'une ligne est modifiée.
onBeforeSave index Déclenché avant qu'une ligne ne soit enregistrée ; renvoyez false pour annuler l'action d'enregistrement.
onSave index,row Déclenché lorsqu'une ligne est enregistrée.
onDestroy index,row Déclenché lorsqu'une ligne est détruite.
onError index,row Déclenché lorsqu'une erreur serveur se produit.
Le serveur doit renvoyer une ligne avec la propriété 'isError' définie sur true pour indiquer qu'une erreur s'est produite.

Exemple de code :

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

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

Méthodes

Ces méthodes dérivent de la grille de données (datagrid). Voici les méthodes ajoutées ou redéfinies pour la grille de données modifiable (edatagrid).

Name Parameters Description
options none Renvoie l'objet options.
enableEditing none Active la modification de la grille de données (datagrid).
disableEditing none Désactiver l'édition de la grille de données (datagrid).
editRow index Modifier la ligne spécifiée.
addRow index Ajouter une nouvelle ligne à l'index de ligne spécifié.
Si le paramètre index n'est pas spécifié, ajouter une nouvelle ligne à la dernière position.

Exemple de code :

// 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 Enregistrer la ligne modifiée et l'envoyer au serveur.
cancelRow none Annuler l'édition de la ligne.
destroyRow index Détruisez la ligne actuellement sélectionnée.
Si le paramètre index n'est pas spécifié, détruisez toutes les lignes sélectionnées.

Exemple de code :

// 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]);

Télécharger les exemples jQuery EasyUI

jquery-easyui-edatagrid.zip

jQuery EasyUI 扩展Extension jQuery EasyUI Autres extensions