1

ページネーションバーが上部にある場合、ページネーションバーと結果表示を開始する<DIV>実際の間にタグを挿入する方法を考えていました。TABLEタグを display:table の直前に配置すると<DIV>、スクロール バー内のページネーションも含まれます。

TBODYまた、少し紛らわしいので、スタイルをに設定する方法がわかりません。皆さんがこのようなことを書いたかどうかはわかりませんが、これを達成する方法があれば教えてください。そして私のコードは

<display:table id="data1" name="invprbmList" requestURI=""  pagesize="10" export="true" style="width:100%;" decorator="org.displaytag.decorator.TotalTableDecorator">
  <tr><td><display:setProperty name="paging.banner.item_name">Invoice</display:setProperty>
    <display:setProperty name="paging.banner.items_name">Invoices</display:setProperty>
    <display:setProperty name="paging.banner.some_items_found"><span class="pagebanner"> {0} Invoices found, displaying {2} to {3}. </span></display:setProperty>           
    <bean:define id="invoiceNo"><bean:write name="data1" property="invoiceNo"/></bean:define>
    <bean:define id="notes"><bean:write name="data1" property="notes"/></bean:define>
    <bean:define id="strFlag"><bean:write name="data1" property="strFlag"></bean:write></bean:define>

    <display:column  title="Invoice No." sortable="true" property="invoiceNo" media="xml csv pdf excel" class="l" headerClass="hl" />
    <display:column  property="invDate" title="Invoice Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
    <display:column  media="html" title="Amount" property="invAmount" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
    <display:column  title="Amount" sortable="true" property="invAmount" media="xml csv pdf excel" class="r" headerClass="hr" />
    <display:column  property="dueDate"     title="Due Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
    <display:column  media="html" title="Balance" property="balance" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
    <display:column  title="Balance" sortable="true" property="balance" media="xml csv pdf excel" class="r" headerClass="hr" />
    <display:column  title="Notes" sortable="true" property="notes"  media="xml csv pdf excel"  class="c" headerClass="hc"/>                                                  
    <display:column  property="invPoNum" title="P.O. No." sortable="true"  class="l" headerClass="hl"/>
    <display:column  property="invRefNo" title="Ref. No." sortable="true"  class="lbr" headerClass="hlbr"/>
    <display:column  property="status" title="Status" sortable="true" class="l" headerClass="hl"/>                              
  </td></tr>
</display:table>
4

3 に答える 3

4

CSS次のようにクラスを作成しますlocked-column.css。

div#tbl-container { 
        width: 740px; 
        /* default value will be overrided by minimum of table width or screen 
resolution*/ 
        height: 300px; 
        margin-top: -11px;
        overflow: auto; 
        /* 
                scrollbar-base-color: #ffeaff; 
        */ 
} 

.dataTable { /*table-layout: fixed; */ 
        border-collapse: collapse; 
        /* background-color: WhiteSmoke; */ 
} 

.dataTable th { 
        top: expression(document . getElementById("tbl-container") . scrollTop-2 
                ); /* IE5+ only */ 
        z-index: 20; 
        font-size: small; 
        padding: 5px 5px 5px 5px !important; 
        text-align: center;
        position: relative; 
        cursor: default; 
        font-family: sans-serif; 
        font-size: small; 
        font-weight: bold; 
        background-color: #BBCCFF;
        color: #FFFFF; 
} 

.dataTable thead tr { 
        position: relative; 
        height: 10px; 
        /*background-color: #7CA4E0;*/ 
} 

.dataTable th a:link,th a:visited { 
        color: #1155cc;
        font-weight: bold; 
        text-decoration: none; 
        font-family: sans-serif;
} 

.dataTable a:hover { 
        color: #1155cc;
        text-decoration: underline; 
        font-family: sans-serif; 
        font-weight: bold; 
} 

.dataTable thead  th.sorted A { 
        font-weight: bolder; 
} 

.dataTable td { 
        padding: 3px 3px 3px 3px !important; 
} 

.dataTable tbody tr { 
        height: auto; 
        white-space: nowrap; 
} 

.dataTable tbody tr.odd { 
        background-color: #FFFFFF;
        font-size:  x-small; 
} 

.dataTable tbody tr.tableRowEven,tr.even { 
        background-color: #DDE5FF;
        font-size:  x-small; 
} 

.dataTable tbody tr td:last-child { /* padding-right: 20px; */ 

} 

/*these styles have nothing to do with the locked column*/ 
.dataTable body { 
        background-color: white; 
        color: black; 
        font-family: sans-serif; 
} 

.dataTable tbody td { 
        padding: 2px 4px 2px 4px !important; 
        font-family: sans-serif; 
        font-size: x-small; 
} 

