ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
>[danger] 友情提示:构建器目前只支持HisiPHP Pro版本([我要升级](https://www.hisiphp.com/authorize.html)) HisiPHP的表格构建器是基于Layui的Table模块渲染的,所以表格的所有配置均与Layui的Table模块配置一样。 ## 基础参数一览表(config) | 参数 | 类型 | 必须 | 默认 | 说明 | --- | --- | --- | --- | --- | | cols | Array | Y | | 设置表头,详见下面的表头参数一览表 | | url | string | N | 当前URL | 异步数据接口 | | defaultToolbar | Array | N | \['filter'\] | 表头工具栏右侧图标,可选值(filter: 显示筛选图标,exports: 显示导出图标,print: 显示打印图标) | | width | Number | N | | 设定容器宽度 | | height | Number | N | | 设定容器高度 | | cellMinWidth | Number | N | | 所有常规单元格的最小宽度 | | done | String | N | | 数据渲染完的回调 | | data | Array | N | | 直接赋值数据展示,设置此参数后url参数配置无效 | | totalRow | Boolean | N | false | 是否开启合计行区域 | | page | Boolean | N | false | 开启分页 | | limit | Number | N | 10 | 每页显示的条数 | | limits | Array | N | \[10,20,30,40,50,60,70,80,90\] | 每页条数的选择项 | | loading | Boolean | N | true| 是否显示加载条 | | title | String | N | | 定义 table 的大标题(在文件导出等地方会用到) | | text | Object | N | | 自定义文本,如空数据时的异常提示等 | | skin | Stirng | N | | 用于设定表格风格,可选值: line (行边框风格),row (列边框风格),nob (无边框风格) | | even | Boolean | N | false | 隔行背景 | | size | String | N | | 设定表格尺寸,可选值:sm (小尺寸),lg (大尺寸) | ## 表头参数一览表(cols) | 参数 | 类型 | 必须 | 默认 | 说明 | --- | --- | --- | --- | --- | | type | String | N | | 设定列类型,目前只支持:`checkbox`、`switch` | | field | String | N | | 设定字段名,如果无type参数,此参数为必须 | | title | String | N | | 设定标题名称,如果无type参数,此参数为必须 | | width | Number/String | N | | 设定列宽 | | minWidth | Number | N | 60 | 当前常规单元格的最小宽度 | | LAY\_CHECKED | Boolean | N | false | 是否全选状态(复选框列开启后才有效) | | fixed | String | N | | 固定列,可选值有:*left*(固定在左)、*right*(固定在右) | | hide | Boolean | N | false | 是否初始隐藏列 | | totalRow | Boolean | N | false | 是否开启该列的自动合计功能 | | totalRowText | String | N | | 用于显示自定义的合计文本 | | sort | Boolean | N | false | 是否允许排序 | | unresize | Boolean | N | false | 是否禁用拖拽列宽 | | edit | String | N | | 单元格编辑类型,可选值:*text*(输入框) | | event | String | | | 自定义单元格点击事件名 | | style | String | N | | 自定义单元格样式(CSS样式) | | align | String | N | | 单元格排列方式,可选值有:*left*(默认)、*center*(居中)、*right*(居右) | | colspan | Number | N | 1 | 单元格所占列数(一般用于多级表头) | | rowspan | Number | N | 1 | 单元格所占行数(一般用于多级表头) | | templet | String | N | | 自定义列模板 | | toolbar | String | N | | 绑定列工具条 | | button | Array | N | | 操作按钮,请参考下面的解释 | >[info] 表头参数type为switch(开关)时,点击开关按钮会自动请求当前控制器的status方法(如果控制器未定义此方法,默认调用内置的通用方法) >[info] 表头参数设置了edit为text时,会自动将当前单元格编辑后的内容发送至当前控制器的setField方法(如果控制器未定义此方法,默认调用内置的通用方法) >[info] 表头参数button的格式如下: > [ ['title' => '编辑', 'class' => 'layui-btn', url=>url('edit'), param => ['参数名' => '参数值'], options => ['key' => 'value']], ['title' => '删除', 'class' => 'layui-btn', url=>url('del'), param => ['参数名' => '参数值'], options => ['key' => 'value']], ] 示例代码: ``` public function table() { $assign['buildTable']['config'] = [ 'page' => true, 'limit' => 20, 'toolbar' => false, 'cols' => [ [ 'type' => 'checkbox', ], [ 'field' => 'id', 'title' => 'ID', 'width' => 100, ], [ 'field' => 'title', 'title' => '客户名', 'width' => 200, ], [ 'field' => 'area', 'title' => '城市', 'width' => 200, ], [ 'field' => 'create_time', 'title' => '创建时间', 'width' => 200, ], // 操作按钮:第一种写法 [ 'title' => '操作', 'templet' => '<div><a href='.url('edit').' class="layui-btn layui-btn-xs layui-btn-normal">编辑</a><a href='.url('del').' class="layui-btn layui-btn-xs layui-btn-danger">删除</a></div>', ], // 操作按钮:使用button的写法【推荐】 [ 'title' => '操作', 'button' => [ [ 'title' => '编辑', 'class' => 'layui-btn layui-btn-xs layui-btn-normal', 'url' => url('edit'), 'param' => [ 'type' => '1', // 固定值示例 'name' => '{{d.title}}',// 使用变量获取当前列的标题 ],// 扩展参数[选填] 'options' => [],// 扩展数据,此参数主要是给js用的[选填] ], [ 'title' => '删除', 'class' => 'layui-btn layui-btn-xs layui-btn-danger', 'url' => url('delete'), 'options' => [],// 扩展数据[选填] ], ], ], ]; return $this->assign($assign)->fetch(); } ``` ![](https://box.kancloud.cn/8f30427109e9625686d2dc9b5107d3ef_1962x568.jpg)