tpextbuilder- Table 表格

支援的元件

/**
 * Methods.
 *
 * Field          field($name, $label = '', $colSize = 12)
 * Text           text($name, $label = '', $colSize = 12)
 * Checkbox       checkbox($name, $label = '', $colSize = 12)
 * Radio          radio($name, $label = '', $colSize = 12)
 * Select         select($name, $label = '', $colSize = 12)
 * MultipleSelect multipleSelect($name, $label = '', $colSize = 12)
 * Textarea       textarea($name, $label = '', $colSize = 12)
 * Color          color($name, $label = '', $colSize = 12)
 * RangeSlider    rangeSlider($name, $label = '', $colSize = 12)
 * File           file($name, $label = '', $colSize = 12)
 * Image          image($name, $label = '', $colSize = 12)
 * Date           date($name, $label = '', $colSize = 12)
 * Datetime       datetime($name, $label = '', $colSize = 12)
 * Time           time($name, $label = '', $colSize = 12)
 * Year           year($name, $label = '', $colSize = 12)
 * Month          month($name, $label = '', $colSize = 12)
 * TimeRange      timeRange($name, $label = '', $colSize = 12)
 * Number         number($name, $label = '', $colSize = 12)
 * SwitchBtn      switchBtn($name, $label = '', $colSize = 12)
 * Decimal        decimal($name, $label = '', $colSize = 12)
 * Html           html($html, $label = '', $colSize = 12)
 * Raw            raw($name, $label = '', $colSize = 12)
 * Show           show($name, $label = '', $colSize = 12)
 * Tags           tags($name, $label = '', $colSize = 12)
 * Icon           icon($name, $label = '', $colSize = 12)
 * MultipleImage  multipleImage($name, $label = '', $colSize = 12)
 * MultipleFile   multipleFile($name, $label = '', $colSize = 12)
 * Match          match($name, $label = '', $colSize = 12)
 * Matches        matches($name, $label = '', $colSize = 12)
 * Fields         fields($name, $label = '', $colSize = 12)
 *
 */

field引數說明

$name 欄位名稱 必填

$label 顯示label ，不填則取name值

$cloSize col-md-大小，暫無實際用處

• 理論上支援全部form元件，但一般來說，使用show,field,text,Checkbox,Radio,Select,Textarea等基本夠用了。
• show和field純顯示，text,Checkbox等表單元素支援在表格行內修改並失去焦點自動提交【配合autoPost】。

基本使用

    $table->show('id', 'ID');
    $table->show('username', '登入帳號');
    $table->text('name', '姓名')->autoPost()->getWrapper()->addStyle('max-width:80px');
    $table->show('role_name', '角色');
    $table->show('email', '電子郵箱')->default('無');
    $table->show('phone', '手機號')->default('無');
    $table->show('errors', '登入失敗');
    //多欄位組合使用`fields`
    $table->fields('times', '新增/更新時間')->with(
       $table->show('create_time', '新增時間'),
       $table->show('update_time', '修改時間')
    )->getWrapper()->addStyle('width:180px');

常用

• show() 顯示

• raw() 顯示帶html的內容

支援部分的form元件行內編輯

text,textarea,radio,select,checkbox

行內編輯續配合 autoPost($url)方法使用，url引數不傳則預設請求到同一個控制器的[autoPost]action

Toolbar工具欄

預設自動生成 [新增 / 批量刪除 / 重新整理] 即

btnAdd() / btnDelete() / btnRefresh()

完整實列

$table->getToolbar()
    ->btnAdd()
    ->btnEnable()
    ->btnDisable()
    ->btnDelete()
    ->btnExport()
    ->btnExports(['xlxs'=>'xlsx','xls'=>'xls'])
    ->btnRefresh();

使用 dropdown actions

$table->getToolbar()
    ->btnAdd()
    ->btnActions(
        [
            'enable' => ['url' => url('enable', ['state' => 1])，'label' => '啟用'],
            'disable' => ['url' => url('enable', ['state' => 0]), 'label' => '禁用'],
            'delete' => '刪除',
        ]
    )
    ->btnExport()
    ->btnExports(['xlxs'=>'xlsx','xls'=>'xls'])
    ->btnRefresh();

禁用工具欄