.exportlinks { 
        font-family: sans-serif; 
} 

/* style sheet to display light blue color for a mouse on row over event */ 
.dataTable tr.rowMouseOver { 
        color: white; 
        background-repeat: repeat-x; 
        background-color: rgb(228, 59, 47); /*#8888FF;*/ 
} 

.dataTable .order1 { 
        background-position: right 50%; 
        background-image: url('../Images/arrow_up.gif'); 
        background-repeat: no-repeat; 
        font-weight: bold; 
} 

.dataTable .order2 { 
        background-position: right 50%; 
        background-image: url('../Images/arrow_down.gif'); 
        background-repeat: no-repeat; 
        font-weight: bold; 
} 

span.export { 
        padding: 0 4px 1px 20px; 
        font-size: x-small; 
        text-align: center; 
} 

span.excel { 
        background-image: url('../Images/ico_file_excel.png'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

span.csv { 
        background-image: url('../Images/ico_file_csv.png'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

span.xml { 
        background-image: url('../Images/ico_file_xml.png'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

span.first { 
        background-image: url('../Images/first.jpg'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

span.last { 
        background-image: url('../Images/last.jpg'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

span.pdf { 
        background-image: url('../Images/ico_file_pdf.png'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

span.rtf { 
        background-image: url('../Images/ico_file_rtf.png'); 
        background-repeat: no-repeat; 
        width: 16px; 
} 

.rightAlignedPadded { 
        text-align: right; 
        padding-right: 10px; 
}

JSP の JavaScript でこのクラスを呼び出しCSSます。

if(navigator.appName == 'Microsoft Internet Explorer') 
{ 
        document.write('<link rel="stylesheet" type="text/css" href="css/locked-column.css" />'); 
} 
else 
{ 
        document.write('<link rel="stylesheet" type="text/css" href="css/displaytag1.css" />'); 
}

そしてあなたdisplay-tagを次のようにします：

      <table>
        <tr><td>
            <div id="tbl-container" style="width: 850px;">
               <display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator"> 
                 <display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" /> 
                 <display:setProperty name="export.excel.filename" value="OverallOverdue.xls" /> 
                 <display:setProperty name="export.csv" value="true" /> 
                 <display:setProperty name="export.csv.filename" value="OverallOverdue.csv" /> 
                 <display:setProperty name="export.xml" value="true" /> 
                 <display:setProperty name="export.xml.filename" value="OverallOverdue.xml" /> 
                 <display:setProperty name="paging.banner.placement">top</display:setProperty> 
                 .........  
                 </display:table></div> </td></tr>
             <tr><td>&nbsp;</td></tr> 
             <tr><td>
                <div id="export-links"> 
                </div> 
             </td>
            </tr>
        </table>
于 2013-03-02T14:28:10.700 に答える
0

http://www.hesido.com/web.php?page=customscrollbarから flexcroll.js と flexcrollstyles.css をダウンロードし、これらのファイルを含めます。

<table>
 <tr>
  <td width='100%'> Paging: </td>
 </tr>
 <tr>
  <td>
    <div id='customscroll' class='flexcroll' style='height:300px;'>
     <table>
      <tr>
        <td>Your content</td>
      </tr>
     </table>
    </div>
  </td>
 </tr>
</table>
于 2013-03-20T10:58:37.297 に答える
0

スクロール可能に含まれている場合は、次のように入力します。

<div id="export-links"> 
                </div>

外側<table>

スクロール可能なテーブル内にスクロール不可能な要素を含めることはできません。その要素を絶対位置として定義して、そのようにすることもできますが、それはお勧めしません。

あなたのコードで次のようにしてみてください：

  <table>
        <tr><td>
            <div id="tbl-container" style="width: 850px;">
               <display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator"> 
                 <display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" /> 
                 <display:setProperty name="export.excel.filename" value="OverallOverdue.xls" /> 
                 <display:setProperty name="export.csv" value="true" /> 
                 <display:setProperty name="export.csv.filename" value="OverallOverdue.csv" /> 
                 <display:setProperty name="export.xml" value="true" /> 
                 <display:setProperty name="export.xml.filename" value="OverallOverdue.xml" /> 
                 <display:setProperty name="paging.banner.placement">top</display:setProperty> 
                 .........  
                 </display:table></div> </td></tr>
             <tr><td>&nbsp;</td></tr> 
             <tr><td>

             </td>
            </tr>
        </table>

<div id="export-links"> 
  your links here
</div>

そうすればnot be included、スクロールされるテーブルになります

私が作ったこの例を見てください：

http://jsfiddle.net/LQJY5/

于 2013-03-20T10:02:05.420 に答える