ichsanmust/yii2-grid

Extension grid view (yii2-grid-select)

Installs: 105

Dependents: 0

Suggesters: 0

Security: 0

Stars: 6

Watchers: 2

Forks: 0

Open Issues: 0

Type:yii2-extension

1.1.3 2020-10-19 17:21 UTC

This package is not auto-updated.

Last update: 2024-10-04 22:10:44 UTC


README

Extensions ini diperuntukan untuk kebutuhan select data multiple di grid view yii2 dengan memakai checkbox. permasalahan yang ada, jika kita memakai 'class' => 'yii\grid\CheckboxColumn' dari yii, ada kekurangan, dimana saat kita telah melakukan select data, dan kita melakukan searching, filtering, sorting, paging (pjax request), data selected yang sebelumnya menjadi hilang, dengan extension ini, dapat memperbaiki kekurangan tersebut. semoga bermanfaat...

Installation

Disarankan Install melalui composer composer. jalan kan perintah

php composer.phar require --prefer-dist ichsanmust/yii2-grid "@dev"

atau tambahkan

"ichsanmust/yii2-grid": "@dev"

di require section file composer.json . lalu jalan kan composer update

Install From the Archive

Download the latest release dari sini realeses., dan extract di project. di config aplikasi , tambakan aliases dan path untuk extension ini.

... return [

'aliases' => [
    '@ichsanmust/grid' => 'path/to/your/extracted',
    // contoh: '@ichsanmust/grid' => '@app/extensions/ichsanmust/yii2-grid',
    
]

]; ...

Contoh Penggunaan

// controller

public function actionIndex()
    {
        $searchModel = new ProductSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

// view

<?php
use yii\helpers\Html;
use yii\grid\GridView;

$this->title = 'Products';
$this->params['breadcrumbs'][] = $this->title;
?>

<script>
	// tambahkan ini untuk inisiasi
	var listChecked = [];
</script>

<?php
	\yii\widgets\Pjax::begin([  // agar content nya di request secara ajax, maka harus pake widgets pjax
		'id'=>'pjax-product-gridview',
		'enablePushState'=>false,
		'timeout'=>100000,
	]); 
?>

<script>
	// jika parent dari halaman ini merupakan pjax, (pagination)  jika bukan, bisa tidak dipakai
	$("ul.pagination li a").on("click", function(e) {
		var $this = $(this);
		var hrefData = $this.attr("href");

		$.pjax.reload({
			container: "#pjax-product-gridview",
			timeout: 100000,
			url: hrefData,
			push: false,
			replace: false,
			scrollTo: false,
		}).done(function() {
		});
		return false;
	});

	// jika parent dari halaman ini merupakan pjax, (sorting)  jika bukan, bisa tidak dipakai
	$('table thead th a').on("click", function(e) {
		var $this = $(this);
		var hrefData = $this.attr("href");

		$.pjax.reload({
			container: "#pjax-product-gridview",
			timeout: 100000,
			url: hrefData,
			push: false,
			replace: false,
			scrollTo: false,
		}).done(function() {
		});
		return false;
	});
</script>

<?= GridView::widget([
	'id'=>'crud-gridview-ichsanmust',
	'dataProvider' => $dataProvider,
	'filterModel' => $searchModel,
	'columns' => [
		['class' => 'yii\grid\SerialColumn'],

		[   
				'_pjax' =>'pjax-product-gridview',
				'class' => 'ichsanmust\grid\CheckboxColumnSelectTools',  // class select nya memakai ini
				'name'=>'choose', // nama untuk checkbox
				'uniqueValue'=>'id_product', // value unique yang akan di select
				//'valueInit'=> array(3,2), // value data selected saat inisiasi gridview
				/*'valueInitSingle'=> function ($model, $key, $index, $column) { // value data selected per single data
						if($model->STATUS == 3){ 
							return true;
						}else{
							return false;
						} 
					},
				*/
				//'disabledCheckboxOnValue' =>true, // saat valueInit ada datanya, checkbox yang ter select akan di disabled
				//'checkedCheckboxOnValue' => true, // saat valueInit ada datanya, checkbox yang ter select akan di checked
					
				
		],
		'id_product',
		'product_name',
		'id_product_category',
		'stok',
		
		['class' => 'yii\grid\ActionColumn'],
	],
]); ?>
<?php \yii\widgets\Pjax::end();   // agar content nya di request secara ajax, maka harus pake widgets pjax ?>

<?php
$this->registerJs(
	   '
		$("#pjax-product-gridview").on("pjax:send", function() { // beforeSend
				$("#loader").show();
		})
		$("#pjax-product-gridview").on("pjax:complete", function() { // complete
			retainCheckedSingle(); // ini harus di deklarasikan 
			setCheckedChooseAll(); // ini harus di deklarasikan 
			$("#loader").hide();
		})
		'
	);
?>
			
<a id ="getSelected" class ="btn btn-success" > Get Selected Value </a>
<a id ="clearSelected" class ="btn btn-success" > clear Selected Value </a>
<a id ="addSelected" class ="btn btn-success" > add Selected 3 and 2 </a>

<?php
$this->registerJs(
	   '
		jQuery(document).on("click","#getSelected",function(e){
			console.log(getListChecked()); // ini yang di olah
			alert(getListChecked()); // ini yang di olah
			return false;
		});
		jQuery(document).on("click","#clearSelected",function(e){
			removeAll();
			return false;
		});
		jQuery(document).on("click","#addSelected",function(e){
			var arrayData =["3","2"];
			addSelected(arrayData);
			return false;
		});
		'
	);


?>


atau bisa seperti ini 

<a id="getSelectedonclick" onclick="getCheckboxData()" class="btn btn-main"> get data </a>

<script>
	function getCheckboxData() {
		console.log(getListChecked()); // ini yang di olah
		alert(getListChecked()); // ini yang di olah
		return false;
	}
</script>

catatan

untuk yang bermasalah mengenai pjax yang tidak terdeteksi di Jquery Versi 3 ke atas, silahkan pake extensions ini pjax3