$table->useToolbar(false);

手動設定

//新增
btnAdd($url = '', $label = '新增', $class = 'btn-primary', $icon = 'mdi-plus', $attr = '');

//批量刪除
btnDelete($postUrl = '', $label = '刪除', $class = 'btn-danger', $icon = 'mdi-delete', $confirm = true, $attr = '');

//重新整理
btnRefresh($label = '', $class = 'btn-cyan', $icon = 'mdi-refresh', $attr = 'title="重新整理"');

//啟用
btnEnable($postUrl = '', $label = '啟用', $class = 'btn-success', $icon = 'mdi-check', $confirm = true, $attr = '');

//禁用
btnDisable($postUrl = '', $label = '禁用', $class = 'btn-warning', $icon = 'mdi-block-helper', $confirm = true, $attr = '');

//匯入
btnImport($afterSuccessUrl, $acceptedExts = "rar,zip,doc,docx,xls,xlsx,ppt,pptx,pdf", $fileSize = '20', $label = '匯入', $class = 'btn-pink', $icon = 'mdi-cloud-upload', $attr = 'title="上傳檔案"')

//匯出（預設，點選按鈕直接請求後臺）
btnExport($postUrl = '', $label = '匯出', $class = 'btn-pink', $icon = 'mdi-export', $attr = 'title="匯出"')

//匯出（可選，點選彈出選單，選擇匯出型別）
btnExports($items, $postUrl = '', $label = '匯出', $class = 'btn-secondary', $icon = 'mdi-export', $attr = 'title="匯出"')

其他，如果上面的不夠用，你可以新增自定義按鈕

//新增一個連結，開啟$ulr
btnLink($url, $label = '', $class = 'btn-secondary', $icon = 'mdi-checkbox-marked-outline', $attr = '')

//新增一個批量操作，自動附帶多選框選中的id傳送post請求到`$url`，`$confirm` 批量操作前是否顯示確認提示框。
btnPostChecked($url, $label = '', $class = 'btn-secondary', $icon = 'mdi-checkbox-marked-outline', $attr = '', $confirm = true)
//已選中多個id引數獲取
//$ids = input('post.ids');

//新增一個批量開啟，自動附帶多選框選中的id傳送get請求到`$url`。一般用於批量分配，移動等功能。
btnOpenChecked($url, $label = '', $class = 'btn-secondary', $icon = 'mdi-checkbox-marked-outline', $attr = '')

//已選中多個id引數獲取
//$ids = input('get.ids');

Actionbar動作欄

預設自動生成 [編輯 / 刪除] 即

btnEdit() / btnDelete()

• 基本使用

     $table->getActionbar()
            ->btnEdit()
            ->btnEnable()
            ->btnDisable()
            ->btnDelete()
            ->mapClass([
                'delete' => ['hidden' => '__h_del__'],
                'enable' => ['hidden' => '__h_en__'],
                'disable' => ['hidden' => '__h_dis__'],
            ]);

使用dropdown actions

$table->getActionbar()
    ->btnEdit()
    ->btnActions(
        [
            'enable' => ['url' => url('enable', ['state' => 1]), 'label' => '啟用'],
            'disable' => ['url' => url('enable', ['state' => 0]), 'label' => '禁用'],
            'delete' => '刪除',
            'view' => ['url' => url('view', ['id' => '__dat.pk__']), 'label' => '檢視','confirm' => '2'],
        ]
    )
    ->mapClass([
        'delete' => ['hidden' => '__h_del__'],
        'enable' => ['hidden' => '__h_en__'],
        'disable' => ['hidden' => '__h_dis__'],
    ]);

禁用

$table->useActionbar(false);

手動設定

//編輯
btnEdit($url = '', $label = '', $class = 'btn-primary', $icon = 'mdi-lead-pencil', $attr = 'title="編輯"')

//刪除
btnDelete($postUrl = '', $label = '', $class = 'btn-danger', $icon = 'mdi-delete', $confirm = true, $attr = 'title="刪除"')

//檢視
btnView($url = '', $label = '', $class = 'btn-primary', $icon = 'mdi-lead-pencil', $attr = 'title="檢視"')

//禁用
btnDisable($postUrl = '', $label = '', $class = 'btn-warning', $icon = 'mdi-block-helper', $confirm = true, $attr = 'title="禁用"')

