在 rich:extendedDataTable (RichFaces 4.x) 中显示/隐藏列答案

【问题标题】：Show/hide column in rich:extendedDataTable (RichFaces 4.x)在 rich:extendedDataTable (RichFaces 4.x) 中显示/隐藏列
【发布时间】：2011-10-12 08:57:36
【问题描述】：

RichFaces 的 rich:extendedDataTable 显示/隐藏列功能在 4.x 版中不再可用。任何想法如何以其他方式实现它？

我尝试使用 JavaScript，使用 document.getElementById() 函数并设置元素的 style.display 属性，但很难通过 id 定位元素，因为 rich:table 中的所有元素都是动态生成的。

任何帮助和提示将不胜感激。

【问题讨论】：

我不太确定如何做到这一点..但是您可以尝试使用 JQuery 来实现此目的..事实上我也在尝试使用 JQuery..您可以定义一个类或一个div 然后显示或隐藏此类或 div ..我不确定是否可以使用 jquery 来实现相同的功能，但您一定可以尝试一下...

标签： java jsf richfaces

【解决方案1】：

在 Richfaces 4.x extendedDataTable 中，您可以使用 css 样式同时控制该列的标题和正文。每列的 css 样式是使用前缀“.rf-edt-c-”和列 ID 创建的。如果您有一个 id 为“column1”的列，则 css 样式将为“.rf-edt-c-column1”。以下是在 Java Script 中隐藏/显示具有列 id 的列的示例。

<script type="text/javascript">
//<![CDATA[ 

    function hideColumn(columnId)
    {
        var styleSheets = document.styleSheets;
        for(var i=0;i<styleSheets.length;i++)
        {
            var rules = null;

            // IE and Chrome
            if(styleSheets[i].rules != null)
            {
                rules = styleSheets[i].rules;
            }
            // Firefox
            else if(styleSheets[i].cssRules != null)
            {
                rules = styleSheets[i].cssRules;
            }

            for(var j=0;j<rules.length;j++)
            {
                // Find the css style of that column
                if(rules[j].selectorText==".rf-edt-c-" + columnId)
                {
                    rules[j].style.display = "none";
                }
            }
        }
    }

    function showColumn(columnId)
    {
        var styleSheets = document.styleSheets;
        for(var i=0;i<styleSheets.length;i++)
        {
            var rules = null;

            // IE and Chrome
            if(styleSheets[i].rules != null)
            {
                rules = styleSheets[i].rules;
            }
            // Firefox
            else if(styleSheets[i].cssRules != null)
            {
                rules = styleSheets[i].cssRules;
            }

            for(var j=0;j<rules.length;j++)
            {
                // Find the css style of that column
                if(rules[j].selectorText==".rf-edt-c-" + columnId)
                {
                    rules[j].style.display = "";
                }
            }
        }
    }

//]]>
</script>

【讨论】：

这很有趣，谢谢你的回答。大约两年前我问了我的问题并且已经解决了这个问题（实际上避免了需要实施它），但无论如何我会在有时间的时候尝试一下。我还将您的答案标记为已接受（也因为您的答案是唯一有希望的答案）。

【解决方案2】：

只需将属性visible="false" 放入the rich:column 标记中，如下所示：

<rich:column id="name" label="Name" sortable="true" sortBy="#{edt.name}" visible="false">

RichFaces 版本错误，抱歉。

【讨论】：

【解决方案3】：

我在rich:column属性中添加了这个：

width="#{myBean.testDisplay('toDisplay')?'':'0px;border:none;'}"

这比使用rendered 更好，因为rendered 会出现列重新排列的错误。

【讨论】：

请编辑您的答案以正确格式化代码并解释您的答案，以便提问者理解为什么此代码效果更好。