Question

基本上，我有两列。

左 - ＆gt;冷冻柱

对 - ＆gt;可滚动列

代码生成冻结行未与Scrollable行对齐的图像。可滚动列的行根据输入的输入改变它的大小，因此应用CSS技巧在这里不起作用。我无法找到关于Primefaces的任何内容来解决这个问题。

所以剩下的唯一选择就是应用 jQuery代码来解决这个问题。但不知何故，代码并没有产生预期的结果。有人可以帮我解决这个问题吗？

现在，代码打印出以下图像：

xhtml.page

<ui:define name="content">
      <h:form id="identityForm">
        <div>
          <p:panel>

            <!--ui repeat-->
            <h:panelGrid columns="2" columnClasses="padding-right-5,max_width_944" styleClass="margin_bottom_30">
              <h:column>
                <p:outputPanel rendered="#{not empty identityForm.halex}">

                  <table class="margin_top_27">
                    <tr>
                      <th class="height_26"></th>
                    </tr>
                    <tr>
                      <th class="header ui-state-default">
                        <h:outputText value="#{msgs['hal.col.name']}" />
                      </th>
                    </tr>
                    <ui:repeat value="#{identityForm.halex}" var="halex}" varStatus="halLine">
                      <tr class="#{itemLine.odd ? 'oddRow' : 'evenRow'}">
                        <td class="row-content height_54" style="width: 57px;">
                          <h:outputText value="#{halex.shortCode}" />
                        </td>
                      </tr>
                    </ui:repeat>
                  </table>

                </p:outputPanel>
              </h:column>

              <h:column>
                <div class="max_width_944 overflow-x">
                  <table id="free_columns">
                    <ui:repeat value="#{halexBean.selectedHalexItem}" var="hal">
                      <tr>
                        <th class="header ui-state-default">
                          <h:outputText value="#{msgs['hal.col.customer']}" />
                        </th>
                      </tr>
                    </ui:repeat>

                    <ui:repeat value="#{halexBean.selectedType}" var="lam" varStatus="status">
                      <tr class="#{status.odd?'oddRow':'evenRow'}">
                        <td class="row-content">
                          <h:outputText value="#{partType.name}"></h:outputText>   
                        </td>
                        <td class="row-content" style="min-width:150px;">
                          <h:outputText value="#{partType.age}"></h:outputText>
                        </td>
                        <td class="row-content">
                          <h:outputText value="#{partType.address}" />
                        </td>
                      </tr>
                    </ui:repeat>

                  </table>
                </div>
              </h:column>

            </h:panelGrid>
          </p:panel>
        </div>
      </h:form>
    </ui:define>

css.page

 .padding-right-5 {
        padding-right: 5px;
    }

    .max_width_944 {
        max-width: 944px;
    }

    margin_top_27 {
        margin-top: 27px;
    }

    .row-content {
        min-width: 100px;
        min-height: 100px;
        vertical-align: middle;
        height: 50px;
        border: 1px solid;
        height: 57px;
    }

jQuery代码：

<script type="text/javascript">
          $(document).ready(function() {                          

                 $("#free_columns tr").each(function (index, element) {

                    //get row height from freeColumnTable and the corresponding row in table frozenColumns
                    var rowOneHeight = $(this).height();
                    var rowTwo = $(".row-content tr:eq(" + index + ")");

                    //if no matching row was found in table two, stop loop
                    if (!rowTwo.length) return false;
                    var rowTwoHeight = rowTwo.height();

                    //compare row heights, and set the least high row to the height of the highest one
                    if (rowOneHeight > rowTwoHeight) {
                        //set rowTwoHeight to rowOneHeight
                       rowTwo.height(rowOneHeight);
                    } else {
                             $(this).height(rowTwoHeight);
                           }
               });
           });
</script>

冻结列未与可滚动列

0 个答案: