คลัง Component สำหรับ Yii — เลือก อ่านสเปค แล้วก๊อป snippet ไปใช้ได้เลย
ภาพรวม Component Lab — รายการทุกตัวที่พร้อมใช้งานและคู่มือเริ่มต้น
เลือก component จากดัชนีทางซ้าย
แต่ละรายการมีเลขกำกับตามลำดับในแคตตาล็อก
อ่านตารางสเปค
บอกชื่อคลาส ตำแหน่งไฟล์ และหมวดหมู่ของ widget ตัวนั้น
กดปุ่ม COPY ที่กล่องโค้ด
ได้ snippet พร้อมวางลงใน view ของคุณได้ทันที
ปรับพารามิเตอร์ให้ตรงกับข้อมูลจริง
ส่วนใหญ่ต้องผูกกับ Model หรือ CActiveDataProvider ของหน้านั้น
ตารางข้อมูลมาตรฐาน — Filter/Pagination/Row Actions
$this->widget('Jtable', array(
'dataProvider' => $dp,
'columns' => array('col1','col2'),
));| ลำดับ | ลป. | ผู้ประกอบการ | ประเภทธุรกิจ | รายได้ | ภาษีที่ชำระ | ภ.พ.30 ปี 2559 | เทียบ 50/30 +- | หัก ณ. 3/53 | GFMIS | ข้อมูลรวม |
|---|---|---|---|---|---|---|---|---|---|---|
| ลำดับ | ลป. | ผู้ประกอบการ | ประเภทธุรกิจ | รายได้ | ภาษีที่ชำระ | ภ.พ.30 ปี 2559 | เทียบ 50/30 +- | หัก ณ. 3/53 | GFMIS | ข้อมูลรวม |
ตารางข้อมูลพร้อม Checkbox หลายแถวสำหรับ Batch Action
$this->widget('Jtablechkbox', array(
'dataProvider' => $dp,
'checkBoxColumn' => true,
'ajaxUrl' => array('batchUpdate'),
));ตาราง Checkbox Batch Submit แบบ POST เต็มรูปแบบ
$this->widget('Jtablechkboxpost', array(
'dataProvider' => $dp,
'postAction' => array('doBatch'),
));Press Submit and check console for URL-encoded form data that would be submitted.
Data submitted to the server:
รายการข้อมูลแบบ List View + Pagination
$this->widget('Jlist', array(
'dataProvider' => $dp,
'itemView' => '_view_item',
));ฟอร์มแก้ไขข้อมูล + File Upload + Datepicker
$this->widget('Jeditor', array(
'model' => $model,
'attributes' => array('name','date','file'),
));Dialog Modal Bootstrap แบบ AJAX + Form
$this->widget('Jmodal', array(
'id' => 'myModal',
'title' => 'หัวข้อ Modal',
'content' => '<p>เนื้อหา...</p>',
));Modal ถูกซ่อนไว้เป็นค่าเริ่มต้น
เมนูไอคอนแบบ Grid Dashboard
$this->widget('Jiconmenu', array(
'items' => array(
array('label'=>'เมนู1','url'=>array('x'),'icon'=>'fa-home'),
),
));สรุปข้อมูล Dashboard สั้นๆ (KPI Summary)
$this->widget('Jsummary', array(
'cards' => array(
array('label'=>'รายได้','value'=>'1.2M','icon'=>'fa-money'),
),
));ความสุข: วันนี้ ปีที่แล้ว วันนี้ ปีนี้ วันนี้ชาติที่แล้ว
เทียบกับมาตรฐานโลก
รายการ To-Do ที่มี / ทำเสร็จ พร้อม progress bar
$this->widget('Jtodos', array(
'items' => array(
array('label'=>'Task A','done'=>true),
array('label'=>'Task B','done'=>false),
),
));Highcharts Chart พื้นฐาน (Line/Bar/Pie)
$this->widget('Jhighchart', array(
'type' => 'line',
'series' => $dataSeries,
'title' => 'ชื่อกราฟ',
));Highcharts ขนาดใหญ่ Full Dashboard Size
$this->widget('Jhighchartbig', array(
'type' => 'column',
'series' => $series,
'height' => 500,
));ยังเป็นโครงเปล่า รอเขียนกราฟ
Jhighchart แทนได้ระหว่างนี้Wrapper Highcharts สำหรับตารางเรียกข้อมูล AJAX ออนไลน์
$this->widget('Jcallhighchart', array(
'dataUrl' => array('ajaxChartData'),
'type' => 'spline',
));Jcallhighchart ทำงานเบื้องหลัง ไม่มีส่วนแสดงผล
Highcharts.chart() ของคุณเองกราฟ Network/Graph แบบ Node-Edge
$this->widget('Jgraph', array(
'nodes' => $nodes,
'edges' => $edges,
));Highcharts Drill Down ลึกๆ ทีละชั้น
$this->widget('Jdrilldown', array(
'series_name' => 'Sales',
'xis_text' => 'Product',
'datatable' => true,
));สคริปต์ Template สำหรับสร้าง Widget ใหม่ คัดลอกมาแก้ไขได้ทันที
// Example: สร้าง MyWidget
class MyWidget extends CWidget {
public $title = '';
public function run() {
echo '<div class="box"><h3>'.$this->title.'</h3></div>';
}
}
// เรียกใช้งาน:
$this->widget('MyWidget', array('title'=>'สวัสดี'));