() translation by (you can also view the original English article)
Dalam pelajaran ini, kita akan membuat pustaka CodeIgniter yang memungkinkan kita untuk menghasilkan data grid secara otomatis untuk mengelola tabel database apa pun. Saya akan menjelaskan setiap langkah yang diperlukan untuk membuat kelas ini; jadi Anda mungkin akan mempelajari beberapa teknik/konsep OOP baru dalam prosesnya!
Sebagai bonus, kita akan terus menulis beberapa kode jQuery yang akan memungkinkan pengguna untuk memperbarui konten kisi data tanpa harus menunggu penyegaran halaman.
Harap dicatat...
Tutorial ini mengasumsikan bahwa Anda memiliki pemahaman sederhana tentang framework CodeIgniter dan jQuery.
Apa itu Data Grid?
Datagrid adalah tabel yang menampilkan konten database atau tabel bersama dengan kontrol penyortiran.
Sebuah datagrid adalah tabel yang menampilkan isi dari database atau tabel bersama dengan kontrol penyortiran. Dalam tutorial ini, kita akan diberi tugas untuk menyediakan fungsionalitas ini, tetapi juga menyelamatkan pengguna dari menunggu halaman diperbarui setiap kali operasi dilakukan. Berkat jQuery, ini akan menjadi tugas yang cukup sederhana!
Bagaimana dengan pengguna yang tidak mengaktifkan Javascript? Jangan khawatir, kita akan menggantinya juga!
Langkah 1: Membuat Kelas Generator Data Grid
Kita ingin membuat alat yang memungkinkan membuat datagrid secara dinamis untuk tabel database apa pun yang dimiliki. Ini berarti kode tidak terikat pada struktur tabel tertentu, dan, dengan demikian, tidak tergantung pada data itu sendiri. Semua pembuat kode (pengembang yang menggunakan kelas kita) harus tahu adalah nama tabel yang akan diubah menjadi kisi dan kunci utama untuk tabel itu. Inilah pengantar kelas yang akan dikembangkan untuk sebagian besar tutorial ini:
1 |
<?php
|
2 |
class Datagrid{ |
3 |
private $hide_pk_col = true; |
4 |
private $hide_cols = array(); |
5 |
private $tbl_name = ''; |
6 |
private $pk_col = ''; |
7 |
private $headings = array(); |
8 |
private $tbl_fields = array(); |
9 |
}
|
10 |
?>
|
Kelas Datagrid bisa ditambahkan ke folder aplikasi/perpustakaan, tetapi kita akan menambahkannya sebagai penolong ke framework CodeIgniter. Kenapa? Karena memuat pustaka tidak memungkinkan kita meneruskan argumen ke konstruktor kelas, maka memuatnya sebagai penolong akan menyelesaikan masalah. Poin ini akan lebih masuk akal bagi Anda ketika kita selesai menulis konstruktor.
Metode Konstruktor Kelas
1 |
public function __construct($tbl_name, $pk_col = 'id'){ |
2 |
$this->CI =& get_instance(); |
3 |
$this->CI->load->database(); |
4 |
$this->tbl_fields = $this->CI->db->list_fields($tbl_name); |
5 |
if(!in_array($pk_col,$this->tbl_fields)){ |
6 |
throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'"); |
7 |
}
|
8 |
$this->tbl_name = $tbl_name; |
9 |
$this->pk_col = $pk_col; |
10 |
$this->CI->load->library('table'); |
11 |
|
12 |
}
|
Kita sudah banyak melakukan hal ini; tapi jangan khawatir, karena saya akan menjelaskan semuanya untuk Anda di paragraf berikutnya.
Konstruktor mengambil dua argumen: yang pertama adalah nama tabel dalam database yang ingin Anda tampilkan sebagai datagrid kepada pengguna; param kedua adalah nama kolom yang berfungsi sebagai kunci utama untuk tabel itu (lebih lanjut tentang itu nanti). Di dalam tubuh konstruktor, kita instantiate Objek CodeIgniter, Objek Database dan kelas/pustaka Tabel HTML. Semua ini akan dibutuhkan sepanjang masa objek Datagrid dan sudah dibangun ke dalam framework CI. Perhatikan bahwa kita juga memeriksa apakah kunci utama benar-benar ada di tabel yang diberikan, dan, jika tidak, kita melemparkan pengecualian yang melaporkan kesalahan tersebut. Sekarang variabel $this->tbl_fields akan tersedia untuk digunakan nanti, jadi kita tidak perlu mengambil database lagi.
"Kita bisa menggunakan perintah,
$CI->db->list_fields($tbl_name)untuk mengambil nama semua bidang yang dimiliki tabel. Namun, untuk kinerja yang lebih baik, saya sarankan caching hasilnya. "
Metode untuk Menyesuaikan Judul Tabel
1 |
public function setHeadings(array $headings){ |
2 |
$this->headings = array_merge($this->headings, $headings); |
3 |
}
|
Ini memungkinkan Anda untuk menyesuaikan judul tabel kisi data Anda - yaitu, dengan itu, Anda bisa menimpa nama kolom asli untuk bidang tabel tertentu. Dibutuhkan array asosiatif, seperti ini: regdate => "Registration Date". Alih-alih hanya "Regdate" teknis sebagai tajuk kolom untuk jenis data itu, kita memiliki judul yang lebih dapat dibaca manusia sebagai gantinya. Kode yang bertanggung jawab untuk menerapkan pos akan segera terungkap.
Metode untuk Ignoring/Hiding Bidang Tabel
1 |
public function ignoreFields(array $fields){ |
2 |
foreach($fields as $f){ |
3 |
if($f!=$this->pk_col) |
4 |
$this->hide_cols[] = $f; |
5 |
}
|
6 |
}
|
ignoreFields menerima array yang berisi bidang yang akan diabaikan ketika mengambil data dari database. Ini berguna ketika kita memiliki tabel dengan banyak bidang, tetapi kita hanya ingin menyembunyikan beberapa saja. Metode ini cukup pintar untuk melacak upaya untuk mengabaikan bidang kunci utama dan kemudian melewati itu. Ini karena kunci utama tidak dapat diabaikan karena alasan teknis (Anda akan segera tahu alasannya). Namun, jika Anda ingin menyembunyikan kolom kunci utama agar tidak muncul di UI, Anda dapat menggunakan metode hidePkCol:
1 |
public function hidePkCol($bool){ |
2 |
$this->hide_pk_col = (bool)$bool; |
3 |
}
|
Metode ini menerima nilai boolean untuk menunjukkan jika kita ingin menyembunyikan kolom kunci utama sehingga tidak akan muncul di kisi data. Kadang-kadang, itu ide yang buruk untuk menampilkan data pkey, yang biasanya merupakan kode numerik tanpa makna bagi pengguna.
Metode contoh berikutnya:
1 |
private function _selectFields(){ |
2 |
foreach($this->tbl_fields as $field){ |
3 |
if(!in_array($field,$this->hide_cols)){ |
4 |
$this->CI->db->select($field); |
5 |
// hide pk column heading?
|
6 |
if($field==$this->pk_col && $this->hide_pk_col) continue; |
7 |
$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field); |
8 |
}
|
9 |
}
|
10 |
if(!empty($headings)){ |
11 |
// prepend a checkbox for toggling
|
12 |
array_unshift($headings,"<input type='checkbox' class='check_toggler'>"); |
13 |
$this->CI->table->set_heading($headings); |
14 |
}
|
15 |
|
16 |
}
|
Di sini kita memiliki metode pembantu; itu sebabnya ia memiliki pengubah "pribadi" dan diawali dengan karakter garis bawah (konvensi kode). Ini akan digunakan oleh metode generate() - dijelaskan secara singkat - untuk memilih bidang tabel yang sesuai dan juga judul yang tepat diatur ke object tabel (generator). Perhatikan baris berikut:
1 |
$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field); |
Di sinilah kita menerapkan tajuk atau resor yang disesuaikan ke tajuk default jika tidak ada yang diberikan. Jika kolom pk seharusnya disembunyikan dari view, maka judulnya akan dilewati. Perhatikan juga baris berikut:
1 |
array_unshift($headings,"<input type='checkbox' class='dg_check_toggler'>"); |
Perintah di atas menginstruksikan program untuk menambahkan kotak centang "Master" sebagai judul pertama tabel. Kotak centang itu berbeda dari kotak centang lain dalam kotak karena memungkinkan pengguna untuk memeriksa atau menghapus centang semua kotak centang hanya dalam satu kali jalan. Fungsionalitas toggling ini akan diimplementasikan dalam beberapa saat dengan cuplikan kode jQuery sederhana.
Metode untuk Generate/Render Datagrid
Sekarang tibalah saatnya melakukan pekerjaan nyata untuk kita:
1 |
public function generate(){ |
2 |
$this->_selectFields(); |
3 |
$rows = $this->CI->db |
4 |
->from($this->tbl_name) |
5 |
->get() |
6 |
->result_array(); |
7 |
foreach($rows as &$row){ |
8 |
$id = $row[$this->pk_col]; |
9 |
|
10 |
// prepend a checkbox to enable selection of items/rows
|
11 |
array_unshift($row, "<input class='dg_check_item' type='checkbox' name='dg_item[]' value='$id' />"); |
12 |
|
13 |
// hide pk column cell?
|
14 |
if($this->hide_pk_col){ |
15 |
unset($row[$this->pk_col]); |
16 |
}
|
17 |
}
|
18 |
|
19 |
return $this->CI->table->generate($rows); |
20 |
}
|
Metode generate, seperti namanya, bertanggung jawab untuk menghasilkan data grid itu sendiri. Anda harus memanggil metode ini hanya setelah Anda mengkonfigurasi objek sesuai dengan kebutuhan Anda. Hal pertama yang dilakukannya adalah memanggil metode $this->_selectFields() untuk melakukan tindakan yang dijelaskan sebelumnya. Sekarang harus mengambil semua baris dari database dan kemudian mengulanginya, menambahkan kotak centang ke awal setiap baris:
1 |
// prepend a checkbox to enable selection of items/rows
|
2 |
array_unshift($row, "<input class='dg_check_item' type='checkbox' name='dg_item[]' value='$id' />"); |
Di dalam loop foreach pada metode generate, jika flag $this->hide_pk_col disetel ke true, maka kita harus menghapus setingan entri primary key di $row array sehingga tidak akan muncul sebagai kolom ketika $this->CI->table object tabel memproses semua baris dan menghasilkan output html akhir. Pada titik ini, boleh saja menghapus kunci utama, jika perlu, karena kita tidak lagi memerlukan informasi itu. A
Tapi apa yang dilakukan pengguna dengan baris yang dipilih/dicentang? Untuk menjawab ini, saya telah menyiapkan beberapa metode lagi. Yang pertama memungkinkan kita untuk membuat "tombol aksi" tanpa harus mengetahui detail teknis tentang cara kerja sistem kisi secara internal:
Metode untuk Menambahkan Tombol ke Formulir Data Grid
1 |
public static function createButton($action_name, $label){ |
2 |
return "<input type='submit' class='$action_name' name='dg_action[$action_name]' value='$label' />"; |
3 |
}
|
Cukup berikan nama tindakan sebagai argumen pertama dan argumen kedua untuk menunjukkan label untuk tombol yang dihasilkan. Atribut class secara otomatis dihasilkan untuk tombol itu sehingga kita bisa bermain-main dengannya lebih mudah ketika kita bekerja dengannya di JavaScript. Tapi, bagaimana kita tahu jika tombol aksi tertentu telah ditekan oleh pengguna? Jawabannya dapat ditemukan di metode selanjutnya:
1 |
public static function getPostAction(){ |
2 |
// get name of submitted action (if any)
|
3 |
if(isset($_POST['dg_action'])){ |
4 |
return key($_POST['dg_action']); |
5 |
}
|
6 |
}
|
Ya! Metode statis lain yang membantu kita ketika kita berhadapan dengan formulir. Jika ada kisi data yang dikirimkan, metode ini akan mengembalikan nama tindakan (atau "operasi") yang terkait dengan peristiwa pengiriman itu. Selain itu, alat praktis lain untuk memproses formulir datagrid kita adalah...
1 |
public static function getPostItems(){ |
2 |
if(!empty($_POST['dg_item'])){ |
3 |
return $_POST['dg_item']; |
4 |
}
|
5 |
return array(); |
6 |
}
|
...yang mengembalikan array yang berisi ids yang dipilih sehingga Anda dapat melacak baris mana yang telah dipilih pada kisi dan kemudian melakukan beberapa tindakan dengannya. Sebagai contoh dari apa yang dapat dilakukan dengan pemilihan id baris, saya telah menyiapkan metode lain - ini menjadi metode contoh, dan bukan metode statis, karena menggunakan sumber daya contoh objek untuk melakukan bisnisnya:
1 |
public function deletePostSelection(){ |
2 |
// remove selected items from the db
|
3 |
if(!empty($_POST['dg_item'])) |
4 |
return $this->CI->db |
5 |
->from($this->tbl_name) |
6 |
->where_in($this->pk_col,$_POST['dg_item']) |
7 |
->delete(); |
8 |
}
|
Jika setidaknya satu kotak centang dicentang, metode deletePostSelection() akan menghasilkan dan mengeksekusi pernyataan SQL seperti berikut (misalkan $tbl_name='my_table' dan $pk_col='id'):
1 |
DELETE FROM my_table WHERE id IN (1,5,7,3,etc...) |
...yang secara efektif akan menghapus baris yang dipilih dari layer persisten. Mungkin ada lebih banyak operasi yang dapat Anda tambahkan ke data grid, tetapi itu akan tergantung pada spesifikasi proyek Anda. Sebagai tip, Anda dapat memperluas kelas ini menjadi, katakanlah, InboxDatagrid, jadi, di luar metode deletePostSelection, ini dapat mencakup operasi tambahan, seperti moveSelectedMessagesTo($place), dll...
Menyatukan semuanya
Sekarang, jika Anda telah mengikuti langkah demi langkah tutorial ini, Anda seharusnya berakhir dengan sesuatu yang mirip dengan yang berikut ini:
1 |
class Datagrid{ |
2 |
|
3 |
private $hide_pk_col = true; |
4 |
private $hide_cols = array(); |
5 |
private $tbl_name = ''; |
6 |
private $pk_col = ''; |
7 |
private $headings = array(); |
8 |
private $tbl_fields = array(); |
9 |
|
10 |
function __construct($tbl_name, $pk_col = 'id'){ |
11 |
$this->CI =& get_instance(); |
12 |
$this->CI->load->database(); |
13 |
$this->tbl_fields = $this->CI->db->list_fields($tbl_name); |
14 |
if(!in_array($pk_col,$this->tbl_fields)){ |
15 |
throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'"); |
16 |
}
|
17 |
$this->tbl_name = $tbl_name; |
18 |
$this->pk_col = $pk_col; |
19 |
$this->CI->load->library('table'); |
20 |
|
21 |
}
|
22 |
|
23 |
public function setHeadings(array $headings){ |
24 |
$this->headings = array_merge($this->headings, $headings); |
25 |
}
|
26 |
|
27 |
public function hidePkCol($bool){ |
28 |
$this->hide_pk_col = (bool)$bool; |
29 |
}
|
30 |
|
31 |
public function ignoreFields(array $fields){ |
32 |
foreach($fields as $f){ |
33 |
if($f!=$this->pk_col) |
34 |
$this->hide_cols[] = $f; |
35 |
}
|
36 |
}
|
37 |
|
38 |
private function _selectFields(){ |
39 |
foreach($this->tbl_fields as $field){ |
40 |
if(!in_array($field,$this->hide_cols)){ |
41 |
$this->CI->db->select($field); |
42 |
// hide pk column heading?
|
43 |
if($field==$this->pk_col && $this->hide_pk_col) continue; |
44 |
$headings[]= isset($this->headings[$field]) ? $this->headings[$field] : ucfirst($field); |
45 |
}
|
46 |
}
|
47 |
if(!empty($headings)){ |
48 |
// prepend a checkbox for toggling
|
49 |
array_unshift($headings,"<input type='checkbox' class='dg_check_toggler'>"); |
50 |
$this->CI->table->set_heading($headings); |
51 |
}
|
52 |
|
53 |
}
|
54 |
|
55 |
public function generate(){ |
56 |
$this->_selectFields(); |
57 |
$rows = $this->CI->db |
58 |
->from($this->tbl_name) |
59 |
->get() |
60 |
->result_array(); |
61 |
foreach($rows as &$row){ |
62 |
$id = $row[$this->pk_col]; |
63 |
|
64 |
// prepend a checkbox to enable selection of items
|
65 |
array_unshift($row, "<input class='dg_check_item' type='checkbox' name='dg_item[]' value='$id' />"); |
66 |
|
67 |
// hide pk column?
|
68 |
if($this->hide_pk_col){ |
69 |
unset($row[$this->pk_col]); |
70 |
}
|
71 |
}
|
72 |
|
73 |
return $this->CI->table->generate($rows); |
74 |
}
|
75 |
|
76 |
public static function createButton($action_name, $label){ |
77 |
return "<input type='submit' class='$action_name' name='dg_action[$action_name]' value='$label' />"; |
78 |
}
|
79 |
|
80 |
public static function getPostAction(){ |
81 |
// get name of submitted action (if any)
|
82 |
if(isset($_POST['dg_action'])){ |
83 |
return key($_POST['dg_action']); |
84 |
}
|
85 |
}
|
86 |
|
87 |
public static function getPostItems(){ |
88 |
if(!empty($_POST['dg_item'])){ |
89 |
return $_POST['dg_item']; |
90 |
}
|
91 |
return array(); |
92 |
}
|
93 |
|
94 |
public function deletePostSelection(){ |
95 |
// remove selected items from the db
|
96 |
if(!empty($_POST['dg_item'])) |
97 |
return $this->CI->db |
98 |
->from($this->tbl_name) |
99 |
->where_in($this->pk_col,$_POST['dg_item']) |
100 |
->delete(); |
101 |
}
|
102 |
|
103 |
}
|
Perhatikan: Jangan lupa untuk menyimpan file ini sebagai datagrid_helper.php, dan letakkan di "application/helper/"
Langkah 2: Menguji Kelas Pembantu Datagrid dengan Controller CodeIgniter
Kita sekarang akan membuat test controller sederhana dan memuat kelas Datagrid sebagai helper di konstruktornya. Tapi sebelum itu, kita harus mendefinisikan tabel database dummy dan mengisinya dengan beberapa data sampel.
Jalankan SQL berikut untuk membuat database dan tabel pengguna:
1 |
CREATE DATABASE `dg_test`; |
2 |
CREATE TABLE `users` ( |
3 |
`id` int(11) NOT NULL AUTO_INCREMENT, |
4 |
`username` varchar(80) NOT NULL, |
5 |
`password` varchar(32) NOT NULL, |
6 |
`email` varchar(255) NOT NULL, |
7 |
UNIQUE KEY `id` (`id`) |
8 |
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; |
Selanjutnya, mari tambahkan beberapa pengguna ke dalamnya:
1 |
INSERT INTO `users` (`id`, `username`, `password`, `email`) VALUES |
2 |
(1, 'david', '12345', 'david@domain.com'), |
3 |
(2, 'maria', '464y3y', 'maria@domain.com'), |
4 |
(3, 'alejandro', 'a42352fawet', 'alejandro@domain.com'), |
5 |
(4, 'emma', 'f22a3455b2', 'emma@domain.com'); |
Sekarang, simpan kode berikut sebagai "test.php," dan menambahkannya ke folder "application/controllers":
1 |
<?php
|
2 |
class Test extends CI_Controller{ |
3 |
|
4 |
function __construct(){ |
5 |
parent::__construct(); |
6 |
$this->load->helper(array('datagrid','url')); |
7 |
$this->Datagrid = new Datagrid('users','id'); |
8 |
}
|
9 |
|
10 |
function index(){ |
11 |
$this->load->helper('form'); |
12 |
$this->load->library('session'); |
13 |
|
14 |
$this->Datagrid->hidePkCol(true); |
15 |
$this->Datagrid->setHeadings(array('email'=>'E-mail')); |
16 |
$this->Datagrid->ignoreFields(array('password')); |
17 |
|
18 |
if($error = $this->session->flashdata('form_error')){ |
19 |
echo "<font color=red>$error</font>"; |
20 |
}
|
21 |
echo form_open('test/proc'); |
22 |
echo $this->Datagrid->generate(); |
23 |
echo Datagrid::createButton('delete','Delete'); |
24 |
echo form_close(); |
25 |
}
|
26 |
|
27 |
function proc($request_type = ''){ |
28 |
$this->load->helper('url'); |
29 |
if($action = Datagrid::getPostAction()){ |
30 |
$error = ""; |
31 |
switch($action){ |
32 |
case 'delete' : |
33 |
if(!$this->Datagrid->deletePostSelection()){ |
34 |
$error = 'Items could not be deleted'; |
35 |
}
|
36 |
break; |
37 |
}
|
38 |
if($request_type!='ajax'){ |
39 |
$this->load->library('session'); |
40 |
$this->session->set_flashdata('form_error',$error); |
41 |
redirect('test/index'); |
42 |
} else { |
43 |
echo json_encode(array('error' => $error)); |
44 |
}
|
45 |
} else { |
46 |
die("Bad Request"); |
47 |
}
|
48 |
}
|
49 |
|
50 |
}
|
51 |
?>
|
Sebuah instance dari kelas ini dibuat dan diteruskan sebagai referensi ke anggota $this->Datagrid. Perhatikan bahwa kita akan mengambil data dari tabel yang disebut "users" yang kunci utamanya adalah kolom "id"; kemudian, pada metode indeks kita mengambil langkah-langkah berikut: mengkonfigurasi objek Datagrid, merendernya di dalam formulir dengan tombol hapus yang ditambahkan padanya dan melihat apakah semuanya berfungsi seperti yang diharapkan:
Pertanyaan: Apa yang terjadi ketika formulir dikirim?
Jawaban: Metode "Test::proc()" menangani pemrosesan formulir dan memilih operasi yang tepat untuk diterapkan terhadap id yang dipilih oleh pengirim formulir. Itu juga menangani permintaan AJAX, jadi itu akan menggemakan objek JSON kembali ke klien. Fitur AJAX-aware ini akan berguna ketika jQuery mulai beraksi, yang sekarang!
"Itu selalu merupakan ide cerdas untuk membuat aplikasi web yang mengkompensasi ketika JavaScript/AJAX tidak tersedia. Dengan cara ini, beberapa pengguna akan memiliki pengalaman yang lebih kaya dan lebih cepat, sementara yang tanpa JavaScript diaktifkan masih dapat menggunakan aplikasi secara normal."
Langkah 3: Menerapkan Ajax (jQuery to the Rescue!)
Ketika pengguna mengklik tombol (atau tombol aksi lainnya), kita ingin, mungkin, untuk mencegah halaman memuat ulang dan harus membuat semuanya lagi; ini bisa membuat pengguna aplikasi kita tertidur! Mengatasi masalah ini tidak akan menjadi tugas yang sulit jika kita tetap menggunakan pustaka jQuery. Karena ini bukan tutorial "pemula", saya tidak akan membahas semua detail terkait cara mendapatkan perpustakaan, cara memasukkannya ke halaman, dll. Anda diharapkan mengetahui langkah-langkah ini sendiri.
Buat folder, bernama "js", tambahkan pustaka jQuery di dalamnya, dan buat file tampilan, bernama users.php. Buka file baru ini, dan tambahkan:
1 |
<html>
|
2 |
<head>
|
3 |
<title>Users Management</title> |
4 |
<script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script> |
5 |
<script src="<?php echo base_url(); ?>js/datagrid.js"></script> |
6 |
</head>
|
7 |
<body>
|
8 |
<?php
|
9 |
$this->Datagrid->hidePkCol(true);
|
10 |
if($error = $this->session->flashdata('form_error')){
|
11 |
echo "<font color=red>$error</font>";
|
12 |
}
|
13 |
echo form_open('test/proc',array('class'=>'dg_form'));
|
14 |
echo $this->Datagrid->generate();
|
15 |
echo Datagrid::createButton('delete','Delete');
|
16 |
echo form_close();
|
17 |
?>
|
18 |
</body>
|
19 |
</html>
|
Apakah Anda menyadari bahwa kita telah memindahkan kode dari Test::index dan ke skrip view yang baru? Ini berarti kita harus mengubah metode Test::index() sesuai:
1 |
function index(){ |
2 |
$this->load->helper('form'); |
3 |
$this->load->library('session'); |
4 |
$this->load->view('users'); |
5 |
}
|
Itu lebih baik. Jika Anda ingin menambahkan beberapa gaya ke kotak, Anda dapat menggunakan CSS berikut (atau membuat tata letak yang lebih baik sendiri):
1 |
.dg_form table{ |
2 |
border:1px solid silver; |
3 |
}
|
4 |
|
5 |
.dg_form th{ |
6 |
background-color:gray; |
7 |
font-family:"Courier New", Courier, mono; |
8 |
font-size:12px; |
9 |
}
|
10 |
|
11 |
.dg_form td{ |
12 |
background-color:gainsboro; |
13 |
font-size:12px; |
14 |
}
|
15 |
|
16 |
.dg_form input[type=submit]{ |
17 |
margin-top:2px; |
18 |
}
|
Sekarang, tolong, buat "datagrid.js" file, letakkan di direktori "js", dan mulai dengan kode ini:
1 |
$(function(){
|
2 |
// cool stuff here... |
3 |
}) |
Di dalam penutupan ini, kita akan menulis kode yang akan bertugas mengendalikan acara pengiriman tertentu begitu halaman telah sepenuhnya dimuat. Hal pertama yang perlu kita lakukan adalah melacak ketika pengguna mengklik tombol kirim pada formulir kisi data, dan kemudian mengirim data itu untuk diproses di server.
1 |
$('.dg_form :submit').click(function(e){
|
2 |
e.preventDefault(); |
3 |
var $form = $(this).parents('form');
|
4 |
var action_name = $(this).attr('class').replace("dg_action_","");
|
5 |
var action_control = $('<input type="hidden" name="dg_action['+action_name+']" value=1 />');
|
6 |
|
7 |
$form.append(action_control); |
8 |
|
9 |
var post_data = $form.serialize(); |
10 |
action_control.remove(); |
11 |
|
12 |
var script = $form.attr('action')+'/ajax';
|
13 |
$.post(script, post_data, function(resp){
|
14 |
if(resp.error){
|
15 |
alert(resp.error); |
16 |
} else {
|
17 |
switch(action_name){
|
18 |
case 'delete' : |
19 |
// remove deleted rows from the grid |
20 |
$form.find('.dg_check_item:checked').parents('tr').remove();
|
21 |
break; |
22 |
case 'anotherAction' : |
23 |
// do something else... |
24 |
break; |
25 |
} |
26 |
} |
27 |
}, 'json') |
28 |
}) |
Atau, kita bisa mulai dengan sesuatu seperti: $('.dg_form').submit(function(e){...}). Namun, karena saya ingin melacak tombol mana yang telah ditekan dan mengekstrak nama tindakan yang dipilih berdasarkan itu, saya lebih suka mengikat event handler ke tombol kirim itu sendiri dan kemudian naik ke atas hierarki node untuk menemukan bentuk yang tombol yang ditekan milik:
1 |
// finds the form
|
2 |
var $form = $(this).parents('form'); |
3 |
// extracts the name of the action
|
4 |
var action_name = $(this).attr('class').replace("dg_action_",""); |
Selanjutnya, kami menambahkan elemen input tersembunyi di dalam elemen form untuk menunjukkan tindakan mana yang sedang dikirim:
1 |
// create the hidden input
|
2 |
var action_control = $('<input type="hidden" name="dg_action['+action_name+']" value=1 />'); |
3 |
// add to the form
|
4 |
$form.append(action_control); |
Ini diperlukan karena fungsi tidak menganggap tombol kirim sebagai entri formulir yang valid. Jadi kita harus memiliki retasan itu di tempat ketika membuat serial data formulir.
1 |
action_control.remove(); |
"Jangan lupa: fungsinya mengabaikan tombol kirim, mengabaikannya hanya sebagai sampah markup!"
Mengirim Data Formulir ke Server
Selanjutnya, kita lanjutkan untuk mendapatkan atribut action dari elemen bentuk dan menambahkan string "/ajax" ke url itu, sehingga metode ini akan tahu bahwa ini, pada kenyataannya, adalah permintaan AJAX. Setelah itu, kita menggunakan fungsi jQuery.post untuk mengirim data untuk diproses oleh controller yang sesuai, sisi server, dan kemudian mencegat acara respons dengan panggilan balik/penutupan terdaftar:
1 |
... |
2 |
var script = $form.attr('action')+'/ajax';
|
3 |
$.post(script, post_data, function(resp){
|
4 |
if(resp.error){
|
5 |
alert(resp.error); |
6 |
} else {
|
7 |
switch(action_name){
|
8 |
case 'delete' : |
9 |
// remove deleted rows from the grid |
10 |
$form.find('.dg_check_item:checked').parents('tr').remove();
|
11 |
break; |
12 |
case 'anotherAction' : |
13 |
// do something else... |
14 |
break; |
15 |
} |
16 |
} |
17 |
},'json') |
Perhatikan bahwa kita meminta respons untuk dikodekan sebagai "json" karena kita meneruskan string itu sebagai argumen keempat dari fungsi $.post. Isi dari callback yang berhubungan dengan respons server harus agak mudah dipahami; itu menentukan apakah ada kesalahan, dan, jika demikian, memberitahukannya. Jika tidak, itu akan menunjukkan bahwa tindakan berhasil diproses (dalam hal ini, jika itu adalah tindakan "", kita menghapus baris yang terkait dengan id yang dipilih oleh pengguna).
Langkah 4: Periksa Semua atau Tidak Ada!
Satu-satunya hal yang hilang sekarang adalah fungsi sakelar yang saya janjikan sebelumnya. Kita harus mendaftarkan fungsi callback ketika kotak centang "Master" - yang memiliki atribut kelas diatur ke "dg_check_toggler" - diklik. Tambahkan potongan kode berikut setelah yang sebelumnya:
1 |
$('.dg_check_toggler').click(function(){
|
2 |
var checkboxes = $(this).parents('table').find('.dg_check_item');
|
3 |
if($(this).is(':checked')){
|
4 |
checkboxes.attr('checked','true');
|
5 |
} else {
|
6 |
checkboxes.removeAttr('checked');
|
7 |
} |
8 |
}) |
Ketika kotak centang "toggler" diklik, jika masuk ke keadaan "dicentang", maka semua baris dari kisi data terkait akan diperiksa secara bersamaan; kalau tidak semuanya akan dicentang.
Pikiran terakhir
Kita belum mencapai puncak gunung es ketika datang ke kisi data untuk sistem manajemen konten yang lebih kompleks. Fitur lain yang mungkin terbukti bermanfaat adalah:
- Menyortir data grid berdasarkan nama kolom
- Tautan pagination untuk menelusuri data grid
- Edit/Ubah tautan untuk memperbarui data satu baris
- Mekanisme pencarian untuk memfilter hasil
Terima kasih sudah membaca. Jika Anda ingin tutorial lanjutan, beri tahu saya di komentar!
