PHPackages                             quansitech/qscmf-antd-builder - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. quansitech/qscmf-antd-builder

ActiveLibrary

quansitech/qscmf-antd-builder
=============================

antd qscmf builder

v1.7.1(3y ago)0604↓100%1[8 PRs](https://github.com/quansitech/qscmf-antd-builder/pulls)MITJavaScriptPHP >=7.2

Since Jun 22Pushed 3y ago1 watchersCompare

[ Source](https://github.com/quansitech/qscmf-antd-builder)[ Packagist](https://packagist.org/packages/quansitech/qscmf-antd-builder)[ RSS](/packages/quansitech-qscmf-antd-builder/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (1)Versions (25)Used By (0)

qscmf-antd-builder
==================

[](#qscmf-antd-builder)

antd 控件生成器

安装
--

[](#安装)

```
composer require quansitech/qscmf-antd-builder
```

控件列表
----

[](#控件列表)

- [Divider](https://github.com/quansitech/qscmf-antd-builder#divider)
- [Table](https://github.com/quansitech/qscmf-antd-builder#table)

### Divider

[](#divider)

分割线

最简单的分割线

```
$divider = new DividerBuilder();

echo $divider; //输出html
```

给分割线设置说明

```
$divider = new DividerBuilder();
$divider->setTitle('这是一个标题');
echo $divider; //输出html
```

修改分割线标题位置，默认为 center，即居中

```
// 左边
$divider = new DividerBuilder();
$divider->setTitle('这是一个左标题');
$divider->setTitlePosiition('left');
echo $divider;

// 右边
$divider = new DividerBuilder();
$divider->setTitle('这是一个右标题');
$divider->setTitlePosiition('right');
echo $divider;
```

实例化对象时设置标题和标题位置

```
echo new DividerBuilder('标题', 'right');
```

### Table

[](#table)

表格

最简单的表格

```
$table_builder = new TableBuilder();
//设置列头 title 是列标题  dataIndex对应的字段key
$table_builder->addColumn([ 'title' => 'Name', 'dataIndex' => 'name']);
$table_builder->addColumn([ 'title' => 'Age', 'dataIndex' => 'age']);
$table_builder->addColumn([ 'title' => 'Address', 'dataIndex' => 'address']);
//添加记录  key 为记录唯一标识，最好使用数据库的唯一id
//其余是记录的键值对
$table_builder->addRow(['key' => 1, 'name' => 'John Brown', 'age' => 32, 'address' => 'New York No. 1 Lake Park']);
$table_builder->addRow(['key' => 2, 'name' => 'Jim Green', 'age' => 42, 'address' => 'London No. 1 Lake Park']);
$table_builder->addRow(['key' => 3, 'name' => 'Joe Black', 'age' => 32, 'address' => 'Sidney No. 1 Lake Park']);

echo $table_builder; //输出html
```

**带有筛选条件的表格**

```
// 创建表格及添加数据
function mockData(){
    for($i=0;$i $i,
            'name' => 'name_'.$i,
            'nick_name' => 'nick_name_'.$i,
            'num' => $i,
            'status' => rand(0,1),
            'color' => array_rand(['R','G','B']),
            'date' => '2020',
            'date_range' => '2021-2022',
        ];
    }

    return $data;
}

$table_builder = new \AntdBuilder\TableBuilder();
$table_builder->addColumn([ 'title' => 'name', 'dataIndex' => 'name']);
$table_builder->addColumn([ 'title' => 'nick_name', 'dataIndex' => 'nick_name']);
$table_builder->addColumn([ 'title' => 'num', 'dataIndex' => 'num']);
$table_builder->addColumn([ 'title' => 'status', 'dataIndex' => 'status']);
$table_builder->addColumn([ 'title' => 'color', 'dataIndex' => 'color']);
$table_builder->addColumn([ 'title' => 'date', 'dataIndex' => 'date']);
$table_builder->addColumn([ 'title' => 'date_range', 'dataIndex' => 'date_range']);

$data = $this->mockData();
$list_data = $data;

foreach ($list_data as &$v){
    $temp = $v;
    $temp['key'] = $v['id'];

    $table_builder->addRow($temp);
}
```

筛选通用参数说明

参数说明类型默认值name列属性值，即data.dataIndexstringtext筛选项标题stringtype筛选类型，可选值请看 筛选类型及其options参数说明stringrule筛选规则，可选值请看 筛选规则说明stringchangeThenSearch筛选内容改变时马上筛选数据，例如选择下拉框值即筛选数据，若需要应该设置为 "1"boolean I stringfalseshowLabel是否在左侧显示筛选项标题，若需要应该设置为 "1"boolean I stringfalseoptions筛选项额外配置，具体请看类型说明；使用自定义筛选规则时应设置callback，具体请看类型说明中的 使用回调自定义规则array筛选类型及其options参数说明

- 文本框：TableBuilder::FILTER\_TYPE\_INPUT
- 下拉框单选：TableBuilder::FILTER\_TYPE\_SELECT

    参数说明类型默认值options选项，格式为\[\["value"=>"value", "label"=>"label"\]\]arrayshowSearch支持文本搜索选项，若需要应该设置为 "1"boolean I stringfalsewidth宽度string100px
- 下拉框多选：TableBuilder::FILTER\_TYPE\_MULTI\_SELECT

    参数说明类型默认值options选项，格式为\[\["value"=>"value", "label"=>"label"\]\]arraywidth宽度string100px
- 日期：TableBuilder::FILTER\_TYPE\_DATE

    参数说明类型默认值format设置日期格式stringpicker设置选择器类型string，可选值 date I week I month I quarter I yeardate
- 日期范围：TableBuilder::FILTER\_TYPE\_DATE\_RANGE

    参数说明类型默认值format设置日期格式\[string,string\]picker设置选择器类型string，可选值 date I week I month I quarter I yeardateshowTime增加时间选择功能booleanfalsevalueSeparator值分隔符string-

筛选规则说明

- 模糊搜索字符串：wildcard
- 精准搜索字符串：exact
- 列表值处于数组内：in
- 小于：lt
- 小于等于：elt
- 大于：gt
- 大于等于：egt
- 列表值处于数字区间：between
- 使用回调自定义规则：callback

    ```
    需要配置options参数，添加callback的值
    callback只需要定义 js function 的 body，默认接收的参数是：value record searchData
    function 返回的结果应为 true/false，返回false则表示需要过滤该条数据。

    例如需要精准匹配列表值与搜索字符串： return value === searchData;

    ```

    参数说明value列的具体值，即name的值record一行的值searchData搜索内容

使用说明

- 文本模糊搜索

    ```
    // 参数说明
    // $name
    // $text
    // $showLabel 默认为 false

    $table_builder->addFuzzyFilter('name', '模糊搜索');
    ```
- 文本精准搜索

    ```
    // 参数说明
    // $name
    // $text
    // $showLabel 默认为 false

    $table_builder->addExactFilter('name', '精准搜索');
    ```
- 下拉框单选

    ```
    $status_list = array_map(function($value){
      return ['value' => $value, 'label' => $value];
      },[0,1]);

    // 参数说明
    // $name
    // $text
    // $options
    // $showLabel 默认为 false
    // $showSearch 默认为 false
    // $width 默认为 null

    $table_builder->addSelectFilter('status', '状态', $status_list);
    ```
- 下拉框多选

    ```
    $status_list = array_map(function($value){
      return ['value' => $value, 'label' => $value];
      },[0,1]);

    // 参数说明
    // $name
    // $text
    // $options
    // $showLabel 默认为 false
    // $width 默认为 null

    $table_builder->addMultiSelectFilter('status', '状态多选', $status_list);
    ```
- 日期筛选

    ```
    // 参数说明
    // $name
    // $text
    // $rule
    // $picker 默认为 'date'
    // $format 默认为 ''
    // $showLabel 默认为 false

    $table_builder->addDateFilter('date', '年份', TableBuilder::FILTER_RULE_LT, 'year');
    ```
- 日期范围筛选

    ```
    // $name
    // $text
    // $rule
    // $picker 默认为 'date'
    // $format 默认为 ''
    // $showLabel 默认为 false

    $table_builder->addDateRangeFilter('date','年份范围', TableBuilder::FILTER_RULE_BETWEEN, 'year');
    ```
- 自定义类型与使用回调筛选规则

    ```
    // 参数说明
    // $name
    // $text
    // $type
    // $callback
    // $showLabel 默认为 false

    $table_builder->addSelfFilter('name','自定义精准搜索', TableBuilder::FILTER_TYPE_INPUT, 'return value === searchData;');
    ```
- 自定义类型与筛选规则

    ```
    // 请看通用参数以及对应类型参数说明使用

    $table_builder->addFilter(['name' => 'nick_name', 'text'=>'自定义模糊搜索', 'type' => TableBuilder::FILTER_TYPE_INPUT, 'rule' => TableBuilder::FILTER_RULE_WILDCARD, 'changeThenSearch' => false]);
    ```

**带有排序的表格**

排序参数说明

参数说明类型默认值name即data.dataIndexstringtype排序类型，可选值请看 排序类型及其使用说明string I nullnulloptions排序项额外配置，使用自定义排序规则时应设置callback，具体请看排序类型及其使用说明中的 使用回调函数自定义规则array排序类型及其使用说明

- 默认排序，即数字的升序或者降序排序：null

    ```
    // 参数说明
    // $name

    $table_builder->addDefSorter('num');
    ```
- 使用回调函数自定义规则：callback

    ```
    需要配置options参数，添加callback的值
    callback只需要定义 js function 的 body，默认接收的参数是：rowA rowB，为比较的两个行数据。
    function 返回的结果应该是一个小于、等于或大于0的整数，当小于0时，rowA在rowB前；当大于0时rowB在rowA前；当等于0时rowA与rowB相等。

    例如： return rowA.num-rowB.num;

    ```

    ```
    // 参数说明
    // $name
    // $callback

    $table_builder->addSelfSorter('color', "return rowA.color-rowB.color;");
    ```

**使用远程加载数据的表格**

- 使用setApiUrl设置接口地址
- 接口返回数据格式

    ```
    必须要返回的字段

    ```

data.list 为表格数据源 data.count 为数据总条数

```
```php
public function getList(){
    $get_data = I("get.");
    $page = $get_data['page']??1;
    $per_page = $get_data['per_page']??20;

    $map = [
        // 筛选数据
    ];
    $model = D("User");

    $count = $model->where($map)->count();
    $data_list = $model->getListForPage($map, $page, $per_page);

    $this->ajaxReturn(['status' => 1, "info" => '', 'data' => ['list' => $data_list, 'count' => $count]]);
}

```

- 设置筛选项，与*带有筛选条件的表格*用法一致，可自由组合

    ```
    仅筛选项样式有效，筛选规则需要接口处理

    ```

```
$table_builder = new TableBuilder();
$table_builder->addColumn(['title' => 'name', 'dataIndex' => 'name', 'sorter' => true]);
$table_builder->addColumn(['title' => 'remark', 'dataIndex' => 'remark']);
$table_builder->addColumn(['title' => 'status', 'dataIndex' => 'status']);
$table_builder->addColumn(['title' => 'email', 'dataIndex' => 'email']);
$table_builder->addColumn(['title' => 'tel', 'dataIndex' => 'tel']);
$table_builder->addColumn(['title' => 'top', 'dataIndex' => 'top', 'filters' => [['text' => 'is_top', 'value' => '0'], ['text' => 'not top', 'value' => '1']]]);
$table_builder->addColumn(['title' => 'work_date', 'dataIndex' => 'work_date']);

$table_builder->setApiUrl(U('getList',['id' => 1], true, true));

$table_builder->addDefSorter("status");

$table_builder->addSelectFilter("key", "search", [["value"=>"name", "label"=>"name"],["value"=>"email", "label"=>"email"]]);
$table_builder->addFuzzyFilter("word", "word");

$table_builder->addFuzzyFilter("name", "name", true);
$table_builder->addExactFilter("email", "email", true);
$table_builder->addSelectFilter("status", "status", [["value"=>"value", "label"=>"label"]]    );
$table_builder->addMultiSelectFilter("status_m", "status_m", [["value"=>"value", "label"=>"label"],["value"=>"value2", "label"=>"label2"],["value"=>"value3", "label"=>"label3"]]    );
$table_builder->addDateFilter("work_date", "work_date",TableBuilder::FILTER_RULE_CALLBACK);
$table_builder->addDateRangeFilter("work_date_range", "work_date_range", TableBuilder::FILTER_RULE_CALLBACK);
```

**自定义单元格属性**

```
通过设置数据的 _cellProperties 的值来自定义单元格的列、行的属性

```

- 表格拆分/合并 ```
    设置字段的 rowSpan colSpan值
    当rowSpan/colSpan为0时，不渲染

    ```

    ```
    // 合并表头
    $table_builder = new TableBuilder();
    $table_builder->addColumn([ 'title' => '合同编号', 'dataIndex' => 'id']);
    $table_builder->addColumn([ 'title' => '签约日期', 'dataIndex' => 'code', 'colSpan' => 2]);
    // 此表头会被合并，不展示
    $table_builder->addColumn([ 'title' => '项目名称', 'dataIndex' => 'name', 'colSpan' => 0]);

    // 将id相同的数据合并展示，列出不同的name
    $list_data = [
      ['id' => 1, 'code' => '1', 'name' => 'name1_1', '_cellProperties' => ['id' => ['rowSpan' => 4], 'code' => ['rowSpan' => 4], 'name' => ['rowSpan' => 1]]],
      ['id' => 1, 'code' => '1', 'name' => 'name1_2', '_cellProperties' => ['id' => ['rowSpan' => 0], 'code' => ['rowSpan' => 0], 'name' => ['rowSpan' => 1]]],
      ['id' => 1, 'code' => '1', 'name' => 'name1_3', '_cellProperties' => ['id' => ['rowSpan' => 0], 'code' => ['rowSpan' => 0], 'name' => ['rowSpan' => 1]]],
      ['id' => 1, 'code' => '1', 'name' => 'name1_4', '_cellProperties' => ['id' => ['rowSpan' => 0], 'code' => ['rowSpan' => 0], 'name' => ['rowSpan' => 1]]],
      ['id' => 2, 'code' => '2', 'name' => 'name2_1', '_cellProperties' => ['id' => ['rowSpan' => 2], 'code' => ['rowSpan' => 2], 'name' => ['rowSpan' => 1]]],
      ['id' => 2, 'code' => '2', 'name' => 'name2_2', '_cellProperties' => ['id' => ['rowSpan' => 0], 'code' => ['rowSpan' => 0], 'name' => ['rowSpan' => 1]]],
      ['id' => 3, 'code' => '3', 'name' => 'name3_1', '_cellProperties' => ['id' => ['rowSpan' => 1], 'code' => ['rowSpan' => 1], 'name' => ['rowSpan' => 1]]],
      ['id' => 4, 'code' => '4', 'name' => 'name4_1'],
    ];

    foreach ($list_data as &$v){
       $table_builder->addRow($v);
    }

    echo $table_builder;
    ```
- 表格样式修改 ```
    设置字段的 className值

    ```

    ```
    $table_builder = new TableBuilder();
    $table_builder->addColumn([ 'title' => '合同编号', 'dataIndex' => 'id']);
    $table_builder->addColumn([ 'title' => '签约日期', 'dataIndex' => 'code']);

    // 修改code的背景色
    // 自定义样式类，如 bg-green {background-color:#bbe7c1;}
    $list_data = [
     ['id' => 1, 'code' => '1', 'name' => 'name1_1', '_cellProperties' => ['code' => ['className' => 'bg-green']]],
    ];

    foreach ($list_data as &$v){
      $table_builder->addRow($v);
    }

    echo $table_builder;
    ```

**取消分页**

```
远程加载数据的表格无效

```

```
$table_builder = new TableBuilder();
$table_builder->setPagination(false);
```

### Collapse

[](#collapse)

折叠卡

最简单的折叠卡

```
$collapse = new CollapseBuilder();
$collapse->addPanel('这是个标题1', '这里可以写html');
$collapse->addPanel('这是个标题2', '这里可以写html');
echo $collapse; //输出html
```

### Descriptions

[](#descriptions)

描述列表

示例:

```
$descriptions = new DescriptionsBuilder();
$descriptions->setBordered(true);
$descriptions->addItem('抬头', $title)
    ->addItem('纳税人识别号', $tax_code, ['span' => 2])
    ->addItem('图片', ['https://demo.test/demo.png', 'https://demo.test/demo.png'], ['type' => 'image'])
    ->addItem('html', "123  456", ['type' => 'html']);

echo $descriptions;
```

函数说明:

- setBordered

    指定是否使用边框表格的展示方式

    参数说明必填默认值bordered指定是否使用边框表格的展示方式否false
- addItem

    添加展示列

    参数说明必填默认值label列标题是content内容是option配置否\[ 'type' => '', 'span' => 0\]option.type类型
    1. image 图片 content需要填写图片地址
     content也可以填入数组表示多图展示
    2. html content可以输入简单的html进行信息展示否textoption.span列宽 2表示占据两列，以此类推否0

### Datepicker

[](#datepicker)

日期查询控件

示例:

```
$datepicker = new DatepickerBuilder(DatepickerBuilder::TYPE_RANGEPICKER);
$date_range = $datepicker->parseParam(I('get.'));
if(count($date_range) === 0){
   $start = date("Y", time()) . "-01-01";
   $end = date("Y-m-d", time());
   $date_range = [
       $start,
       $end
   ];
}
$datepicker->setDefaultValue($date_range);

echo $datepicker;
```

函数说明:

- \_\_\_construct

    构造函数

    参数说明必填默认值type控件类型
    DatepickerBuilder::TYPE\_DATEPICKER 单日期选择

    DatepickerBuilder::TYPE\_RANGEPICKER 范围选择否DatepickerBuilder::TYPE\_DATEPICKERpickerDatepickerBuilder::PICKER\_DATE 日
    DatepickerBuilder::PICKER\_WEEK 周
    DatepickerBuilder::PICKER\_MONTH 月
    DatepickerBuilder::PICKER\_YEAR 年
    DatepickerBuilder::PICKER\_YEAR 季否DatepickerBuilder::PICKER\_DATE

- setType

    控件类型

    参数说明必填默认值type控件类型
    DatepickerBuilder::TYPE\_DATEPICKER 单日期选择

    DatepickerBuilder::TYPE\_RANGEPICKER 范围选择是无
- setPicker

    选择日期粒度

    参数说明必填默认值pickerDatepickerBuilder::PICKER\_DATE 日
    DatepickerBuilder::PICKER\_WEEK 周
    DatepickerBuilder::PICKER\_MONTH 月
    DatepickerBuilder::PICKER\_YEAR 年
    DatepickerBuilder::PICKER\_YEAR 季是无

- setDefaultValue

    设置日期

    参数说明必填默认值dates数组
    range类型时必须传递包含开始日期和结束日期得数组
    datepicker类型时只需传递一个日期
    格式为字符串
    如: \['2022-08-01', '2022-08-31'\]是无
- parseParam

    参数解释函数

    参数说明必填默认值get\_data数组
    url传参数组，一般为I('get.')
    是无返回值数组
    range类型，返回选择的开始和结束时间
    datepicker类型，返回选择的时间

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 62.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Recently: every ~73 days

Total

16

Last Release

1320d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/15a0610fee78753bdad92fd45c3506455c0fd45ae51924797b1841d260495a3f?d=identicon)[tiderjian](/maintainers/tiderjian)

---

Top Contributors

[![Xhiny](https://avatars.githubusercontent.com/u/35066497?v=4)](https://github.com/Xhiny "Xhiny (23 commits)")[![tiderjian](https://avatars.githubusercontent.com/u/1665649?v=4)](https://github.com/tiderjian "tiderjian (11 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 commits)")

---

Tags

componentqscmfantd

### Embed Badge

![Health badge](/badges/quansitech-qscmf-antd-builder/health.svg)

```
[![Health](https://phpackages.com/badges/quansitech-qscmf-antd-builder/health.svg)](https://phpackages.com/packages/quansitech-qscmf-antd-builder)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)