## addColumn('字段名', '标题', '类型' [, '默认值', '额外参数', 'css类名']) | 版本 | 新增功能 | | --- | --- | | 1.0.2 | 支持用`__字段名__`获取字段原值 | | 1.0.5 | 新增索引编号显示__INDEX__ | | 参数 | 含义 | 类型 | | --- | --- | --- | | name | 字段名 | string | | title | 标题 | string | | type | 类型 | string | | default | 默认值 | string | | param | 额外参数 | string | | class | css类名 | string | ### 小例子 给数据表格添加一列,一般只需用到两个参数,`字段名`和`标题`。 ~~~ // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('username', '用户名') ->fetch(); ~~~ 效果: ![](https://box.kancloud.cn/6d8ac669dfce251318b2ba32a69b4788_1608x297.png) 再多添加几列 ~~~ // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID') ->addColumn('username', '用户名') ->addColumn('nickname', '昵称') ->addColumn('email', '邮箱') ->addColumn('mobile', '手机号') ->addColumn('create_time', '创建时间') ->fetch(); ~~~ 效果: ![](https://box.kancloud.cn/2444317210cb2073c43ec6fe731dded9_1608x296.png) ### 设置数据 为了演示方便,我们给表格添加点数据,这些数据是从数据库读取出来的,后面会讲到。 ~~~ // 读取用户数据 $data_list = Db::name('admin_user')->select(); // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID') ->addColumn('username', '用户名') ->addColumn('nickname', '昵称') ->addColumn('email', '邮箱') ->addColumn('mobile', '手机号') ->addColumn('create_time', '创建时间') ->setRowList($data_list) // 设置表格数据 ->fetch(); ~~~ 效果: ![](https://box.kancloud.cn/266f22c5d77ee2a29d3fd8f38cd770aa_1587x199.png) ### 类型 默认情况下,添加的列都是以纯文本显示的,如果是一些特殊格式,比如日期时间、可编辑文本等,那么可以给字段指定类型,系统会自动处理。 比如上面的“创建时间”,从数据库取出来是时间戳,显示的时候,我们想把他格式化一下,那么可以给这个字段指明类型为`datetime`。 ~~~ // 读取用户数据 $data_list = Db::name('admin_user')->select(); // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID') ->addColumn('username', '用户名') ->addColumn('nickname', '昵称') ->addColumn('email', '邮箱') ->addColumn('mobile', '手机号') ->addColumn('create_time', '创建时间', 'datetime') ->setRowList($data_list) // 设置表格数据 ->fetch(); ~~~ 效果: ![](https://box.kancloud.cn/1e38a186be543750919bdbc6f0864c2d_1585x197.png) >[info] 额外参数和默认值这两个参数会根据不同类型,含义有所不同,详情请看后面的章节 #### 获取原值 有时候,可能某个字段需要用到两次,比如: ~~~ // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID') ->addColumn('mobile', '手机号') ->addColumn('create_time', '创建时间', 'datetime') ->addColumn('create_time', '创建时间', 'datetime') ->setRowList($data_list) // 设置表格数据 ->fetch(); ~~~ 这样的话,时间显示会错误,其他字段也同样,如果使用两次,可能会出现数据不正确的问题。当然,如果没有用到“类型”来处理字段值就不会显示错误。 ~~~ // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID') ->addColumn('mobile', '手机号') ->addColumn('create_time', '创建时间') ->addColumn('create_time', '创建时间') ->setRowList($data_list) // 设置表格数据 ->fetch(); ~~~ 出现这种情况的原因是,之前的`create_time`指定了类型为“datetime”,等于把`create_time`进行了格式化,然后第二次用`create_time`时,就不再是时间戳,而是第一个`create_time`格式化后的,自然就格式化错误了。 如果需要第二次使用`create_time`,可以用`__update_time__`代替,其他字段也是如此。 >[info] ### 1.0.7版本之后,无需使用`__字段名__`的形式,而是直接使用字段名。 ~~~ // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumns([ // 批量添加列 ['id', 'ID'], ['username', '用户名'], ['nickname', '昵称'], ['email', '邮箱'], ['mobile', '手机号'], ['status', '状态', 'switch'], ['status', '状态'], ['create_time', '创建时间', 'datetime'] ]) ->fetch(); ~~~ ![](https://box.kancloud.cn/4fc6c456371ffeaf9e5d3face8009ef3_291x181.png) 第一个`status`字段指定了类型为`switch`,所以以开关的形式展示,第二个`status`字段没有指定类型,所以输出原值。也可以指定其他类型,比如: ~~~ // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumns([ // 批量添加列 ['id', 'ID'], ['username', '用户名'], ['nickname', '昵称'], ['email', '邮箱'], ['mobile', '手机号'], ['status', '状态', 'switch'], ['status', '状态', 'status'], ['create_time', '创建时间', 'datetime'] ]) ->fetch(); ~~~ ![](https://box.kancloud.cn/676ffdf7c37cbba4416f175eb7483f7d_256x168.png) ### css类名 如果想设置某一列剧中显示,可以添加css类名`text-center`。 ~~~ // 读取用户数据 $data_list = Db::name('admin_user')->select(); // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID', '', '', '', 'text-center') ->setRowList($data_list) // 设置表格数据 ->fetch(); ~~~ 也可以添加多个css类名 ~~~ // 读取用户数据 $data_list = Db::name('admin_user')->select(); // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID', '', '', '', 'text-center my-class') ->setRowList($data_list) // 设置表格数据 ->fetch(); ~~~ >[info]提示:从1.0.2版本开始,表格的每个列表头增加了一个类名,方便使用css进行控制。类名为:column-列名 ~~~ // 读取用户数据 $data_list = Db::name('admin_user')->select(); // 使用ZBuilder构建数据表格 return ZBuilder::make('table') ->addColumn('id', 'ID', '', '', '', 'text-center my-class') ->setRowList($data_list) // 设置表格数据 ->css('style') // 引入自定义的css文件 ->fetch(); ~~~ style.css内容如下: ~~~ /*设置id列的宽度*/ .column-id{ min-width: 100px; } ~~~ ### 索引编号 >[info] 1.0.5版本开始支持 如果希望增加索引编号显示,可以添加`__INDEX__`字段,比如: ~~~ ->addColumn('__INDEX__', '#') ~~~ 那么表格会显示从1开始的索引编号。 ![](https://box.kancloud.cn/406b4cde46635d00bbb24ed560cb822f_793x529.png)