//啟用
btnEnable($postUrl = '', $label = '', $class = 'btn-success', $icon = 'mdi-check', $confirm = true, $attr = 'title="啟用"')

其他，如果上面的不夠用，你可以自己新增自定義按鈕

//新增一個連結，開啟$ulr
btnLink($name = '', $url, $label = '', $class = 'btn-secondary', $icon = '', $attr = '')

• url('demo', ['id' => '__data.pk__']);

• 相當於 url('demo', ['id'=>'__data.id__']);，因為pk代表當前的主鍵。

• 其他引數：__data.欄位名__

  如：url('demo', ['id' => '__data.id__', 'type' => '__data.type__', 'status' => 1]);

//新增一個操作，自動附帶當前列id引數post到`$postUrl`，`$confirm` 操作前是否顯示確認提示框。
btnPostRowid($name = '', $postUrl, $label = '', $class = 'btn-secondary', $icon = 'mdi-checkbox-marked-outline', $attr = '', $confirm = true)

控制action的顯示禁用

$table->getActionbar()
    ->btnEdit()
    ->btnEnableAndDisable()
    ->btnView()
    ->btnDelete()
    ->btnPostRowid('clear_errors', url('clearErrors'), '', 'btn-info', 'mdi-backup-restore', 'title="重置登入失敗次數"')
    ->mapClass([
        'delete' => ['hidden' => '__h_del__'],//當這行資料的`__h_del__`欄位值為真(1或true)時，`enable`這個按鈕加上`hidden`的class
        'enable' => ['hidden' => '__h_en__'],
        'disable' => ['hidden' => '__h_dis__'],
        //也可以像下面這樣,就不用去迴圈陣列設定。
        //'enable' => ['hidden' => [1, 'enable']],//,當這行資料的`enable`欄位值為`1`時，`enable`這個按鈕加上`hidden`的class
        //'disable' => ['hidden' => [[0,2], 'enable']],//當這行資料的`enable`欄位值為`0`或`2`時，`disable`這個按鈕加上`hidden`的class
        //'disable' => ['hidden' => [2, 'enable', '>']],//當這行資料的`enable`欄位值大於`2`時，`disable`這個按鈕加上`hidden`的class
        //[2, 'enable', '>'] 中 `>` 為比較邏輯
        // 更多邏輯 : in_array|not_in_array|eq|gt|lt|egt|elt|strstr|not_strstr
        // eq|gt|lt|egt|elt等價於 =|>|<|>=|<=
        // !in_array 等價於not_in_array,!strstr等價於not_strstr

        // 'enable' => ['hidden' => function ($data) { //閉包，返回真則加上對應的
        //     return $data['enable'] == 1;
        // }],
    ]);
//迴圈陣列去設定
foreach ($data as &$d) {
    $d['__h_del__'] = $d['id'] == 1;
    $d['__h_en__'] = $d['enable'] == 1;
    $d['__h_dis__'] = $d['enable'] != 1 || $d['id'] == 1;
}
unset($d);

• delete|enable|disable按鈕名稱，如果是自定義[btnLink/btnPostRowid]則為傳入的$name.

• ‘hidden‘ => ‘__h_del__‘，當這一條記錄的__h_del__值為真時，這個action會加上hidden這個class

• 同理，可以加上disabled

'enable' => ['disabled' => '__dis_en__'],

ActionBtn的label支援使用變數

如評論({comments_count}) => 評論(12)

模型定義一個獲取器：

class ShopGoods extends Model
{
    public function getCommentCountAttr($value, $data)
    {
        return ShopGoodsComment::where(['goods_id' => $data['id']])->count();
    }
}

$table->getActionbar()
    ->btnEdit()
    ->btnLink('comments', url('/admin/shopgoodscomment/index', ['goods_id' => '__data.pk__']), '評論{comments_count}', 'btn-warning', 'mdi-comment-processing-outline')

addTop / addBottom ,頂部或底部內容

$table->addTop()->content()->fetch('demo', ['name' => '小明']);

$table->addBottom()->content()->display('我的名字叫{name}', ['name' => '小明']);

本作品採用《CC 協議》，轉載必須註明作者和本文連結