开发者社区> 问答> 正文

宜搭报表页面如何根据筛选框显示/隐藏下面的表格

已经搭建好一个宜搭报表页面,包含2个筛选框和4个表格。
筛选框1:周期(必选)
筛选框2:部门

4个表格分别为:
表格1、2、3与筛选框1联动,显示指定周期的内容,部门固定
表格4与筛选框1和2都联动,显示指定周期和指定部门的内容。

第1个问题:
如何实现下面的效果:
(1)如果筛选框2为空,显示3个固定部门的表格,隐藏表格4。
(2)如果筛选框2选择了一个部门,则隐藏表格1、2、3,显示表格4。

第2个问题:
如何实现筛选框2的部门按照我指定的顺序下拉排序。

展开
收起
游客7ht34jzgyqs7s 2024-08-05 17:23:59 126 0
来自:钉钉宜搭
1 条回答
写回答
取消 提交回答
  • 若问题得到了解决,辛苦点下采纳回答哦~

    问题1:如何实现表格的动态显示和隐藏?
    显示固定部门的表格和隐藏表格4的逻辑:
    您可以在报表页面加载完成的事件中,使用原生JavaScript获取“筛选框2”的元素内容。如果内容为空,程序将自动隐藏表格4,并显示表格1、2和3。
    选择部门后隐藏部门表格、显示表格4的逻辑:
    同样在报表页面加载完毕后,您需要监听“筛选框2”的变化。当用户选择部门时,隐藏表格1、2和3,而显示表格4。
    以下是参考代码示例:

    document.addEventListener("DOMContentLoaded", function() {
        const departmentSelector = /* 获取筛选框2的DOM元素 */;
        const table1 = /* 获取表格1的DOM元素 */;
        const table2 = /* 获取表格2的DOM元素 */;
        const table3 = /* 获取表格3的DOM元素 */;
        const table4 = /* 获取表格4的DOM元素 */;
    
        // 初始显示状态
        if (!departmentSelector.value) {
            table1.style.display = 'block';
            table2.style.display = 'block';
            table3.style.display = 'block';
            table4.style.display = 'none';
        }
    
        // 监听筛选框变化
        departmentSelector.addEventListener('change', function() {
            if (departmentSelector.value) {
                table1.style.display = 'none';
                table2.style.display = 'none';
                table3.style.display = 'none';
                table4.style.display = 'block';
            } else {
                table1.style.display = 'block';
                table2.style.display = 'block';
                table3.style.display = 'block';
                table4.style.display = 'none';
            }
        });
    });
    

    问题2:如何实现筛选框的下拉排序?
    筛选器下拉列表的顺序通常会继承底表的排序。若要实现自定义顺序,您可以在底表的数据管理页面中进行排序设置。调整好排序后,筛选器会根据您在数据管理页中的顺序进行显示。

    总结来说:

    对于表格的动态显示/隐藏,您需要通过JavaScript进行状态监控和逻辑判断。
    对于筛选框排序,确保先在底表设置好顺序。

    2024-08-05 18:02:34
    赞同 34 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
相关文档: 宜搭
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载