如何在Grid中实现行折叠/展开？

Question

我正在使用ASP.NET C＃开发应用程序，我想在点击＆＃34; - ＆＃34;时实现行折叠/展开。和＆＃34; + ＆＃34;图片onTelerik RadGrid，目的是显示最新版本的数据，然后隐藏相同数据行的旧版本，只有在点击＆＃34; + ＆＃时才显示旧版本的数据行34;图像。

Grid的输出如下图所示：

这里我的数据源是从DB查询并直接绑定到Grid，我的目标是隐藏以黄色突出显示的行并附加＆＃34; + ＆＃34;或＆＃34; - ＆＃34;最新数据行上的图片。

这个想法是使用JavaScript / jQuery来隐藏DBRow＆gt; 1，哪个DBRow列将隐藏在Grid中，而DBRow将作为JavaScript的指示器来选择要隐藏它的元素。

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

我的问题是如何追加＆＃34; + ＆＃34;和＆＃34; - ＆＃34;进入正确的行，并隐藏DBRow＆gt;行。 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>