我在两个radtabs中有两个嵌套的网格视图,对于这两个嵌套视图,我有一个简单的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 Script适用于第一个选项卡的第一个RadGrid。但是,它无法使用第二个选项卡。我认为控件无法转移到第二个网格。我认为我的问题类似于
我应用了那里列出的所有方法但仍无效。
<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>
答案 0 :(得分: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;
}