Вопрос

Я хотел бы расширить веб-элемент управления ASP.NET DataGrid, добавив множество дополнительных функций, но, что наиболее важно, я хотел бы сделать тело сетки прокручиваемым.

У меня есть разработанный HTML, но переопределение рендеринга элемента управления сбивает с толку.Базовая структура итогового контроля должна выглядеть так:

<div id="grid1" class="grid">
<div class="grid-header">
    <div class="grid-header-l"></div>
    <div class="grid-header-c">
        <div class="grid-header-wrapper">
            <div class="wrapper">Grid Header</div>
        </div>
    </div>
    <div class="grid-header-r"></div>
</div>
<div class="grid-body">
    <div class="grid-column-headers">
        <div class="grid-column-headers-l"></div>
        <div class="grid-column-headers-c">
            <div class="grid-column-headers-wrapper">
                <table class="grid-column-header-table" cellpadding="0" cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td>
                                <div class="grid-column-header-cell asc">
                                    <div class="grid-column-header-cell-wrapper">
                                        <div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
                                        <a href="javascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
                                        <div class="grid-column-header-divider"></div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="grid-column-header-cell">
                                    <div class="grid-column-header-cell-wrapper">
                                        <div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
                                        <a href="javascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
                                        <div class="grid-column-header-divider"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="last">
                                <div class="grid-column-header-cell">
                                    <div class="grid-column-header-cell-wrapper">
                                        <div class="grid-column-header-text" title="Column Header Name">Column Header Name</div>
                                        <a href="javascript:;" class="grid-column-header-button" title="Hide/Show Columns"><span></span></a>
                                        <div class="grid-column-header-divider"></div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="grid-column-headers-r"></div>
    </div>
    <div class="grid-body-content">
        <div class="grid-body-content-t">
            <div class="grid-body-content-t-l"></div>
            <div class="grid-body-content-t-c"></div>
            <div class="grid-body-content-t-r"></div>
        </div>
        <div class="grid-body-content-m">
            <div class="grid-body-content-m-l"></div>
            <div class="grid-body-content-m-c">
                <div class="grid-body-content-wrapper">
                    <div class="scroll-wrapper">
                        <table class="grid-content-table" cellpadding="0" cellspacing="0" border="0">
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                    <td>
                                        <div class="grid-content-cell">Cell Text/Value</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="grid-body-content-m-r"></div>
        </div>
        <div class="grid-body-content-b">
            <div class="grid-body-content-b-l"></div>
            <div class="grid-body-content-b-c"></div>
            <div class="grid-body-content-b-r"></div>
        </div>
    </div>
</div>

Кто-нибудь знает, каким должен быть лучший подход?Может ли кто-нибудь указать мне на какой-нибудь учебник?Я заметил один случай, когда автор захватил визуализированный HTML-код перед его отправкой в ​​поток ответов и изменил его.Однако мне не нравится использовать этот подход.

Это было полезно?

Решение 2

Поскольку я хотел изменить только выходные данные элемента управления, «расширение» элемента управления фактически означало, что мне нужно было только переопределить рендеринг.

Я нашел статьи об адаптерах управления, которые можно использовать для изменения вывода.Проект существует на КодПлекс по имени 'CSS-адаптеры управления'.Это было очень полезно для большего количества элементов управления, чем только DataGrid.

Другие советы

Можешь попробовать этот подход.У меня работает хорошо.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top