createButtonApp

  • createButtonApp(config={onButtonClick:this.getDate.bind(this,’ddd’)})
  • config里的属性配置： | 属性 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | area | 如果页面中的有多个区域有按钮，这里的area当做筛选条件，只渲染按钮的后台数据中area字段为这里指定值的按钮 | string | | | onButtonClick | 按钮的点击事件 | function | | | buttonLimit | 最多可展示的按钮数量，指定了buttonLimit后，超出指定值的按钮将收入到’更多’下拉中 | number | 3 | | popContainer | 按钮渲染的位置，默认是body，需要生成按钮的dom节点 | body | |

createOprationButton

主要用于业务表格的操作列按钮配置

  • createOprationButton(wantedButtons=[],config={})
  • wantedButtons指的是在应用配置里的按钮code： | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | wantedButtons | 接受一个数组例如[‘print’,’output’] | string[] | |
  • config里的属性配置： | 属性 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | area | 如果页面中的有多个区域有按钮，这里的area当做筛选条件，只渲染按钮的后台数据中area字段为这里指定值的按钮 | string | | | onButtonClick | 按钮的点击事件 | function | | | buttonLimit | 最多可展示的按钮数量，指定了buttonLimit后，超出指定值的按钮将收入到’更多’下拉中 | number | 3 |

getButtons():获取所有的按钮数据

setButtons(buttons)设置按钮数据,一般模版上会带有配置过的按钮数据

参数 说明 类型 默认值
buttons 接受一个数组例如[{area: “page_header,table_row”,btncolor:”button_main”,key: “main”,title: “主要”,type: “general_btn”}] Array[]

setButtonDisabled(buttonId, flag)禁用按钮

参数格式

  1. ({buttonid:true/false})
  2. (‘buttonid’:true/false)
  3. ([‘buttonid1’,’buttonid2’],true/false) | 属性 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | buttonId | 按钮的code | string | | | flag | 布尔值 | boolean | |

getButtonDisabled（id）获取单个按钮禁用状态返回boolean

属性 说明 类型 默认值
id 按钮的code string

setButtonVisible(id,true)设置按钮显隐

参数格式

  1. ({buttonid:true/false})
  2. (‘buttonid’:true/false)
  3. ([‘buttonid1’,’buttonid2’],true/false)

setMainButton(buttonId, flag)设置按钮为主要按钮

  1. ({buttonid:true/false})

setPopContent(buttonId, content)

  • 设置操作行确认提示内容框，只对表格操作列中的按钮有效， 当content为空字符串的时候 不提示 | 属性 | 说明 | 类型 | 默认值 | 备注 | | —- | —- | —- | —- | —- | | buttonId | 按钮的code | string | | | | content | dom节点/字符串 | dom/string | | setButtons 方法之后调用 |

hideButtonsByAreas([area])隐藏区域按钮

属性 说明 类型 默认值 备注
area 按钮区域编码 string[] setButtons 方法之前调用
  • 模版内button数组的字段

以上所有方法的使用请注意this指向问题和箭头函数

属性 说明 类型 备注
type 按钮类型（创建按钮时必填否则无法确定create类型） string ‘general_btn’ : 普通按钮，’dropdown’: 下拉按钮，’buttongroup’: 按钮组，’divider’: 分割按钮，’more’: 更多按钮
key 按钮的 id,标识按钮唯一性的关键字段，绑定事件的时候根据按钮编码来执行对应的事件 string
btncolor 区分主要按钮和次要按钮 string ‘button_main’ : 主要按钮，’button_secondary’: 次要按钮
title 显示在按钮上的汉字对于带下拉功能的按钮（下拉按钮，分割下拉按钮，更多按钮）注册时，最外层父按钮下面的分组如果填了按钮名称，就会渲染成分组标题。不填按钮名称，只有一个按钮分组时不渲染分组信息，多于一个按钮分组时会渲染分割线。 string 如果titie为null且类型为’general_btn’普通按钮类型，按钮样式则为重置按钮（不包括按钮组中的普通按钮）
area 按钮在页面上要放置的区域，区域名称可以自定义，推荐使用有业务含义的字符串。 string 搭配业务使用时必填否则按钮不显示
keyboard 快捷键推荐使用组合方式触发 string A+B，如果需要有多个快捷键可以触发请使用’,’分隔开来
parentCode 上一级按钮的按钮编码 string
isenable 是否可见 boolean

Demo

  1. props.createUIDom({pagecode}, function(data) {
  2.     /* 隐藏区域按钮 */
  3.     props.button.hideButtonsByAreas(['header']);
  6.     /* 设置按钮数据,一般模版上会带有配置过的按钮数据 */
  7.     data.button && props.button.setButtons(data.button,()=>{})
  10.     /* 获取所有的按钮数据 */
  11.     var a =props.button.getButtons();
  13.   });
  onClick1 = (e,btnkey) => {
    var actionId = btnkey;  //对应的是应用注册里的按钮编码，即按钮的code

    /* 单个按钮显隐状态设置 */
    this.props.button.setButtonVisible(actionId, false);

    /* 设置按钮为主要按钮 */
    this.props.button.setMainButton(actionId, true)

  }
<div className="zuclass">
          {createButtonApp({
            area: 'zuclass',
            onButtonClick: this.onClick1.bind(this),
            popContainer: document.querySelector('.zuclass')
          })}
        </div>

onClick = (e,btnkey) => {
    var actionId = btnkey;  //对应的是应用注册里的按钮编码，即按钮的code

    /* 单个按钮禁用状态设置 */
    this.props.button.setButtonDisabled(actionId, true);

    /* 获取单个按钮禁用状态返回 */
    var b = this.props.button.getButtonDisabled(actionId);
    console.log(b);

    debugger

  }
  <div className="header">
          {createButtonApp({
            area: 'header',
            onButtonClick: this.onClick.bind(this),
            popContainer: document.querySelector('.header')
          })}
        </div>