我想扩展ASP.NET DataGrid Web控件添加很多的附加功能,但最重要的是,我想使电网的身体滚动。

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

由于我只是想修改控制的输出,“”延伸的控制实际上意味着我只需要重写再现。

我发现,人们可以使用以改变输出控制适配器的文章。一个项目存在于 CodePlex上的名为“的 CSS控制适配器”。这是非常有帮助的不仅仅是在DataGrid更多的控制。

其他提示

您可以尝试这种方法。作品对我好。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top