一个按钮的功能往往是单一的,例如:删除按钮只能删除 新增按钮只能新增

而开关按钮包含了关闭与开启该功能效果的作用就像该功能的开关一样,

完成它的原理很简单, 就是把数据中设置功能状态的True or False 相互切换

首先,给页面编写一个能相互切换状态的按钮

而按钮的具体样式是通过调用插件来完成的.

然后拿到当前需要修改的数据

然后进行判断,判断修改数据的当前状态是true(启动)还是false(关闭).

如果它是启动的状态那么按钮的样式就显示作废

相反它是关闭的状态那么按钮的样式就显示启用。就比如一台机器如果它的状态是启动着的那么开关按钮的作用就是关闭, 相反它的状态是关闭着的那么开关按钮的作用就是启动。
开关按钮

switchEnable是两个按钮的公用方法,

参数userTypeId确定按钮的位置

参选toVoidNo则是让方法判断数据的状态

当点击该按钮的时候 让按钮的作废和启用两个样式相互切换

如图是该按钮相互切换的样式.
开关按钮

当把页面按钮的样式对应写好后

为了用户体验还可以在修改前添加是否修改的提示框
开关按钮

提示框的字符串是由拼接的形式完成的.

点击按钮后图下则是根据按钮的状态点击后给用户的提示框(具体样式没有展示)
开关按钮开关按钮

修改完页面数据状态后

还得从页面向控制器发送请求修改数据库里的数据

请求的方法可以直接查询出数据对应的状态修改数据就好了

由于项目的不同修改数据的代码就不展示了。

相关文章: