牛骨文教育服务平台(让学习变的简单)

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();

效果:

再多添加几列

// 使用ZBuilder构建数据表格
return ZBuilder::make("table")
    ->addColumn("id", "ID")
    ->addColumn("username", "用户名")
    ->addColumn("nickname", "昵称")
    ->addColumn("email", "邮箱")
    ->addColumn("mobile", "手机号")
    ->addColumn("create_time", "创建时间")
    ->fetch();

效果:

设置数据

为了演示方便,我们给表格添加点数据,这些数据是从数据库读取出来的,后面会讲到。

// 读取用户数据
$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();

效果:

类型

默认情况下,添加的列都是以纯文本显示的,如果是一些特殊格式,比如日期时间、可编辑文本等,那么可以给字段指定类型,系统会自动处理。

比如上面的“创建时间”,从数据库取出来是时间戳,显示的时候,我们想把他格式化一下,那么可以给这个字段指明类型为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();

效果:

额外参数和默认值这两个参数会根据不同类型,含义有所不同,详情请看后面的章节

获取原值

有时候,可能某个字段需要用到两次,比如:

// 使用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__代替,其他字段也是如此。

1.0.7版本之后,无需使用__字段名__的形式,而是直接使用字段名。

// 使用ZBuilder构建数据表格
return ZBuilder::make("table")
    ->addColumns([ // 批量添加列
        ["id", "ID"],
        ["username", "用户名"],
        ["nickname", "昵称"],
        ["email", "邮箱"],
        ["mobile", "手机号"],
        ["status", "状态", "switch"],
        ["status", "状态"],
        ["create_time", "创建时间", "datetime"]
    ])
    ->fetch();

第一个status字段指定了类型为switch,所以以开关的形式展示,第二个status字段没有指定类型,所以输出原值。也可以指定其他类型,比如:

// 使用ZBuilder构建数据表格
return ZBuilder::make("table")
    ->addColumns([ // 批量添加列
        ["id", "ID"],
        ["username", "用户名"],
        ["nickname", "昵称"],
        ["email", "邮箱"],
        ["mobile", "手机号"],
        ["status", "状态", "switch"],
        ["status", "状态", "status"],
        ["create_time", "创建时间", "datetime"]
    ])
    ->fetch();

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();

提示:从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{
	width: 100px;
}

索引编号

1.0.5版本开始支持

如果希望增加索引编号显示,可以添加__INDEX__字段,比如:

->addColumn("__INDEX__", "#")

那么表格会显示从1开始的索引编号。