aplikasi jQuery EasyUI - membuat data grid CRUD
Pada bagian sebelumnya, kita menggunakan dialog (dialog) komponen untuk membuat aplikasi CRUD untuk membuat dan mengedit informasi pengguna. Tutorial ini akan menunjukkan cara untuk membuat data grid CRUD (datagrid). Kami akan menggunakan diedit data grid (datagrid) plug-in untuk menyelesaikan tindakan ini operasi CRUD.
Langkah 1: Tentukan data grid tag HTML (datagrid)
<Table id = "dg" title = "Pengguna My" style = "width: 550px; height: 250px" toolbar = "# toolbar" idfield = "id" rownumbers = "true" fitColumns = "true" singleSelect = "true"> <Thead> <Tr> <Th field = "firstname" width = "50" editor = "{type: 'validatebox', pilihan: {diperlukan: true}}"> Nama Pertama </ th> <Th field = "lastname" width = "50" editor = "{type: 'validatebox', pilihan: {diperlukan: true}}"> Nama terakhir </ th> <Th field = "telepon" width = "50" editor = "text"> Telepon </ th> <Th field = "email" width = "50" editor = "{type: 'validatebox', pilihan: {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')"> New </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')"> Hancurkan </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')"> Simpan </ a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')"> Batal </ a> </ Div>
Langkah 2: Gunakan diedit data grid (datagrid)
$ ( '# Dg'). Edatagrid ({ url: 'get_users.php', saveUrl: 'save_user.php', updateUrl: 'update_user.php', destroyUrl: 'destroy_user.php' });
Kami harus menawarkan 'url', 'saveUrl', 'updateUrl' dan atribut 'destroyUrl' untuk mengedit data grid (datagrid):
- url: mengambil data pengguna dari server.
- saveUrl: menyimpan data pengguna baru.
- updateUrl: memperbarui data pengguna yang sudah ada.
- destroyUrl: Untuk menghapus data pengguna yang sudah ada.
Langkah 3: Menulis kode pengolahan Server
Menyimpan pengguna baru (save_user.php):
$ Nama depan = $ _REQUEST [ 'firstname']; $ Namabelakang = $ _REQUEST [ 'lastname']; $ Phone = $ _REQUEST [ 'telepon']; $ Email = $ _REQUEST [ 'email']; termasuk 'conn.php'; $ Sql = "masukkan ke pengguna (nama depan, nama belakang, telepon, email) nilai ( '$ firstname', '$ nama belakang', '$ telepon', '$ email')"; @mysql_query ($ sql); json_encode echo (array ( 'Id' => mysql_insert_id (), 'Nama depan' => $ firstname, 'Nama belakang' => $ nama belakang, 'Telepon' => $ telepon, 'Email' => $ email ));
Informasi pengguna sudah ada (update_user.php):
$ Id = intval ($ _ REQUEST [ 'id']); $ Nama depan = $ _REQUEST [ 'firstname']; $ Namabelakang = $ _REQUEST [ 'lastname']; $ Phone = $ _REQUEST [ 'telepon']; $ Email = $ _REQUEST [ 'email']; termasuk 'conn.php'; $ Sql = "pengguna pembaruan set = firstname '$ firstname', = lastname '$ nama belakang', telepon = '$ telepon', email = '$ email' di mana id = $ id"; @mysql_query ($ sql); json_encode echo (array ( 'Id' => $ id, 'Nama depan' => $ firstname, 'Nama belakang' => $ nama belakang, 'Telepon' => $ telepon, 'Email' => $ email ));
Untuk menghapus pengguna sudah ada (destroy_user.php):
$ Id = intval ($ _ REQUEST [ 'id']); termasuk 'conn.php'; $ Sql = "menghapus dari pengguna di mana id = $ id"; @mysql_query ($ sql); gema json_encode (array ( 'sukses' => true));