tpextbuilder- Displayers[元件]- Field

ichynul發表於2021-08-29

所有displayer的基類

直接輸出value(支援html),一般不直接使用。

{$value|raw}

table中使用:無label, 不支援col-md-n大小控制。

主要通用方法

方法 說明 備註
class($val) 設定field的class
labelClass($val) 設定label的class
attr($val) 設定field的屬性
addClass($val) 新增field的class
addAttr($val) 新增field的屬性
addStyle($val) 新增field的style
labelAttr($val) 新增label的屬性
size($label, $elemetm) 設定大小(label,field) 預設: 2, 8
help($text) 新增幫助資訊
readonly($val =true) 只讀
disabled($val =true) 禁用
required($val =true) 必填 主要是前端js驗證,不涉及後端
showLabel($val =true) 是否顯示label
default($val) 預設值
value($val) 設定值
to($tpl) 簡單的轉換
mapClass() 樣式匹配
mapClassGroup($GroupArr) 樣式組匹配
rendering($callback) 渲染前的回撥

to
支援模板變數:{val} 或 {其他欄位名}

$table->show('name','姓名')->to('{val}#{mobile}');//{val}代表當前欄位`name`值,{mobile}為這條記錄中的`mobile`欄位值。

$table->raw('link','連結')->to('<a href="{val}">{val}</a>');//渲染html要用`raw`或`field`

也可使用閉包:

$table->show('name', '姓名')->to(function ($value, $data) {
    return $value .'#'. $data['mobile'];//$value為當前欄位`status`的值,若要使用其他欄位,就使用`$data['field']`
});

mapClass

mapClass($values, $class, $field = '', $logic = 'in_array') 樣式匹配

mapClass(function closure(){...}, $class) 樣式匹配,使用閉包

$table->match('status','狀態')->mapClass(function ($value, $data) {
    return $value == 1;//$value為當前欄位`status`的值,若要使用其他欄位,就使用`$data['field']`
}, 'success');

mapClassGroup

mapClassGroup([[$values1, $class1, $field1 = '', $logic1 = 'in_array'], [$values2, $class2, $field2 = '', $logic2 = 'in_array']]]) 批量樣式匹配

mapClassGroup(['class1' => [$values1, $field1, $logic1], 'class2'=> [$values2, $field2, $logic2], ... ]) 批量樣式匹配,class作為陣列鍵

mapClassGroup(['class1' => function closure1(){...}, 'class2'=> function closure2(){...}, ... ]) 批量樣式匹配,使用閉包

$table->match('status','狀態')->mapClassGroup([
    'success' => function ($value, $data) {
        return $value == 1;//$value為當前欄位`status`的值,若要使用其他欄位,就使用`$data['field']`
    }, 
    'danger' => function ($value, $data) {
        return $value == 0;
    }
]);

$table->match('open', '狀態')->options(['0' => '關閉', '1' => '開啟'])->mapClass(1, 'hidden');

$table->match('pay_status', '支付狀態')
    ->options(['0' => '未支付', '1' => '已支付', '2' =>'已關閉'])
    ->mapClassGroup([[1, 'success'], [2, 'danger']]);

css 樣式:

span.the-field.default {
    color: #8b95a5;
}
span.the-field.primary {
    color: #33cabb;
}
span.the-field.success {
    color: #72b754;
}
span.the-field.info {
    color: #48b0f7;
}
span.the-field.warning {
    color: #faa64b;
}
span.the-field.danger {
    color: #f96868;
}
span.the-field.dark {
    color: #465161;
}
span.the-field.secondary {
    color: #e4e7ea;
}
span.the-field.purple {
    color: #926dde;
}
span.the-field.pink {
    color: #f96197;
}
span.the-field.cyan {
    color: #57c7d4;
}
span.the-field.yellow {
    color: #fcc525;
}

rendering

渲染前的回撥,非常具有靈活性

//實現類似於mapClass的效果,如果表格的某一列資料的姓名是[小明]那麼把手機號替換成****,並且加上[danger]樣式。
$table->show('mobile', '手機')->rendering(function ($field) {
    if ($field->data['name'] == '小明') {
        $field->addClass('danger');
        $field->data['mobile'] = '****';
    }
});

$table->show('mobile', '手機')->mapClass('小明', 'danger', 'name');
本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章