按钮组件

概述

按钮在项目中是必不可少的存在，不管什么功能，每一步的操作都离不开他，按钮在程序中主要是用来捕捉事件并进行业务处理的，在权限(RBAC)权限模块中，可以根据不同的角色配置不同节点按钮的权限来控制同一个按钮在不同的账号中实现存在与否；权限相关我们后面会做一章节详细的讲解，这里我们重点介绍一下系统框架的UI组件部分；

查询按钮

查询按钮主要根据筛选条件，点击触发查询事件进行数据条件查询；

@render('WidgetComponent', ['name'=>'query|查询'])

• 参数解析

1. query：组件按钮名称,框架固定值；
2. 查询：查询组件的标题名称;

• 效果展示：

  

添加按钮

添加按钮主要触发事件进行打开新页面或者弹框来进行表单数据提交的功能，添加按钮组件构造并不复杂，通俗易懂；

@render('WidgetComponent', ['name'=>'add|添加职级'])

• 参数解析

1. add：组件按钮名称,框架固定值；
2. 添加职级：查询组件的标题名称;

• 效果展示：

  

批量删除

下面的章节《批量操作》中我们会详细的描述JS组件中批量操作相关内容，这里的UI组件批量删除跟他是配套使用的，此处按钮点击时触发的UI组件批量操作的时间来进行数据处理；

@render('WidgetComponent', ['name'=>'dall|批量删除'])

• 参数解析

1. dall：组件按钮名称,框架固定值；
2. 批量删除：查询组件的显示标题;

• 效果展示：

  

编辑按钮

编辑按钮目前是在数据列表中进行使用的,以小按钮的形式存在，使用非常简单;

@render('WidgetComponent', ['name'=>'edit|编辑'])

• 参数解析

1. edit：组件按钮名称,框架固定值；
2. 编辑：查询组件的显示标题;

• 效果展示：

  

删除按钮

删除按钮目前是在数据列表中进行使用的,以小按钮的形式存在，使用非常简单;

@render('WidgetComponent', ['name'=>'delete|删除'])

• 参数解析

1. delete：组件按钮名称,框架固定值；
2. 删除：查询组件的显示标题;

• 效果展示：

  

添加子级按钮

添加子级按钮目前是在数据列表中进行使用的,以小按钮的形式存在，使用非常简单;

@render('WidgetComponent', ['name'=>'addz|添加'])

• 参数解析

1. addz：组件按钮名称,框架固定值；
2. 添加：查询组件的显示标题;

• 效果展示：

  

展开按钮

在树状结构数据列表中，展开按钮事件可以使得所有折叠起来的数据进行动态全部展开，以完整的树结构进行展示；

@render('WidgetComponent', ['name'=>'expand|全部展开'])

• 参数解析

1. expand：组件按钮名称,框架固定值；
2. 全部展开：查询组件的显示标题;

• 效果展示：

  

折叠按钮

在树状结构数据列表中，折叠按钮事件可以使得所有折叠起来的数据进行动态全部折叠，数据列表中只显示第一层级的所有数据；

@render('WidgetComponent', ['name'=>'collapse|全部折叠'])

• 参数解析

1. collapse：组件按钮名称,框架固定值；
2. 全部折叠：查询组件的显示标题;

• 效果展示：

  

自定义按钮

上述我们所描述的按钮组件都是框架定义好的，每个组件都有一个固定组件名称，但是在很多实际使用中会有很多不仅仅限于添加、编辑、删除、查询等几种按钮，有时候用户在使用中更希望去自定义自己的按钮，因此根据实际情况和使用场景我们特地研发了自定义按钮组件；

@render('WidgetComponent', ['name'=>'permission|角色权限|layui-icon-set|layui-bg-cyan|2'])

• 参数解析

1. name：其中权限分配定义按钮标题名称，permission定义按钮的标识，layui-icon-set定义按钮的图标，layui-bg-cyan定义按钮的背景色，2定义按钮的类型：1表示大按钮 2表示小按钮；
2. 需要说明的是,上述是个案例，用户可以根据自己的需要对参数name中的值进行自定义；

• 效果展示：