version 4.1.0

ตกแต่ง Header ของ CGridView กันดีกว่า

  จันทร์ที่ 02 มีนาคม พ.ศ. 2558 เวลา 01:57:44 น.      2,421 ครั้ง


ตกแต่ง Header ของ CGridView กันดีกว่า

ดาวโหลดไฟล์ CSS ตกแต่ง Header GridView ได้จากลิ้งค์นี้ [ ดาวโหลดที่นี่ ]

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง

1. หลังการดาวโหลดไฟล์ที่ใช้ตกแต่ง Header GridView มาแล้ว ให้ทำการแตกไฟล์ดังกล่างลงในโฟล์เดอร์ "css" ดังภาพ

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

2. คลิกที่เข้าไปในโฟล์เดอร์ "gridViewStyle" เพื่อตรวจสอบไฟล์ถูกต้องและครบถ้วน ดังภาพ หรือไม่

ตัวอย่างคำสั่ง

 
$this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'product-grid',
    'dataProvider' => $model->search(),
    'cssFile' => Yii::app()->baseUrl . '/css/gridViewStyle/styles.css',
    'pager' => array('cssFile' => Yii::app()->baseUrl . '/css/gridViewStyle/styles.css'),
    'columns' => array(
        /* .... */
    ),
));

3. วิธีเรียกใช้งานไฟล์ที่ใช้สำหรับการตกแต่ง Header GridView โดยการแทรกคำสั่งตัวแปร ชื่อว่า "cssFile และ pager" ลงไปดังตัวอย่าง

รูปภาพ "ก่อน" การตกแต่ง

รูปภาพ

รูปภาพที่ 3 | รูปภาพ "ก่อน" การตกแต่ง

รูปภาพ "หลัง" การตกแต่ง

รูปภาพ

รูปภาพที่ 4 | รูปภาพ "หลัง" การตกแต่ง



แท็ก


นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment