## 自定義表頭 提供給開發者新增自己想要的表頭字段模板`templet`，在調用表格構建器`cols`方法時使用。注意：`templet`名不能與系統提供的模板名沖突，否者會被系統模板覆蓋。 ## 使用 * 定義自定義表頭和可重寫方法 ```javascript // 必須使用模塊YunjField并繼承 layui.define(['TableColTemplet'], function (exports) { let TableColTemplet= layui.TableColTemplet; class DemoCol extends TableColTemplet{ constructor(options) { super(options); } // 返回模板內容 layout() { // 可根據屬性that.args來設置結構 } // 渲染前執行 async renderBefore() { return 'done'; } // 渲染后執行 async renderDone() { return 'done'; } // 定義額外的事件綁定 defineExtraEventBind() { } } // 模塊名需以 TableCol + 首字母大寫 exports('TableColDemo', DemoCol); }); ``` * 自定義表頭可調用方法 ```javascript layui.use(['yunj'], function () { let win = window; let doc = document; yunj.formCol("demo",{ "tableId":"test", "state":"all", "key":"demo_test", "args":{title:"測試表頭"} }).then(col=>{ // col為返回表頭對象，可通過表頭對象調用常用方法 ... }); } ``` 常用方法如下： * **col.render()** 表頭渲染 返回值：promise對象 > 示例：新增一個表頭模板`show_datetime`，用來顯示數據的操作時間。 * 首先，創建php文件：\application\demo\libs\control\cols\templet\ShowTime.php ```php namespace app\demo\libs\control\cols\templet; use yunj\control\cols\YunjCols; class ShowTime extends YunjCols { private static $instance; public static function instance(){ if (!self::$instance instanceof self){ self::$instance = new self(); } return self::$instance; } // 定義額外配置項（無額外配置項可不寫） protected function defineExtraArgs() : array { return [ 'format' => 'Y-m-d H:i:s', // 時間格式 ]; } // 處理配置項（不需要處理可不寫） protected function handleArgs(array $args) : array { return $args; } } ``` * 其次，創建js文件：/public/static/yunj/demo/js/modules/cols/templet/show-time.js ```javascript layui.define(['TableColTemplet'], function (exports) { let TableColTemplet = layui.TableColTemplet; class TableColShowTime extends TableColTemplet{ constructor(options) { super(options); } // 字段結構 layout(){ let that=this; return `<span class="layui-badge layui-bg-gray">{{ yunj.timestampFormat(d.${that.key},'${that.args.format}') }}</span>`; } } exports('TableColShowTime', TableColShowTime); }); ``` * 然后，添加配置：\application\yunj\config\control.php ```php return [ // 表格表頭模板 'cols'=>[ 'showTime'=>[ 'args'=>'\\app\\demo\\libs\\control\\cols\\templet\\ShowTime', 'module'=>'/static/yunj/demo/js/modules/cols/templet/show-time', ], ], ]; ``` * 最后，調用表格構建器配置字段 ```php $builder=YT('general_example') ->state(DbRowState::state()) ->cols(function ($state){ $cols=[ 'demo_showTime'=>[ 'title'=>'操作時間', 'templet'=>'showTime', ],... ]; return $cols; }) ``` > 結果展示：