JS实现点击按钮切换sheet页

左手的ㄟ右手 2022-02-02 01:59 451阅读 0赞

## **1.需求描述** ##

有的时候我们想实现上一页、下一页或跳转到指定sheet页。效果如下

![http://help.finereport.com/uploads/201808/20180808173208\_2703.gif][http_help.finereport.com_uploads_201808_20180808173208_2703.gif]

## **2.操作步骤** ##

选中按钮>添加按钮点击事件

![http://help.finereport.com/uploads/201808/20180808173208\_4622.jpg][http_help.finereport.com_uploads_201808_20180808173208_4622.jpg]

具体js如下

首页js

//跳转到首页(因为下标是从0开始) fr-sheetbutton-container为sheet页的集合

$(".fr-sheetbutton-container").eq(0).trigger("click");

上一页js

//fr-sheetbutton-container为sheet页的集合,获取集合长度

var len = $(".fr-sheetbutton-container").length;

//获取当前选中sheet所在下标位置

var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));

//如果当前下标为0 表示为首页。

if(index > 0) {

//不是首页跳转到上一页

$(".fr-sheetbutton-container").eq(index - 1).trigger("click");

}else{

//当前为首页跳转到最后一页 (因为下标从0开始，所以要长度减1)

$(".fr-sheetbutton-container").eq(len - 1).trigger("click");

}

下一页js

//fr-sheetbutton-container为sheet页的集合,获取集合长度

var len = $(".fr-sheetbutton-container").length;

//获取当前选中sheet所在下标（下标从0开始）

var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));

if(index < len) {

//如果当前下标index比len长度小1 表示已经为最后一页。

if(index == (len - 1)) {

//当前为最后一页。跳转到首页

$(".fr-sheetbutton-container").eq(0).trigger("click");

} else {

// 不为最后一页。跳转到下一页

$(".fr-sheetbutton-container").eq(index + 1).trigger("click");

}

}

尾页js

//fr-sheetbutton-container为sheet页的集合,获取集合长度

var len = $(".fr-sheetbutton-container").length;

//跳转到尾页(因为下标是从0开始) 所以得长度减1

$(".fr-sheetbutton-container").eq(len-1).trigger("click");

[http_help.finereport.com_uploads_201808_20180808173208_2703.gif]: /images/20220202/22dee1fd60fd466dba2760139e49b980.png
[http_help.finereport.com_uploads_201808_20180808173208_4622.jpg]: /images/20220202/6c042c3dbfe24b17a9ecedcdab39250c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，451人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS点击切换翻页

1.效果如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib...

我就是我/ 2024年04月20日 09:17/ 0 赞/ 95 阅读

相关 java swing实现点击按钮切换图片（简单实现）

> 本文教程，主要提供一个简单的例子，使用java swing完成点击按钮能够切换图片。目录一、程序预览二、程序代码 --------------------

柔光的暖阳◎/ 2024年02月22日 09:41/ 0 赞/ 89 阅读

相关练习：js实现点击切换图片

点击切换图片，控制是否可以循环切换 <!DOCTYPE html> <html lang="en"> <head> <met

Dear 丶/ 2023年07月07日 11:05/ 0 赞/ 202 阅读

相关 unity用image做按钮，实现点击按钮，切换文字

一，实现效果：用image做弹出框，点击按钮，切换弹出框文字的效果。 ![20200425102308406.png][] 二，Text的设置：创建脚本apph

桃扇骨/ 2023年05月21日 08:43/ 0 赞/ 44 阅读

相关 js 实现点击按钮复制文本

原理：浏览器提供了 copy 命令，可以复制选中的内容 document.execCommand("copy") 可以通过 select() 方法，选中输

素颜马尾好姑娘i/ 2023年02月13日 08:59/ 0 赞/ 48 阅读

相关 js实现轮播图点击按钮切换下一张图片

具体实现步骤： 2.1 点击右箭头让图片依次往后进行切换如果切换到最后一张回到第一张 1--2--3--4--1

女爷i/ 2022年09月11日 15:26/ 0 赞/ 315 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 977 阅读

相关 JS实现点击按钮切换sheet页

1.需求描述有的时候我们想实现上一页、下一页或跳转到指定sheet页。效果如下 ![http://help.finereport.com/uploads/201

左手的ㄟ右手/ 2022年02月02日 01:59/ 0 赞/ 452 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 453 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 453 阅读