finereport 实现点击多个按钮换色

最新推荐文章于 2024-07-19 13:44:53 发布

原创最新推荐文章于 2024-07-19 13:44:53 发布 · 2.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客主要介绍了如何在前端应用中对多个按钮进行初始化颜色设置，并实现点击事件来改变选中按钮的状态。通过JavaScript和CSS，代码示例展示了如何在button0、button1、button2三个按钮间切换颜色，使得被点击的按钮呈现蓝色背景，其余按钮变为灰色。这种方法适用于决策报表和普通报表场景，实现按钮交互的视觉反馈。

决策报表

1.对所要操作的按钮添加初始化事件（假如3个按钮可以设置第一个为蓝色，其余为灰色，颜色可以自己定义，代码如下）

var el = this.element.children();
el.css('background', '#1d5aad');

2.为每个按钮添加点击事件（button0~button2为每个组件的控件名。如下代码，获取按钮对象，点击button0时，按钮i颜色为蓝色，其余为灰色，同理，当点击button1时，button1为蓝色，其余为灰色。依次类推）

var trimbutton0 = _g().getWidgetByName("button0").element;
var trimbutton1 = _g().getWidgetByName("button1").element;
var trimbutton2 = _g().getWidgetByName("button2").element;
$(trimbutton0).css("background-color", "#1d5aad");
$(trimbutton0).children().css("background-color", "#1d5aad");
 
$(trimbutton1).css("background-color", "rgb(150,150,150)");
$(trimbutton1).children().css("background-color", "rgb(150,150,150)");

$(trimbutton2).css("background-color", "rgb(150,150,150)");
$(trimbutton2).children().css("background-color", "rgb(150,150,150)");

普通报表

普通报表获取对象的方式可能不一样，其余可以套用，直接上代码
1.初始化事件（每个按钮都要设置）

var el = this.element.children();
el.css('background', '#1d5aad');

2.点击事件

var trimbutton0 = this.options.form.getWidgetByName("button0").element.children();
var trimbutton1 = this.options.form.getWidgetByName("button1").element.children();
var trimbutton2 = this.options.form.getWidgetByName("button2").element.children();
//$(trimbutton_top3).css("background-color", "rgb(122,177,249)");
trimbutton0.css("background-color", "#1d5aad");
trimbutton1.css("background-color", "rgb(150,150,150)");
trimbutton2.css("background-color", "rgb(150,150,150)");

效果如下

效果图