0

我正在使用 ASP.NET C# 进行应用程序开发，我想在单击Telerik RadGrid上的“ -- ”和“ + ”图像时实现行折叠/展开，目的是显示最新版本的数据，然后隐藏旧的相同数据行的版本，旧版本的数据行仅在单击“ + ”图像时显示。

Grid 的输出将如下图所示：

在此处输入图像描述

这里我从数据库查询数据源并直接绑定到网格，我的目标是隐藏以黄色突出显示的行并在最新数据行上附加“ + ”或“ -- ”图像。

在此处输入图像描述

想法是使用 JavaScript/jQuery 隐藏 DBRow > 1，其中 DBRow 列将隐藏在 Grid 中，而 DBRow 将充当 JavaScript 的指示器以选择要隐藏的 Element。

<telerik:RadGrid runat="server" ID="gvID" ShowHeader="true" Width="1000px" >
<mastertableview autogeneratecolumns="false" showheaderswhennorecords="true">
<Columns>
    <telerik:GridBoundColumn DataField="DBName" HeaderText="Name">
    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="DBVersion" HeaderText="Version">
    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="DBRow" HeaderText="DBRow" ReadOnly="true">
        <HeaderStyle CssClass="hiddenColumn" />
        <ItemStyle CssClass="hiddenColumn" />
    </telerik:GridBoundColumn>

    <telerik:GridEditCommandColumn UniqueName="EditColumn" ButtonType="ImageButton" />
</Columns>
</mastertableview>

我的问题是如何将“ + ”和“ -- ”附加到正确的行中，并隐藏 DBRow > 1 的行？

如果您有更好的方法，请与我分享。谢谢

更新

下面是生成的 HTML：

<div id="gvID" class="RadGrid RadGrid_Default" style="width: 1000px;">
    <table class="rgMasterTable" border="0" id="gvID_ctl00" style="width: 100%;
        table-layout: auto; empty-cells: show;">
        <thead>
            <tr>
                <th scope="col" class="rgHeader" style="white-space: nowrap;">
                    Name
                </th>
                <th scope="col" class="rgHeader">
                    Version
                </th>
                <th scope="col" class="hiddenColumn rgHeader">
                    DBRow
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="rgRow" id="gvID_ctl00__0">
                <td>
                    A
                </td>
                <td>
                    Ver.0
                </td>
                <td class="hiddenColumn">
                   1
                </td>
            </tr>
            <tr class="rgAltRow" id="gvID_ctl00__1">
                <td>
                    B
                </td>
                <td>
                    Ver.1
                </td>
                <td class="hiddenColumn">
                   1
                </td>
            </tr>
            <tr class="rgRow" id="gvID_ctl00__2">
                <td>
                    B
                </td>
                <td>
                    Ver.0
                </td>
                <td class="hiddenColumn">
                   2
                </td>
            </tr>
            <tr class="rgRow" id="gvID_ctl00__3">
                <td>
                    C
                </td>
                <td>
                    Ver.1
                </td>
                <td class="hiddenColumn">
                   1
                </td>
            </tr>
            <tr class="rgRow" id="gvID_ctl00__4">
                <td>
                    C
                </td>
                <td>
                    Ver.0
                </td>
                <td class="hiddenColumn">
                   2
                </td>
            </tr>
        </tbody>
    </table>
    <input id="gvID_ClientState" name="gvID_ClientState" type="hidden" />
</div>
4

0 回答 0