Iso Web Id Tutorial Komputer
Related Articles
Sudah lama saya tidak menulis artikel ya 🙂 mungkin karena sedikit kesibukan untuk mencari sesuap nasi :). Baik kita akan sedikit flash back ke artikel terdahulu tentang penggunaan Flexigrid, mengapa flexigrid? karena banyak yang bertanya bagaimana cara membuat custom Search pada Grid table sederhana ini, entah karena banyak yang menggunakan atau nyasar ke website ini lalu mencoba implementasi pada websitenya dan lainnya.
Inti dari penggunaannya yaitu dengan memanggil fungsi flexOption pada flexigrid kemudian reload/refresh grid table, flexOption disini bertugas untuk menampung parameter – parameter yang akan dikirimkan melalui method POST, untuk itu mari kita lihat sedikit script dibawah ini.
var p = [{name:’NAMA’, value: 2}];
$(“#flex1”).flexOptions({params: p}); // disini terlihat bahwa variable p menampung JSON Array
Script diatas bagian utama untuk mengirimkan parameter pencarian, untuk lebih jelasnya kalian dapat membuat form pencarian seperti dibawah ini.
<input type=”text” id=”search” /> <br />
<input type=”button” id=”btnSearch” value=”Go” />
Tambahkan html diatas grid table yang kalian buat (ingat ini hanya contoh, tidak perlu sama persis), kemudian buat javascript tambahan ketika tombol pencarian (Go) di klik.
$(“#btnSearch”).click(function(){ // lihat kode HTML diatas yg terdetak biru adalah ID button yg di jadikan paameter Click pada fungsi ini.
var s = $(“#search”).val(); // ambil value dari textfield search
var p = [{name:’NAMA’, value:s}]; // parameter yang dikirim
$(“#flex1”).flexOptions({params: p}); // kirim parameter
$(‘#flex1’).flexReload(); // Refresh grid table
});
Mudah bukan, kalian dapat menambahkan/disesuaikan dengan kasus yang kalian hadapi dengan menambah parameter yang dikirim, lantas apa bedanya dengan search bawaan flexigrid? tentu saja berbeda karena custom search dapat kita sesuaikan dengan keinginan bahkan memungkinkan bila mau dibuat Advance Search. Bagaimana bila kita mau membuat lebih dari 1 parameter yang akan dikirimkan? mudah saja buat object baru pada variable p lihat script dibawah.
var p = [{name:’NAMA’, value:s}, {name:’EMAIL’, value:’isi valuenya’}, tambahkan lainnya];
dengan custom search pada flexigrid diatas tentu kalian dapat membuat berbagai model pencarian disesuaikan dengan kasus kalian masing2.
OK segitu dulu, semoga bermanfaat.
