Frage

Ich möchte die ASP.NET Datagrid Web-Steuerung erweitern viele zusätzliche Funktionen, aber am wichtigsten von allen hinzuzufügen, ich möchte der Körper des Gitters scrollbaren machen.

Ich habe die HTML gearbeitet, aber die Darstellung der Steuerung überschrieben ist verwirrend. Die Grundstruktur der endgültigen Kontrolle sollte wie so aussehen:

<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>

Wer weiß, was der beste Ansatz sein sollte? Kann mir jemand zu einem gewissen Tutorial zeigen? Ich habe bemerkt man, wo der Autor die gerenderte HTML erfasst, bevor es in den Antwortstream gesendet wird, und es verändert. Ich mag es nicht jedoch diesen Ansatz verwenden.

War es hilfreich?

Lösung 2

Weil ich nur die Ausgabe der Steuerung ändern wollte, ‚‘ erstreckt die Kontrolle bedeutete tatsächlich, dass ich nur die Wiedergabe außer Kraft setzen.

fand ich Artikel über Steuer Adapter, die man den Ausgang zu verändern, verwenden können. Ein Projekt gibt es auf CodePlex namens ‚ CSS Control-Adapter ‘. Es war sehr hilfreich für mehr Kontrollen als nur das Datagrid.

Andere Tipps

Sie können versuchen, dieser Ansatz. Funktioniert gut für mich.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top