HisiPHP内置的表格构建器同表单构建器一样的简单，无需引入任何类库，与TP的模板赋值方法一样赋值即可，页面渲染方法与TP完全一致。
    下面提供一段示例代码，在后面的章节会针对不同的配置项做具体说明：

    1.     public function index()
    2.     {
    3.         if ($this->request->isAjax()) {
    4.             $page = $this->request->param('page/d', 1);
    5.             $limit = $this->request->param('limit/d', 20);
    6.             $title = $this->request->param('title');
    7.             $cid = $this->request->param('cid');
    8.             $createTime = $this->request->param('create_time');
    10.             $where = [];
    12.             $title && $where[] = ['title', 'like', "%{$title}%"];
    13.             $cid && $where[] = ['cid', 'in', $cid];
    15.             if ($createTime) {
    16.                 [$startTime, $endTime] = explode(' - ', $createTime);
    17.                 $where[] = ['create_time', 'between', [strtotime($startTime), strtotime($endTime)]];
    18.             }
    20.             $data = $this->modelArticle->where($where)->page($page)->limit($limit)->select();
    21.             $count = $this->modelArticle->count('id');
    22.             return $this->layuiJson($data, $count);
    23.         }
    25.         // 表格构建器
    26.         $assign['buildTable']['config'] = [// 配置文档 https://www.layui.com/doc/modules/table.html#options
    27.             'page' => true,
    28.             'cols' => [
    29.                 [
    30.                     'type' => 'checkbox',
    31.                 ],
    32.                 [
    33.                     'field' => 'cid',
    34.                     'title' => '所属分类',
    35.                     'templet' => '<div><a href="'.url('index').'?cid={{ d.cid }}" class="hisi-table-a-filter">{{ d.hasCategory.name || "---" }}</a></div>',
    36.                     'width' => 100,
    37.                     'align' => 'center',
    38.                 ],
    39.                 [
    40.                     'field' => 'title',
    41.                     'title' => '文章标题',
    42.                     'templet' => '<div><a href="/example/article/detail?id={{ d.id }}" target="_blank">{{ d.title }}</a></div>'
    43.                 ],
    44.                 [
    45.                     'field' => 'image',
    46.                     'title' => '图片预览',
    47.                     'align' => 'center',
    48.                     'type' => 'image',// 图片预览模式
    49.                     'width' => 100,
    50.                 ],
    51.                 [
    52.                     'field' => 'status',
    53.                     'title' => '状态',
    54.                     'type' => 'switch',// 状态切换
    55.                     'align' => 'center',
    56.                     'width' => 70,
    57.                 ],
    58.                 [
    59.                     'field' => 'create_time',
    60.                     'title' => '创建时间',
    61.                     'align' => 'center',
    62.                     'width' => 170,
    63.                 ],
    64.                 [
    65.                     'field' => 'title',
    66.                     'title' => '预览',
    67.                     'width' => 70,
    68.                     'templet' => '<div><a class="layui-btn layui-btn-xs layui-btn-normal" href="/example/article/detail?id={{ d.id }}" target="_blank">预览</a></div>'
    69.                 ],
    70.                 [
    71.                     'title' => '操作',
    72.                     'width' => 120,
    73.                     'align' => 'center',
    74.                     'button' => [
    75.                         [
    76.                             'title' => '编辑',
    77.                             'class' => 'layui-btn layui-btn-xs hisi-iframe',// 如需弹窗编辑 加 hisi-iframe
    78.                             'url' => url('edit'),
    79.                             'attrs' => [//定义标签的扩展属性
    80.                                 'data-options' => [
    81.                                     'width' => '800px'
    82.                                 ],
    83.                             ],
    84.                         ],
    85.                         [
    86.                             'title' => '删除',
    87.                             'class' => 'hisi-tr-del layui-btn layui-btn-xs layui-btn-danger',// 无刷新删除 必须加 hisi-tr-del
    88.                             'url' => url('delete'),
    89.                         ],
    90.                     ]
    91.                 ]
    92.             ],
    93.         ];
    95.         //表格工具栏
    96.         $assign['buildTable']['toolbar'] = [
    97.             [
    98.                 'title' => '添加',
    99.                 'url' => url('add'),// 推荐使用url函数定义，构建器渲染的时候会自动过滤权限
    100.                 'class' => 'hisi-iframe',
    101.                 'attrs' => [//定义标签的扩展属性
    102.                     'data-options' => [
    103.                         'width' => '800px'
    104.                     ],
    105.                 ],
    106.             ],
    107.             [
    108.                 'title' => '删除',
    109.                 'url' => url('delete'),
    110.                 'class' => 'hisi-table-ajax layui-btn-danger',
    111.             ],
    112.         ];
    114.         // 表格筛选器
    115.         $assign['buildTable']['filter'] = [
    116.             'items' => [
    117.                 [
    118.                     'type' => 'text',
    119.                     'title' => '标题',
    120.                     'name' => 'title',
    121.                 ],
    122.                 [
    123.                     'type' => 'date',
    124.                     'title' => '时间筛选',
    125.                     'name' => 'create_time',
    126.                     'attrs' => [
    127.                         'data-options' => [// 配置文档 https://www.layui.com/doc/modules/laydate.html#use
    128.                             'range' => true,
    129.                         ]
    130.                     ]
    131.                 ],
    132.                 [
    133.                     'type' => 'select+',
    134.                     'title' => '分类',
    135.                     'name' => 'cid',
    136.                     'attrs' => [
    137.                         'data-options' => [
    138.                             // 配置文档 https://maplemei.gitee.io/xm-select/#/component/options
    139.                             'autoRow' => true,
    140.                             'filterable' => false,
    141.                             'clickClose' => true,
    142.                             'radio' => true,
    143.                             'tree' => [
    144.                                 'show' => true,
    145.                                 'strict' => true,
    146.                             ],
    147.                             'prop' => [
    148.                                 'value' => 'id',
    149.                             ],
    150.                             'model' => [
    151.                                 'label' => [
    152.                                     'type' => 'text',
    153.                                 ],
    154.                             ],
    155.                             'data' => $this->getCategorys()
    156.                         ],
    157.                     ],
    158.                 ]
    159.             ],
    160.         ];
    163.         return $this->assign($assign)->fetch();
    164.     }

    image.png