ถ้าเราอยากได้ช่องค้นหาแค่บางช่องล่ะ ….. สิ่งที่เราจะทำก็คือไป custom column ที่เราต้องการในที่นี้ขอยกตัวอย่างเป็นคอลัมน์ book_id
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'book_id',
'filter' => false
],
'book_name',
'price',
'category_id',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>ผลลัพธ์ที่ได้
จะเห็นว่าช่องค้นหาของคอลลัมน์ book_id หายไปหลังจากที่เรา set ให้
filter = false
ต่อไปมาดูสิมีอะไรให้เล่นอีก … อ่อออออ ชื่อคอลัมน์ไงใช่แล้วชื่อคอลัมน์ของเราตอนนี้มันดูยังไม่ค่อยโอเคเท่าไหร่ เรามาตั้งชื่อใหม่ดีกว่า
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'book_id',
'header' => 'รหัสหนังสือ',
'filter' => false
],
'book_name',
'price',
'category_id',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>ส่วนที่เพิ่มเข้ามาก็คือ header = รหัสหนังสือ ซึ้งก็คือหัวของคอลัมน์นั้นเอง !!
มาเปลี่ยน style ของ gridview กันเถอะ !!
<?= GridView::widget([
'tableOptions' => [
'class' => 'table table-striped table-hover',
'width'=>'100%',
'cellspacing'=> '0'
],
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'book_id',
'header' => 'รหัสหนังสือ',
'filter' => false
],
'book_name',
'price',
'category_id',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>เพียงแค่ใส่ tableOptions เข้าไปที่ gridview เราก็สามารถนำ css หรือจะปรับแต่ง style ให้กับ gridview ของเราได้ตามชอบใจถ้าหากทุกคนลองเปิดดู code ที่แสดงผลก็จะเห็นว่าเวลาที่ render ออกไปก็จะเขียนเหมือนกับเวลาที่เราเขียนตารางใน HTML ทั่วๆ ไป
เย้ !!! หวังว่าทุกคนจะสนุกกับการปรับแต่ง gridview และการ coding นะคะ
:)
