帆软: js 控制隐藏空行详解(普通报表)

2024-02-12 01:18

本文主要是介绍帆软: js 控制隐藏空行详解(普通报表),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

帆软:js控制空行的隐藏的详细讲解

  • 1.视频效果
  • 2.非js隐藏空行的实现方法---自愿学习
  • 3.实现思路
  • 4.操作步骤
  • 5.页面操作说明
  • 6.截图效果
  • 7.注意
  • 8.附:代码展示

1.视频效果

帆软隐藏空行,显示空行--单个表格效果

2.非js隐藏空行的实现方法—自愿学习

  • 帆软:隐藏空行(适用于N条数据).
  • :帆软:隐藏空行(包括空字符串,null,数字0或0.000形式).

3.实现思路

  • 循环表格的行,然后拼接每行里所有需要计算的td,判断拼接后的字符串是否为空或0即可,根据判断是否需要隐藏,从而实现隐藏空行

4.操作步骤

  • 按钮控件–属性(注意控件名,js里用)–事件(点击事件)–js
  • 如图:
    在这里插入图片描述
    在这里插入图片描述

5.页面操作说明

  • 点击【显示空行】按钮,按钮切换为【隐藏空行】
  • 再次点击【隐藏空行】,按钮又切换为【显示空行】
  • 如果没有查询结果或者没有点击查询,点击按钮不含切换

6.截图效果

在这里插入图片描述
在这里插入图片描述

7.注意

  • 主要是语法需要注意
  • //获取表格tr对象 var trObj = $(".x-table tr");
  • 还有 var td = trObj.eq(i).find("td"); var button = this.options.form.getWidgetByName("button0"); 等,这个js里主要的也就这仨了,其他就是逻辑实现,想了解更多帆软js,自己去官网上多了解一下即可

8.附:代码展示

/** 通过遍历表格每行的单元格进行单元格的拼接,来控制表格空行的隐藏* 隐藏的条件:同行里所有的数据列都是 空值/空字符串/0/0.00形式 即隐藏*///获取表格tr对象
var trObj = $(".x-table tr");
//获取tr的行数
var rowsNum = trObj.length;
var hideFlag = false;//控制未查询时,按钮显示值不允许切换
//开始遍历单元格,从第二行开始(表头不遍历)--可根据需求自行修改
for(var i = 1; i < rowsNum; i++) {var td = trObj.eq(i).find("td");var trStrs = "";//用来拼接各行需要遍历的单元格//遍历tr中的对象td,从第二列开始----可根据需求自行修改for(var j = 1; j < td.length; j++) {//_val是每个单元格值var tdValue = td.eq(j).text();//去除空格tdValue = $.trim(tdValue);//判断是否是空,如果不为空弹出单元格值(可根据需要更改)if(tdValue!="" && tdValue!=0){//如果是td是0.0000格式,也可以用0来判断trStrs += tdValue;}}if(trStrs==null || trStrs=="" || trStrs==0){//隐藏空行或者0//alert("隐藏:::"+trStrs);   	   $("#r-"+i+"-0").toggle();hideFlag = true;//是否需要隐藏标志设为true}else{//非0 非空的 不隐藏//alert("展示:::"+trStrs);}}
//点击按钮显示值切换(“隐藏空行”与“显示空行”切换)
var button = this.options.form.getWidgetByName("button0");
//alert(button.getValue());
if((button.getValue()=="隐藏空行") && hideFlag==true){button.setValue("显示空行");
}else{button.setValue("隐藏空行");
}
//buttonValue.setVisible(false);
//$("#fr-btn-BUTTON0").html("显示空行");//注意:控件名button0字母必须大写 这个也可以,但是value值不改变,只改变了页面显示的值,样式也改了

这篇关于帆软: js 控制隐藏空行详解(普通报表)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/701305

相关文章

Debezium 与 Apache Kafka 的集成方式步骤详解

《Debezium与ApacheKafka的集成方式步骤详解》本文详细介绍了如何将Debezium与ApacheKafka集成,包括集成概述、步骤、注意事项等,通过KafkaConnect,D... 目录一、集成概述二、集成步骤1. 准备 Kafka 环境2. 配置 Kafka Connect3. 安装 D

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》:本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程

Spring Cloud LoadBalancer 负载均衡详解

《SpringCloudLoadBalancer负载均衡详解》本文介绍了如何在SpringCloud中使用SpringCloudLoadBalancer实现客户端负载均衡,并详细讲解了轮询策略和... 目录1. 在 idea 上运行多个服务2. 问题引入3. 负载均衡4. Spring Cloud Load

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式:MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》:本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接(INNERJOIN)、左连接(LEFTJOIN)、右连接(RIGHTJOIN)、全外连接(FULLOUTER... 目录一、连接类型图表(ASCII 形式)二、前置代码(创建示例表)三、连接方式代码示例1. 内连接(I

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.

Java中八大包装类举例详解(通俗易懂)

《Java中八大包装类举例详解(通俗易懂)》:本文主要介绍Java中的包装类,包括它们的作用、特点、用途以及如何进行装箱和拆箱,包装类还提供了许多实用方法,如转换、获取基本类型值、比较和类型检测,... 目录一、包装类(Wrapper Class)1、简要介绍2、包装类特点3、包装类用途二、装箱和拆箱1、装