## 自定义表头 提供给开发者新增自己想要的表头字段模板`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; }) ``` > 结果展示：