JavaScript 不适用于 RadTabStrip asp.net

Question

在我决定使用 RadTabStrip 之前，我有一个用于嵌套网格的 javascript。

JavaScript 代码：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">     </script>
 <script type="text/javascript">
   function collapseExpand(obj) {
    var gvObject = document.getElementById(obj);
    var imageID = document.getElementById('image' + obj);

    if (gvObject.style.display == "none") {
        gvObject.style.display = "inline";
        imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
    }
    else {
        gvObject.style.display = "none";
        imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
    }
}
</script>
</asp:content>

RadTab 代码：

<telerik:RadTabStrip ID="RadTabStrip1" runat="server">
<Tabs> 
<telerik:RadTab  runat="server" Text="tab1">
<TabTemplate>
<telerik:RadGrid ID="GridView1" runat="server" AutoGenerateColumns="False" 
    BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" 
    CellPadding="3" GridLines="Horizontal" OnItemDataBound="RadGrid2_ItemDataBound" >
<MasterTableView DataKeyNames="id1">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<a href="javascript:collapseExpand('id1_<%# Eval("id1") %>');">
<img id="imageSubId_<%# Eval("id1") %>" alt="Click to show/hide orders" border="0" src="Images/bullet_toggle_plus.jpg" />
</a>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="id1" HeaderText="ID"/>
<telerik:GridTemplateColumn>
<ItemTemplate>
            <tr>
            <td colspan="100%">
            <div id="id1_<%# Eval("id1") %>" style="display: none; position: relative; left: 25px;">
            <telerik:RadGrid ID="GridView2" runat="server" AutoGenerateColumns="false" CellPadding="4" ForeColor="#333333" 
                    GridLines="None" >
            <MasterTableView >
                    <Columns>
                    <telerik:GridBoundColumn DataField="fname" HeaderText="First Name" />
                    <telerik:GridBoundColumn DataField="mname" HeaderText="Middle Name" />
                    <telerik:GridBoundColumn DataField="lname" HeaderText="Last Name" />
                    <telerik:GridTemplateColumn>
                    <ItemTemplate>
                    <asp:CheckBox ID="checkselect" runat="server" />
                    </ItemTemplate>
                    <HeaderTemplate>
                    <asp:Button ID="Button4" runat="server" Text="Remove"  CommandName="Split"  />
                    </HeaderTemplate>
                    </telerik:GridTemplateColumn>
                    </Columns>
                    </MasterTableView >
             </telerik:RadGrid>
             </div>
             </td>
             </tr>
 </ItemTemplate>
 </telerik:GridTemplateColumn>
 </Columns>
 </MasterTableView>
 </telerik:RadGrid>
 </TabTemplate>
 </telerik:RadTab>
 </Tabs>
 </telerik:RadTabStrip>

此代码在没有标签的情况下运行良好。另外，我认为问题在于 CollapseExpand 函数与选项卡的兼容性。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

几件事...

首先，我没有看到任何 jQuery，只是普通的 javascript（不是你的问题，只是说）。

其次，<a href="javascript:collapseExpand('d1_<%# Eval("id1") %>');"> 看起来应该是 <a href="javascript:collapseExpand('id1_<%# Eval("id1") %>');">（d1_ 与 id1_）。

第三，我认为您更改图像的代码不起作用。

假设<%# Eval("id1") %> 是4。所以 div 的 id 是id1_4。这意味着var imageID = document.getElementById('image' + obj); 会将imageID 设置为imageid1_4，当您的图像的实际 id 是imageSubId_4。

Answer 2

抱歉回复晚了。

请尝试以下代码 sn-p。

JS

        <script type="text/javascript">
        function collapseExpand(obj) {
            var gvObject = document.getElementById('div_' + obj);
            var imageID = document.getElementById('imageSubId_' + obj);

            if (gvObject.style.display == "none") {
                gvObject.style.display = "inline";
                imageID.src = "http://www.fimfiction-static.net/images/icons/collapse.png";
            }
            else {
                gvObject.style.display = "none";
                imageID.src = "http://jlpa.trinitylaban.ac.uk/WebCat_Images/English/Other/MiscD/admin-icon-expand.png";
            }
        }
    </script>

ASPX

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
    <Tabs>
        <telerik:RadTab runat="server" Text="tab1">
            <TabTemplate>
                <telerik:RadGrid ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
                    BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal"
                    OnNeedDataSource="GridView1_NeedDataSource">
                    <MasterTableView DataKeyNames="ID">
                        <Columns>
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <a onclick="javascript:collapseExpand('<%# Eval("ID") %>');">
                                        <img id="imageSubId_<%# Eval("ID") %>" alt="Click to show/hide orders" src="http://jlpa.trinitylaban.ac.uk/WebCat_Images/English/Other/MiscD/admin-icon-expand.png" />
                                    </a>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" />
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <tr>
                                        <td colspan="100%">
                                            <div id="div_<%# Eval("ID") %>" style="display: none; position: relative; left: 25px;">
                                                <telerik:RadGrid ID="GridView2" runat="server" AutoGenerateColumns="false" CellPadding="4"
                                                    ForeColor="#333333" GridLines="None" OnNeedDataSource="GridView1_NeedDataSource">
                                                    <MasterTableView>
                                                        <Columns>
                                                            <telerik:GridBoundColumn DataField="Name" HeaderText="First Name" />
                                                            <telerik:GridTemplateColumn>
                                                                <ItemTemplate>
                                                                    <asp:CheckBox ID="checkselect" runat="server" />
                                                                </ItemTemplate>
                                                                <HeaderTemplate>
                                                                    <asp:Button ID="Button4" runat="server" Text="Remove" CommandName="Split" />
                                                                </HeaderTemplate>
                                                            </telerik:GridTemplateColumn>
                                                        </Columns>
                                                    </MasterTableView>
                                                </telerik:RadGrid>
                                            </div>
                                        </td>
                                    </tr>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </TabTemplate>
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

ASPX.CS

protected void GridView1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"}
    };

    (sender as RadGrid).DataSource = data;
}

如果有任何问题，请告诉我。