Cách đối sánh dữ liệu trong bảng điều khiển với tỷ lệ phần trăm tối đa

[Primefaces 5.0]Cách đối sánh dữ liệu trong bảng điều khiển với tỷ lệ phần trăm tối đa

Tôi có một chế độ xem tab có chứa dữ liệu. Tùy thuộc vào tab, dữ liệu có thể được điền bằng dữ liệu khác nhau (nghĩa là một số cột và hàng khác nhau). Các thiết lập sau xử lý tốt dữ liệu, nhưng không có vấn đề nếu tôi đặt các hạn chế max-height trên bảng điều khiển, các tab, hoặc DataTable, nó dường như không để hạn chế nó để mà phần trăm của màn hình. Nếu tôi đặt ràng buộc cho một giá trị cụ thể (ví dụ: 300px), nó hoạt động, nhưng tôi không muốn.

Về cơ bản: Tôi muốn có dữ liệu phù hợp với nội dung của nó đến mức chiếm 30% màn hình. Tại thời điểm này, nó sẽ cuộn.

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
    <div style="width: 10%;float: left"> ... </div> 
    <div style="width: 90%;float: right"> 
      <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%"> 
       <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
        <p:tab title="#{table.tableName}" > 
         <p:dataTable var="row" 
          value="#{pageBean.tableData[table.tableName].data}" 
          resizableColumns="true"> 
          <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
           var="column" columnIndexVar="columnIndex"> 
           <f:facet name="header"> 
            <p:outputLabel value="#{column}"/> 
           </f:facet> 
           <p:outputLabel value="#{row[columnIndex]}"/> 
          </p:columns> 
         </p:dataTable> 
        </p:tab> 
       </p:tabView> 
      </p:panel> 
      ... 
    </div> 
    </body>

Nguồn

2014-06-23 user2303325

bạn cas sử dụng ScrollWidth và ScrollHeight cho DataTable. Có ba lựa chọn cho mục đích này. ví dụ:

scrollHeight="30%" 
scrollWidth="30%" 
scrollable="true"

bằng phương pháp này, bạn có thể kiểm soát kích thước có thể kê khai.

Tái bút: bạn không nói phiên bản primefaces của bạn.

Nguồn

2014-06-23 07:18:50

Vấn đề với giải pháp này là tôi muốn DataTable được chứa tới một tỷ lệ cụ thể của màn hình - tối đa 30% của nó. Tuy nhiên, sử dụng ràng buộc scrollHeight vì ngày này giới hạn nó thành một phần trăm của * dữ liệu *. Vì số lượng hàng tôi sẽ không được đặt trong đá, điều này không giải quyết được vấn đề của tôi. Tôi đã thêm mô tả tốt hơn trong câu hỏi của mình. – user2303325

Bạn có thể sử dụng "vh" vào kích thước của max-height, cho chiều cao khung nhìn như thế này:

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
<div style="width: 10%;float: left"> ... </div> 
<div style="width: 90%;float: right"> 
     <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;margin-bottom: 1%"> 
      <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
       <p:tab title="#{table.tableName}" > 
        <p:dataTable var="row" 
         value="#{pageBean.tableData[table.tableName].data}" 
         resizableColumns="true" style="max-height: 30vh;"> 
         <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
          var="column" columnIndexVar="columnIndex"> 
          <f:facet name="header"> 
           <p:outputLabel value="#{column}"/> 
          </f:facet> 
          <p:outputLabel value="#{row[columnIndex]}"/> 
         </p:columns> 
        </p:dataTable> 
       </p:tab> 
      </p:tabView> 
     </p:panel> 
     ... 
</div> 
</body>

Nguồn

2017-05-29 13:37:29

Cách đối sánh dữ liệu trong bảng điều khiển với tỷ lệ phần trăm tối đa

Trả lời

Các vấn đề liên quan