button按钮

按钮统一配置,包括ajax类型、dialog类型、link类型、download类型、submit提交表单、dismiss关闭弹窗

  • 新增在列表页的上下操作按钮up down
  • 新增expanded类型,以及expanded_id,表示列表展开详情,见最下方(dev1.7以后的容器内的列表支持)

效果预览

结构配置

ajax类型

- model: btn
  content: 提交批量处理
  type: ajax
  icon: fa-user
  class_name: btn-info
  url: '{%url%}'
  refer: 'checkbox_name' #ajax类型独有字段
  need_reload: true #ajax类型独有字段
  return_url: ''
  submit_type: 'json'
  params:
    user_id: '{%id%}'
    user_name: '{%nav_tabs.active_index%}'

dialog类型

- model: btn
  content: 弹窗
  type: dialog
  dialog_id: detail_dialog #dialog类型独有字段
  params:
    user_id: '{%id%}'

link类型

- model: btn
  content: 跳转链接
  type: link
  href: 'http://www.qq.com'
  target: '_blank' #link类型独有字段

download类型

- model: btn
  content: 下载
  type: download
  href: '/platform/user/info'
  max_length: 20 # 如果列表总条数超过该最大条目,则弹窗进行分批下载,默认200条
  attention: '请确保上一次导出成功后再进行下次导出!否则可能导致失败' # 提示语

submit提交表单类型(可包括弹窗)

此处在提交后的返回值里面添加return_url字段即可实现跳转页面功能,如下所示

- model: btn
  content: 提交弹窗表单
  type: submit
{
  "ret": 0,
  "msg": "ok",
  "errorcode": 0,
  "data": {
    "return_url": "http://www.qq.com"
  }
}

dismiss类型

- model: btn
  content: 关闭弹窗
  type: dismiss

submitForm类型

暂时支持,仅用于表单头部提交按钮

- model: btn
  content: 提交表单
  type: submitForm

clipboard复制按钮

- model: btn
  type: clipboard
  icon: fa-clipboard
  content: '点我复制'
  clipcontent: '我是复制的内容' #需要复制的内容

up类型

- model: btn
  type: up
  icon: fa-arrow-up
  params:
    user_id: '{%id%}'

down类型

- model: btn
  type: down
  icon: fa-arrow-down
  params:
    user_id: '{%id%}'

submit_rank类型

与up/down配合 提交排序

- model: btn
  name: 提交排序
  type: submit_rank
  url: '{%url%}'

expanded类型

与preloader设置配合,实现表格展开详情,点击查看preloader说明

- model: btn
  type: expanded
  icon: fa-expand
  content: '展开详情'
  expanded_id: expanded_1 #preloader对应key
  params:
    id: '{%id%}'
    name: '{%mobile%}'

下拉按钮类型

如果按钮空间小,但是又需要多个按钮功能的时候,可以用下拉按钮,展开以后会有多个选项供点击

- model: btn
  name: Button下拉
  type: actions #下拉类型
  actions_list: #下拉里面的按钮
    - {model: btn, name: tree弹窗, type: dialog, dialog_id: tree_preloader}
    - {model: btn, name: 创建用户, type: link, href: '/platform/user/edit?id={%id%}'}

字段说明

字段 类型 含义 默认值
model String 该控件类型为btn -
content String 按钮名称 -
type String 按钮类型 包括:ajax, dialog, link, download, submitForm, submit, dismiss, clipboard, up, down -
icon String 按钮图标,可选配 -
class_name String 按钮样式的class名称 例如btn-default btn-info btn-danger btn-warning -
refer String 如果有更checkbox配合时才使用改字段,可选配,字段值是checkbox的name -
params Object 请求带上的参数,可选配 -
dialog_id String 如果type为dialog时配置,具体参考弹窗 -
href String 连接跳转地址,type为link或者download时配置 -
need_reload Boolean type为ajax时配置,ajax请求完成后是否刷新页面,true为刷新,可选配 false
return_url String type为ajax时配置,ajax请求完成后的跳转地址,可选配 false
submit_type String type为ajax时配置,ajax请求时的数据类型,可选配为json false
target String type为link时配置,跳转页面模式,值为_blank时打开新页面 -
clipcontent String type为clipboard时配置,需要复制的内容 -
actions_list Array 下拉菜单里面的按钮,配置为按钮数组 -
trigger_name String 按钮触发事件名称(用于submit和ajax),例如 trigger_name: 'wau.table.fast_render:list_table' 表示触发comp_id为list_table的列表组件的重新渲染事件 -

results matching ""

    No results matching ""