Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
Home / Pemprograman / Membuat custom search pada Flexigrid

Membuat custom search pada Flexigrid

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.

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Simple Javascript Autocomplete [Bagian 2]

Artikel ini merupakan kelanjutan dari Artikel sebelumnya Simple javascript Autocomplete dimana terdapat beberapa bagian yang …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

12 − = 7