CGridView sebagai salah satu widget Yii memiliki banyak fitur. Dari paging hingga sorting bisa memanjakan programmer web menyediakan data tabel. Namun dari sekian fitur tersebut, kadang-kadang ada permintaan dari user untuk mengcustom. Memang benar, sudah banyak ekstensi-ekstensi Yii untuk keperluan itu, namun tentu tidak semua tercover. Salah satu project yang sedang saya buat, user meminta u...

Extensi Yii untuk Hierarki Header CGridView

CGridView sebagai salah satu widget Yii memiliki banyak fitur. Dari paging hingga sorting bisa memanjakan programmer web menyediakan data tabel. Namun dari sekian fitur tersebut, kadang-kadang ada permintaan dari user untuk mengcustom. Memang benar, sudah banyak ekstensi-ekstensi Yii untuk keperluan itu, namun tentu tidak semua tercover.

Salah satu project yang sedang saya buat, user meminta untuk membuat grouping header. Misalkan untuk kolom Rupiah dan kolom Dolar, dibuat parent header dengan nama Harga yang tampilannya kurang lebih seperti ini.

Setelah mencoba mencari-cari grouping header di extensi Yii, ternyata hasilnya nihil. Memang ada ekstensi GroupGridView, tapi fungsinya untuk menggroup nilai yg sama dari sebuah kolom, bukan headernya.

Akhirnya, saya putuskan untuk membuat ekstensi sendiri untuk memanipulasi CGridView sehingga dapat ditampilkan sesuai keinginan user tanpa mengurangi fitur-fitur utama dari CGridView. Setelah algoritma selesai dibuat, saya coba implementasikan dengan membuat sebuah class HeaderGroupGridView yang meng-extend CGridView.

Dengan menambahkan parameter mergeHeaders, kita bisa memilih header kolom mana yang akan digroup, sehingga tampilan HeaderGroupGridView kurang lebih seperti ini.

Untuk mendefinisikannya dapat dilihat dari kode di bawah ini.

$this->widget('ext.HeaderGroupGridView', array(
	'id'=>'user-grid',
	'summaryText'=>'Total {count} data',
	'mergeHeaders'=>array(
		array(
			'name'=>'Realisasi POK Satker',
			'start'=>3, //indeks kolom 3
			'end'=>4, //indeks kolom 4
		),
		array(
			'name'=>'Realisasi KPPN',
			'start'=>5,
			'end'=>6,
		),
	),
	'dataProvider'=>$dataProvider,
	'columns'=>array(
		//array kolom
	),
));

Ekstensi HeaderGroupGridView bisa didownload di sini.

Untuk sementara, ekstensi ini hanya support untuk hierarki 2 level saja. Mungkin untuk versi berikutnya akan saya perbaiki sehingga bisa multihierarki.

Semoga membantu dan happy coding :)


About Author

Muhammad Farid Fadhlan


Comment & Discussions

  • Teguh Kristianto
    wah ada master yii disini.. ditunggu tutorialnya mas.. hehehe..

  • Teddy Zugana
    KLw Emmbedd filter ngak muncul gan filternya ????

  • Please LOGIN before if you want to give the comment.