Yii2: Show Inline Detail Rows in Gridview With Ajax Without Extension

gridview

Ada banyak cara menampilkan detail row atau record pada gridview, saya sendiri lebih suka menggunakan popup atau modal, atau yang paling mudah ya dengan berpindah ke halaman lain. Namun kali ini saya ingin berbagi pada Anda tentang menampilkan detail row dengan cara lain..

http://www.datatables.net/examples/api/row_details.html

Logikanya simple, ketika kita mengklik link di suatu baris pada Gridview maka javascript akan menambahkan satu buah baris baru kemudian dengan fungsi ajax meload data detail row dan menampilkannya ke dalam baris yang baru kita bikin tadi.

Caranya gampang, asumsi kita punya tabel person.. :
1. Di column Gridview, kita bikin link dengan event onClick yang memanggil fungsi detail, dimana fungsi itu akan mengirimkan parameter current object atau link tersebut dan id dari person

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
		
			...,
			[
				'attribute' => 'name',
				'format'=>'raw',
				'value' => function ($data){
					return Html::a($data->name,'#',['onclick'=>'detail(this,'.$data->id.');return false;']);
				}				
			],
			...,
			
		]); ?>

2. Kita bikin fungsi detail. bikin baris baru lalu isi dengan detail row

<?php 
$this->registerJs('
		function detail(obj,person_id){
			/*
				<table> 
					<tr>
						<td>
							<a> */
			var a = obj; // get element anchor
			var td = $(a).parent(); // get parent dari element anchor = td
			var tr = $(td).parent(); // get element tr
			var tdCount = $(tr).children().length; // get jumlah kolom pada tr
			var table = $(tr).parent(); // get element table
			$(table).children(".trDetail").remove(); // initialise, drop all of child with class trDetail
			
			var trDetail = document.createElement("tr"); // create element tr for detail
			$(trDetail).attr("class","trDetail"); // add class trDetail for element tr 
			var tdDetail = document.createElement("td"); // create element td for detail tr
			$(tdDetail).attr("colspan",tdCount); // add element coolspan at td
			$(tdDetail).html("<span class=\'fa fa-spinner fa-spin\'></span>"); // loader kaka.. :) 
			
			// get content via ajax
			$.get("'.\yii\helpers\Url::to(['person/detail-person']).'?id="+person_id, function( data ) {
			  $(tdDetail).html( data );
			}).fail(function() {
				alert( "error" );
			  });
			$(trDetail).append(tdDetail); // add td to tr
			$(tr).after(trDetail);  // add tr to table
		}
	
', \yii\web\View::POS_HEAD) ?>

3. Pada controller person, tambahkan fungsi detailPerson

public function actionDetailPerson($id)
{
	$model = Person::findOne($id);
	if($model!==null){
		echo $model->name." - ".$model->phone." - ".$model->address;
	}
	else{
		echo "Detail is empty";
	}
}

Fungsi ini bisa Anda ubah dalam bentuk Html atau Json lalu generate tabel sehingga detailnya dalam bentuk tabel sebagaimana ilustrasi diatas..

Silahkan bereksperimen

Selesai..

Tags:
8 Comments
  1. Taufik Herjanto
  2. Joe
  3. asrul sani ariesandy
    • Hafid Mukhlasin
  4. Arief
    • Hafid Mukhlasin
      • cahya

Leave a Reply

Your email address will not be published. Required fields are marked *