您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

Yii Framework 教程 (22)：Zii 元件庫簡介 - 高階 UI 元件與資料綁定

編輯：PHP 綜合知識

Zii 元件庫概覽

Zii 是 Yii 內建的高階元件庫，命名空間 zii.*、zii.widgets.*，在基礎 UI 元件之上封裝資料綁定、分頁排序、AJAX 互動等進階功能，大幅減少樣板代碼。

核心元件分類

類別	元件	用途
資料展示	CGridView	表格視圖，支援分頁、排序、篩選、行內編輯、批次操作
	CListView	列表視圖，自定義項目模板，支援分頁、排序、AJAX 更新
	CDetailView	單筆資料詳細檢視，屬性格式化、標籤自定義
互動元件	CAutoComplete	自動完成輸入框 (基於 jQuery UI Autocomplete)
	CJuiDatePicker	日期選擇器
	CJuiDialog	模態/非模態對話框
	CJuiTabs	分頁籤介面
拖放/排序	CJuiDraggable	可拖曳元素
	CJuiDroppable	可放置區域
	CJuiSortable	可排序列表
	CJuiSlider	滑桿輸入
其他	CMenu, CBreadcrumbs, CJuiAccordion, CJuiButton, CJuiProgressBar, CJuiSelectable, CJuiResizable	導航、手風琴、按鈕、進度條、可選取、可縮放

資料提供者介面 - 元件與資料解耦關鍵

所有資料展示元件均透過 IDataProvider 介面獲取資料，三大實作：

CActiveDataProvider：基於 ActiveRecord，criteria 條件、pagination、sort 完整支援。
CArrayDataProvider：基於原始陣列 (DAO 查詢結果、手工構造)，適合非 AR 資料源。
CSqlDataProvider：基於原生 SQL，需手動提供 totalItemCount。

範例：CGridView 綁定 CActiveDataProvider


// Controller
public function actionAdmin() {
    $dataProvider = new CActiveDataProvider('Post', [
        'criteria' => [
            'condition' => 'status=1',
            'order' => 'create_time DESC',
            'with' => ['author'],
        ],
        'pagination' => ['pageSize' => 20],
    ]);
    $this->render('admin', ['dataProvider' => $dataProvider]);
}

// View (admin.php)
$this->widget('zii.widgets.grid.CGridView', [
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'title',
        ['name' => 'author.name', 'header' => '作者'],
        'create_time:datetime',
        [
            'class' => 'CButtonColumn',
            'template' => '{view}{update}{delete}',
        ],
    ],
]);

進階用法提示

自定義欄位類別：繼承 CGridColumn 實現特殊渲染 (如圖片縮圖、狀態標籤、進度條)。
AJAX 分頁/排序：設定 'ajaxUpdate' => true (預開啟)，配合 Yii::app()->clientScript->registerScript 處理載入狀態。
客戶端驗證整合：CActiveForm + CGridView 行內編輯時，啟用 enableAjaxValidation。
匯出功能：搭配 EExcelView 擴展實現 GridView 資料匯出 Excel/CSV/PDF。