https://github.com/quansitech/qscmf-buttontype-modal
qscmf 按钮类型组件--modal
https://github.com/quansitech/qscmf-buttontype-modal
Last synced: 11 months ago
JSON representation
qscmf 按钮类型组件--modal
- Host: GitHub
- URL: https://github.com/quansitech/qscmf-buttontype-modal
- Owner: quansitech
- License: mit
- Created: 2021-09-03T10:11:32.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-05T09:57:12.000Z (over 1 year ago)
- Last Synced: 2025-06-14T22:02:34.628Z (about 1 year ago)
- Language: PHP
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# qscmf-buttontype-modal
```text
qscmf 按钮类型组件--modal
可以向列表顶部、列表行、表单页添加此类型按钮
```
#### 安装
```php
composer require quansitech/qscmf-buttontype-modal
```
#### 添加按钮
[ModalButtonBuilder使用说明](https://github.com/quansitech/qscmf-buttontype-modal/blob/master/ModalButtonBuilder.md)
+ 向列表添加一个顶部按钮
```php
public function add(){
if (IS_POST) {
// 业务逻辑
}
else {
// 使用FormBuilder快速建立表单页面。
$builder = new \Qscmf\Builder\FormBuilder();
$builder
->setPostUrl(U('add'))
->addFormItem('nick_name', 'text', '用户名*')
->addFormItem('email', 'text', '电子邮箱*')
->addFormItem('telephone', 'text', '手机')
->addFormItem('pwd', 'password', '密码*')
->addFormItem('pwd1', 'password', '重复密码*')
->setShowBtn(false);
return $builder;
}
}
public function buildTopModal(){
return (new \Qs\ModalButton\ModalButtonBuilder())
->setTitle("新增")
->bindFormBuilder($this->add());
}
// 按钮options属性传入ModalButtonBuilder对象
(new \Qscmf\Builder\ListBuilder())->addTopButton('modal', ['title' => '新增'],'','',$this->buildTopModal())
```
+ 向列表添加一个行按钮
```php
public function edit($id){
if (IS_POST) {
// 业务逻辑
}
else {
$info = D('User')->getOne($id);
// 使用FormBuilder快速建立表单页面。
$builder = new \Qscmf\Builder\FormBuilder();
$builder
->setPostUrl(U('add'))
->addFormItem('nick_name', 'text', '用户名*')
->addFormItem('email', 'text', '电子邮箱*')
->addFormItem('telephone', 'text', '手机')
->addFormItem('pwd', 'password', '密码*')
->addFormItem('pwd1', 'password', '重复密码*')
->setFormData($info)
->setShowBtn(false);
return $builder;
}
}
public function buildEditFormModal($id ){
return (new \Qs\ModalButton\ModalButtonBuilder())
->bindFormBuilder($this->edit($id))
->setKeyboard(false)
->setBackdrop(false)
->setTitle('编辑');
}
$data_list = D('User')->select();
foreach($data_list as &$data){
$right_edit_form_modal = $this->buildEditFormModal($data['id']);
$data['list_edit_form'] = $right_edit_form_modal;
}
// 每一行数据需要定义'list_edit_form'的值，且该值为ModalButtonBuilder对象
(new \Qscmf\Builder\ListBuilder())
->addRightButton('modal',['title' => '编辑'], '', '', 'list_edit_form')
->setTableDataList($data_list)
```
+ 向表单添加一个按钮
```php
public function edit($id){
if (IS_POST) {
// 业务逻辑
}
else {
$info = D('User')->getOne($id);
// 使用FormBuilder快速建立表单页面。
$builder = new \Qscmf\Builder\FormBuilder();
$builder
->setPostUrl(U('add'))
->addFormItem('nick_name', 'text', '用户名*')
->addFormItem('email', 'text', '电子邮箱*')
->addFormItem('telephone', 'text', '手机')
->addFormItem('pwd', 'password', '密码*')
->addFormItem('pwd1', 'password', '重复密码*')
->setFormData($info)
->setShowBtn(false);
return $builder;
}
}
public function buildEditFormModal($id){
return (new \Qs\ModalButton\ModalButtonBuilder())
->bindFormBuilder($this->edit($id))
->setKeyboard(false)
->setBackdrop(false)
->setIsForward(false)
->setTitle('编辑');
}
$info = D('User')->getOne($id);
$info['form_edit_form'] = $this->buildEditFormModal($info['id'])
// 表单数据需要定义'form_edit_form'的值，且该值为ModalButtonBuilder对象
(new \Qscmf\Builder\FormBuilder())
->addButton('modal',['title' => '编辑'], '', '', 'form_edit_form')
->setFormData($info)
```
+ ajax的方式加载内容 (实验性功能)
> 1. 接口说明
>
> > + 需要返回JSON数据格式
> > + 若数据正常则设置status为1，否则为0
> > + 将需要返回的内容赋值给info
>
> 2. 用例
>
> ```php
> // 设置Modal 内容请求API
> protected function buildTopModal(){
> return (new \Qs\ModalButton\ModalButtonBuilder())
> ->setTitle("新增")
> ->setBackdrop(false)
> ->setKeyboard(false)
> ->setBodyApiUrl(U("add"));
> }
>
> // ListBuilder对应列配置
> ->addTopButton('modal', ['title' => '新增'],'','',$this->buildTopModal());
>
> public function add(){
>
> $builder = new FormBuilder();
> $builder
> ->addFormItem('title', 'text', '标题')
> ->addFormItem('summary', 'textarea', '简介')
> ->addFormItem('cover', 'picture', '封面', '尺寸为214*250px', ['width' => 214, 'height' => 250])
> ->setFormData($info)
> ->setShowBtn(false)
> ->setReadOnly(true);
>
> $this->ajaxReturn(['status' => 1, 'info' => $builder->build(true)]);
> }
> ```
+ 模态框表单获取ListBuilder选中的checkbox值
+ 按钮添加样式类 inject_selected
+ 可使用ModalButtonBuilder对象的setSelectedIdFieldName方法自定义对应的表单字段值，默认为 qslb_selected_ids
+ 用法
```php
$builder = new \Qscmf\Builder\ListBuilder();
$builder = $builder->setMetaTitle('可编辑测试列表');
$builder
->addTopButton('modal', ['title' => '新增', 'class' => "btn btn-primary inject_selected"],'','',$this->buildAddModal());
protected function buildAddModal(){
$modal = (new \Qs\ModalButton\ModalButtonBuilder());
return
$modal
->setTitle('新增可编辑测试')
->setBackdrop(false)
->setKeyboard(false)
->setSelectedIdFieldName("org_id")
->bindFormBuilder($this->add());
}
public function add(){
$builder = new FormBuilder();
$builder
->addFormItem('title', 'text', '标题')
->addFormItem('summary', 'textarea', '简介')
->addFormItem('cover', 'picture', '封面', '尺寸为214*250px', ['width' => 214, 'height' => 250])
->setFormData($info)
->setShowBtn(false);
return $builder;
}
}
```
#### 升级指南
[升级指南](https://github.com/quansitech/qscmf-buttontype-modal/blob/master/Upgrade.md)