咨询JSF DataGrid条件显示列时空div导致间隙的解决办法

针对你遇到的h:dataGrid中设置rendered="false"的列仍会生成空容器（如div/td）导致条目间隙过大的问题，以下是几种可行的解决方案：

1. 用CSS直接隐藏空容器 #

浏览器渲染后，通过开发者工具查看DataGrid生成的空元素结构，针对空单元格容器编写CSS规则强制隐藏：

/* 若生成空div单元格，根据实际结构调整选择器 */
.ui-datagrid-cell:empty {
    display: none;
}

/* 若为table结构的空td */
.ui-datagrid td:empty {
    display: none;
    border: none;
    padding: 0;
}

这种方式无需修改Java代码，适合快速修复样式问题。

2. 用JSTL <c:if> 动态控制列的存在 #

如果渲染条件是全局的（不依赖每行的item变量），可以用JSTL的<c:if>包裹整个h:column，条件不满足时列不会被加入组件树，自然不会生成空容器：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<h:datagrid var="item" value="#{itemList}" columns="#{someCode}">
    <c:if test="#{someCondition}">
        <h:column>
            <!-- 列内容 -->
        </h:column>
    </c:if>
</h:datagrid>

注意：<c:if>在视图构建阶段求值，若条件依赖item（每行变量）则不适用，此时item尚未初始化。

3. 动态调整columns属性值 #

若目标列在所有行中都无需显示，可动态修改columns取值，将列数减少1：

// 在对应Bean中添加计算列数的方法
public int calculateColumns() {
    int originalColumns = getSomeCodeValue(); // 原有列数逻辑
    if (!someCondition) { // 条件不满足时列数减1
        originalColumns--;
    }
    return originalColumns;
}

页面中引用该方法：

<h:datagrid var="item" value="#{itemList}" columns="#{yourBean.calculateColumns()}">
    <h:column rendered="#{someCondition}">
        <!-- 列内容 -->
    </h:column>
    <!-- 其他列 -->
</h:datagrid>

该方法确保DataGrid列数与实际渲染列匹配，避免空容器占位。

4. 自定义DataGrid渲染器（进阶方案） #

若以上方法均不满足需求，可自定义h:dataGrid渲染器，从根源跳过空容器生成：

1. 继承JSF默认的DataGrid渲染器（如com.sun.faces.renderkit.html_basic.TableRenderer，根据JSF实现调整）
2. 重写encodeColumn方法，添加判断：当列的rendered为false时，不渲染该列的容器
3. 在faces-config.xml中注册自定义渲染器：

<render-kit>
    <renderer>
        <component-family>javax.faces.Data</component-family>
        <renderer-type>javax.faces.Grid</renderer-type>
        <renderer-class>com.yourpackage.CustomDataGridRenderer</renderer-class>
    </renderer>
</render-kit>

此方案需要了解JSF渲染机制，但能彻底解决空容器问题。

内容的提问来源于stack exchange，提问作者Tehreem