l'application jQuery EasyUI - créer la grille de données CRUD
Dans la section précédente, nous utilisons les composants de dialogue (dialogue) pour créer une application CRUD pour créer et modifier les informations de l'utilisateur. Ce tutoriel va vous montrer comment créer une grille de données CRUD (DataGrid). Nous allons utiliser la grille de données modifiable (DataGrid) plug-in pour effectuer ces actions opérations CRUD.
Étape 1: Définir la grille de données de balises HTML (DataGrid)
<Table id = title "dg" style = "Mes utilisateurs" = "width: 550px; height: 250px" barre d'outils = "# barre d'outils" = zone ID "id" rownumbers = "true" fitColumns = "true" singleSelect = "true"> <Thead> <Tr> <Th field = "prenom" width = éditeur "50" = "{type: 'validatebox' options: {required: true}}"> Prénom </ th> <Th champ = width = éditeur "lastname" "50" = "{type: 'validatebox' options: {required: true}}"> Nom </ th> <Th field = "phone" width = éditeur "50" = "text"> Téléphone </ th> <Th field = "email" width = éditeur "50" = "{type: 'validatebox' options: {VALIDTYPE: 'email'}}"> Email </ th> </ Tr> </ Thead> </ Table> <Div id = "toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')"> Nouveau </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')"> Destroy </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')"> Enregistrer </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')"> Annuler </ a> </ Div>
Étape 2: Utilisez la grille de données modifiable (DataGrid)
$ ( '# Dg'). Edatagrid ({ url: 'get_users.php', saveURL: 'save_user.php', updateURL: 'update_user.php', destroyUrl: 'destroy_user.php' });
Nous devrions offrir 'url', 'saveURL', 'updateURL' et attribut 'destroyUrl' pour modifier la grille de données (DataGrid):
- url: récupérer les données d'utilisateur à partir du serveur.
- saveURL: enregistrer de nouvelles données de l'utilisateur.
- updateURL: mise à jour des données d'utilisateurs existants.
- destroyUrl: Pour supprimer des données d'utilisateurs existants.
Étape 3: Ecriture code serveur de traitement
Enregistrer un nouvel utilisateur (save_user.php):
$ Prenom = $ _REQUEST [ 'prenom']; $ Nom = $ _REQUEST [ 'nom']; $ Téléphone = $ _REQUEST [ 'phone']; $ Email = $ _REQUEST [ 'email']; inclure 'conn.php'; $ Sql = "insérer dans les utilisateurs (nom, prénom, téléphone, email) valeurs ( '$ prenom', '$ lastname', '$ téléphone', '$ email')"; @mysql_query ($ sql); json_encode écho (array ( 'Id' => mysql_insert_id (), 'Prenom' prenom => $, 'Nom' => $ lastname, 'Téléphone' => $ téléphone, 'Email' => $ email ));
Mettre à jour un utilisateur existe déjà (update_user.php):
$ Id = intval ($ _ REQUEST [ 'id']); $ Prenom = $ _REQUEST [ 'prenom']; $ Nom = $ _REQUEST [ 'nom']; $ Téléphone = $ _REQUEST [ 'phone']; $ Email = $ _REQUEST [ 'email']; inclure 'conn.php'; $ Sql = "utilisateurs de mise à jour définie = firstname '$ prenom', = lastname '$ lastname', téléphone = '$ téléphone', email = '$ email' où id = $ id"; @mysql_query ($ sql); json_encode écho (array ( 'Id' => $ id, 'Prenom' prenom => $, 'Nom' => $ lastname, 'Téléphone' => $ téléphone, 'Email' => $ email ));
Pour supprimer un utilisateur existe déjà (destroy_user.php):
$ Id = intval ($ _ REQUEST [ 'id']); inclure 'conn.php'; $ Sql = "supprimer des utilisateurs où id = $ id"; @mysql_query ($ sql); json_encode écho (array ( 'success' => true));