Блог

Главная - Вопросы по программированию - Как я могу сделать таблицу jsp прокручиваемой?

Как я могу сделать таблицу jsp прокручиваемой?

#html #jsp #scroll #html-table

#HTML #jsp #прокрутка #html-таблица

Вопрос:

У меня есть таблица ниже на странице JSP. Количество строк в таблице является переменной величиной, заполняемой списком, передаваемым от контроллера. Как я могу добавить к ней прокрутку, чтобы заголовок таблицы был исправлен? Я знаю, что это достаточно просто в JSF, но как это сделать в JSP? 

 <body>

    <table>
        <thead>
            <tr>
                <th>PO</th>
                <th>Product</th>
                <th>Batch Size</th>
                <th>SPI</th>
                <th>AOI</th>
                <th>PTH</th>
                <th>Inspection</th>
                <th>Tests</th>
                <th>Expedition</th>
            </tr>
        </thead>
        <tbody id="prodReportTable">
            <c:forEach var="pojo" items="${list}">
                <tr>
                    <td>${pojo.po}</td>
                    <td>${pojo.productName}</td>
                    <td>${pojo.poSize}</td>
                    <td>${pojo.spi}</td>
                    <td>${pojo.aoi}</td>
                    <td>${pojo.pth}</td>
                    <td>${pojo.inspection}</td>
                    <td>${pojo.tests}</td>
                    <td>${pojo.expedition}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

</body>

Ответ №1:

Если вас не волнует кроссбраузерная совместимость, вы можете использовать этот стиль в TBODY:

 #prodReportTable
{
    overflow-y:scroll; 
    height:200px;  
    position:absolute;
}

Кроме того, вы можете избавиться от ужасного интервала между строками в IE с помощью: (к сожалению, без полосы прокрутки)

 #prodReportTable TR
{
    height:1em;
}

Ответ №2:

Вы проверяли jQuery Tablesorter?

Комментарии:

1. спасибо за совет, но это для сортировки таблиц, а не для прокрутки таблиц, верно?

2. извините, если это так, возможно, вы захотите проверить плагин jquery для прокручиваемой таблицы 🙂 farinspace.com/jquery-scrollable-table-plugin

Ответ №3:

Взгляните на jqgrid (http://www.trirand.com/blog /), который является плагином jquery table grid. Я успешно использовал его, и это экономит массу времени. В ней есть сортировка, фильтрация, форматирование, разбиение на страницы и другие опции.

Если вам нужно несколько менее технологичное решение, просто создайте div заголовка и основной div, которые можно прокручивать по x. Если это не имеет смысла, просто дайте мне знать, и я смогу отправить образец…

Удачи!