0

我在两个 radtab 中有两个嵌套的网格视图，对于这两个嵌套的视图，我有一个用于展开和折叠的简单 JavaScript。 

<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";
        }
    }

Java 脚本在第一个选项卡的第一个 RadGrid 上运行良好。但是，它不适用于第二个选项卡。我认为控件无法转移到第二个网格。我认为我的问题类似于

http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx

我应用了那里列出的所有方法，但仍然无法正常工作。

<script type="text/javascript">
    function load() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(collapseExpand);
    } 
    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";
        }
    }

有人可以告诉我要编写什么代码来传输或将 javascript 的控制权传递给第二个选项卡吗？

另外，我正在使用 Radtabs 和 RadPageView 在两个选项卡中显示两个网格。

我在 radtab 中调用 Collapse Expand

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultipage1">
<Tabs>
<telerik:RadTab Text="Tab1" PageViewID="RadPageView1" OnLoad="Load1">
  </telerik:RadTab>
  <telerik:RadTab Text="Tab2" PageViewID="RadPageView2" >
 </telerik:RadTab>
 </Tabs>
 </telerik:RadTabStrip>
 <telerik:RadMultiPage ID="RadMultipage1" runat="server">
<telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" TabIndex="0">
<telerik:RadGrid ID="View1" runat="server" AutoGenerateColumns="False" Width="100"
    BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" 
      OnItemDataBound="RadGrid2_ItemDataBound" >
   <MasterTableView DataKeyNames="id">
   <Columns>
   <telerik:GridTemplateColumn>
   <ItemTemplate>
   <a href="javascript:collapseExpand('id_<%# Eval("id") %>');">
   <img id="imageSubId_<%# Eval("id") %>" alt="Click to show/hide orders" border="0" src="Images/bullet_toggle_plus.jpg" />
   </a>
   </ItemTemplate>
   </telerik:GridTemplateColumn>
   <telerik:GridBoundColumn DataField="id" HeaderText="ID"/>
   <telerik:GridBoundColumn DataField="fname" HeaderText="First Name"/>
   <telerik:GridBoundColumn DataField="lname" HeaderText="Last Name"/>
   <telerik:GridBoundColumn DataField="DOB" HeaderText="Date of Birth"/>
   <telerik:GridTemplateColumn>
   <ItemTemplate>
            <tr>
            <td colspan="100%">
            <div id="id_<%# Eval("id") %>" style="display: none; position: relative; left: 10px;">
            <telerik:RadGrid ID="View2" runat="server" AutoGenerateColumns="false" Width="400"
                    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" OnClick="Button4_Click" />
                    </HeaderTemplate>
                    </telerik:GridTemplateColumn>
                    </Columns>
                    </MasterTableView >
             </telerik:RadGrid>
             </div>
             </td>
             </tr>
 </ItemTemplate>
 </telerik:GridTemplateColumn>
 </Columns>
 </MasterTableView>
 </telerik:RadGrid>
   </telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Width="100%">
 Same Code
 </telerik:RadPageView>
   </telerik:RadMultiPage>
4

1 回答 1

0

请尝试使用以下代码片段。

JS

 <script type="text/javascript">
        function collapseExpand(obj, Id) {
            var gvObject = document.getElementById('div_' + Id + '_' + obj);
            var imageID = document.getElementById('imageSubId_' + Id + '_' + 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" MultiPageID="RadMultipage1">
    <Tabs>
        <telerik:RadTab Text="Tab1" PageViewID="RadPageView1">
        </telerik:RadTab>
        <telerik:RadTab Text="Tab2" PageViewID="RadPageView2">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultipage1" runat="server">
    <telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" TabIndex="0">
        <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") %>','1');">
                                <img id="imageSubId_1_<%# 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_1_<%# 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>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server" Width="100%" TabIndex="0">
        <telerik:RadGrid ID="RadGrid1" 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") %>','2');">
                                <img id="imageSubId_2_<%# 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_2_<%# 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>
    </telerik:RadPageView>
</telerik:RadMultiPage>

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;
}
于 2013-07-31T10:28:21.417 回答