62,074
社区成员
发帖
与我相关
我的任务
分享gridview点击某一行弹出fancybox
我想实现A.aspx上点击gridview中的某一行任何一个位置，或者单独设置一列弄个详细。点击后使用fancybox的形式弹出B.aspx
B.aspx中根据ID查找出具体的详细信息，怎么实现？？
我现在定义了这个js
好像怎么搞都不行，我现在只能添加一个选定内容的列，选择该行后在SelectedIndexChanging里面添加加载css的，并设置session.然后点击改行通过session在pageload的时候加载详细信息。这样要点两下才能出来。
请问要怎么做才能在gridview上点击某一行任何位置，或者点击“详细”就能弹出带有改行详细内容的fancybox，b.aspx
B.aspx中根据ID查找出具体的详细信息，怎么实现？？
我现在定义了这个js
/*fancybox弹出层*/
$(document).ready(function () {
$(".fb").fancybox({
'width': 600,
'height': 380,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'href': 'B.aspx',
'onClosed': function() {
window.location.href='A.aspx';
}
});
});
好像怎么搞都不行，我现在只能添加一个选定内容的列，选择该行后在SelectedIndexChanging里面添加加载css的，并设置session.然后点击改行通过session在pageload的时候加载详细信息。这样要点两下才能出来。
protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//鼠标移动到某行上，该行变色
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#CCCCFC'");
//鼠标移开后，恢复
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
//定义css弹出fancybox
//e.Row.CssClass = "fb";
//点击后，实现该行的选中
//e.Row.Attributes.Add("onclick", "__doPostBack('gv1','Select$" + e.Row.RowIndex + "')");
}
}
protected void gv1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
//this.btnyh.Text = this.gv1.Rows[e.NewSelectedIndex].Cells[4].Text.ToString().Trim();
Session["id"] = this.gv1.Rows[e.NewSelectedIndex].Cells[5].Text.ToString().Trim();
this.gv1.Rows[e.NewSelectedIndex].CssClass = "fb";
}
请问要怎么做才能在gridview上点击某一行任何位置，或者点击“详细”就能弹出带有改行详细内容的fancybox，b.aspx
...全文
请发表友善的回复…
发表回复
-Tracy-McGrady- 2015-08-06
- 打赏
- 举报
看看私信三
wx8849 2015-08-05
- 打赏
- 举报
<section class="featured">
<div>
<asp:GridView ID="Grid1" runat="server" OnSelectedIndexChanged="Grid1_SelectedIndexChanged" DataKeyNames="ID" AutoGenerateColumns="False" OnRowDataBound="Grid1_RowDataBound">
<Columns>
<asp:TemplateField ControlStyle-CssClass="desc">
<ItemTemplate>
<a><%# Eval("ID") %></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<a><%# Eval("Name") %></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</section>
<script>
function thisID(id) {
alert(id);
}
</script>
protected void Grid1_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow GridR = Grid1.SelectedRow;
string S = Grid1.DataKeys[GridR.DataItemIndex].Value.ToString();
Page.ClientScript.RegisterStartupScript(this.GetType(), "tk", "thisID(" + S + ")", true);
}
protected void Grid1_RowDataBound(object sender, GridViewRowEventArgs e)
{
e.Row.Attributes["style"] = "cursor:hand";
PostBackOptions myPostBackOptions = new PostBackOptions(this);
myPostBackOptions.AutoPostBack = false;
myPostBackOptions.PerformValidation = false;
myPostBackOptions.RequiresJavaScriptProtocol = true; //加入javascript:头
String evt = Page.ClientScript.GetPostBackClientHyperlink(sender as GridView, "Select$" + e.Row.RowIndex.ToString());
e.Row.Attributes.Add("onclick", evt);
}-Tracy-McGrady- 2015-08-05
- 打赏
- 举报
e.Row.Attributes.Add("onclick", "showFancyBox(" + ((GridView)sender).DataKeys[e.Row.RowIndex].Value.ToString() + ");");
((GridView)sender).DataKeys[e.Row.RowIndex].Value.ToString();
<div>
<!-- 数据显示区 !-->
<a id="openUrl" href="#" style="display:none;"></a>
<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" HorizontalAlign="Center" PageSize="5" DataSourceID="ds_gv1" AllowPaging="True" onrowdatabound="gv1_RowDataBound" onselectedindexchanging="gv1_SelectedIndexChanging" Height="100%" Width="100%"
DataKeyNames="dm" >
ajianchina 2015-08-05
- 打赏
- 举报
关注你了，解决就好，顺便Happy一下！
-Tracy-McGrady- 2015-08-05
- 打赏
- 举报
大哥，你太屌了，关注下我可好？给你发个邮件加把QQ好友
ajianchina 2015-08-05
- 打赏
- 举报
首先要打一个包票给你，代码全完没问题的，因为我这次也是第一次听说这个fancybox，所以昨晚我特地进行了测试，原本打算直接修改fancybox，但发现通过变通方法更为简单，发给你的所有代码都是经过测试的。
你现在的问题就是DataKeyNames设置的主键错误，你自己要找出数据源中的主键，这个只有你自己知道，B.aspx?id=x,这个id你要取什么，自己从数据源中看一下，如果没有，那么就是没有select出来，自己将id select出来就行了。
-Tracy-McGrady- 2015-08-05
- 打赏
- 举报
DataKeyNames="dm"，dm是什么？主键id吗？是你数据源中的id吗？[/quote]
我就什么都没搞,搞了一个datasourse，dm是select出来的
<asp:SqlDataSource ID="ds_gv1" runat="server" ConnectionString="<%$ ConnectionStrings:connstr %>"ajianchina 2015-08-05
- 打赏
- 举报
DataKeyNames="dm"，dm是什么？主键id吗？是你数据源中的id吗？
ajianchina 2015-08-04
- 打赏
- 举报
刚刚没事看了一下Fancybox，呵呵，没想到是这么一个东西，趁有时间已经给你弄好了。
上码了，全套
<script type="text/javascript">
$(document).ready(function(){
$("#openUrl").fancybox({
'width':'75%',
'height':'75%',
'autoScale':false,
'transitionIn':'none',
'transitionOut':'none',
'type':'iframe'
});
});
function showFancyBox(id)
{
$("#openUrl").attr("href","b.aspx?id="+id);
$("#openUrl").click();
}
</script>
这个隐藏的a标签，你放在body，随便什么地方，反正看不到。
<a id="openUrl" href="#" style="display:none;"></a>
protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//鼠标移动到某行上，该行变色
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#CCCCFC'");
//鼠标移开后，恢复
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
//就这儿了
e.Row.Attributes.Add("onclick", "showFancyBox("+((GridView)sender).DataKeys[e.Row.RowIndex].Value.ToString()+")");
}
}
ajianchina 2015-08-04
- 打赏
- 举报
简直骚得不像话，如果这样可以的话，那真是不能再美妙了，大哥，showFancyBox也弄成“starfd娃都会打酱油了”大神说的自定义click方法吗？你这种写法到了B.aspx怎么获取参数啊？哈哈，小菜鸟我是。我显示使用<a>标签是用
Request.QueryString["id"].ToString();-Tracy-McGrady- 2015-08-04
- 打赏
- 举报
简直骚得不像话，如果这样可以的话，那真是不能再美妙了，大哥，showFancyBox也弄成“starfd娃都会打酱油了”大神说的自定义click方法吗？你这种写法到了B.aspx怎么获取参数啊？哈哈，小菜鸟我是。我显示使用<a>标签是用
Request.QueryString["id"].ToString();
娃都会打酱油了 2015-08-04
- 打赏
- 举报
点击弹出这是js的事情，不是后台的事情……
如果你要整行点击任意位置都弹出窗体的话，那你应该将fancybox注册到每行对应的dom节点上，当然这时候根据实际需要，你可能还要考虑事件冒泡带来的问题，比如你每行都注册了打开fancybox事件，但每行包含的某些dom你又包含了一些相对应的js处理事件，这时候就可能会存在你不希望的执行结果，后果可能就是你需要阻止事件冒泡
ajianchina 2015-08-04
- 打赏
- 举报
很简单，直接在你的RowDataBound事件中绑下就行了，搞那么复杂干啥！
第一步、在视图模式下 右击gridview控件 属性，设置DataKeyName 的值为 你表中的id
第二部、在RowDataBound事件中加上点击行的onclick事件
protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//鼠标移动到某行上，该行变色
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#CCCCFC'");
//鼠标移开后，恢复
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
//就这儿了
e.Row.Attributes.Add("onclick", "showFancyBox("+((GridView)sender).DataKeys[e.Row.RowIndex].Value.ToString()+")");
}
}
-Tracy-McGrady- 2015-08-04
- 打赏
- 举报
嗯，这个更高端了，初次接触.net，有点吃力啊。直接初始化跟自定义click事件有什么区别吗？数据上啊，效率上啊的。这个东西想实现效果都只能通过嵌套<a>标签的形式吗？能不能在RowDataBound的时候来这么一句
e.Row.Attributes.Add("onclick", "__doPostBack('gv1','Select$" + e.Row.RowIndex + "')");-Tracy-McGrady- 2015-08-04
- 打赏
- 举报
不错不错，经过测试，加上this.btnbc.Text = Request.QueryString["id"].ToString();基本可以用，萌萌大。那不是弄这么一个，直接点击gridview一行中的任意位置就弹出这个东西呢？？
娃都会打酱油了 2015-08-04
- 打赏
- 举报
<a shref="@Url.Action("ProductContract", "Account", new { productSn = currProduct.Sn })" class="_product_contract"> 检查</a>$('a._product_contract').click(function (event) {
var href = $(this).attr("shref");
$.fancybox.open({
href: href,
type: 'iframe',
padding: 5
});
});-Tracy-McGrady- 2015-08-04
- 打赏
- 举报
唉，大哥你函数都是xoxo，目测就是rui大爷了
-Tracy-McGrady- 2015-08-04
- 打赏
- 举报
就是fancybox，那个弹出层插件。大哥你有做过gridview里面点击一行然后弹出详细信息这样的功能吗？我是小菜菜一只啊，搞不懂var href = $(this).attr("shref");这个东西
by_封爱 2015-08-04
- 打赏
- 举报
哎....
<asp:TemplateField>
<ItemTemplate>
<a class="xxoo" href='b.aspx?id=<%#Eval(id"")%>'>详细信息</a>
$(".xxoo").fancybox({
'width':'75%',
'height':'75%',
'autoScale':false,
'transitionIn':'none',
'transitionOut':'none',
'type':'iframe'
});
娃都会打酱油了 2015-08-04
- 打赏
- 举报
$('a._product_contract').click(function (event) {
var href = $(this).attr("shref");
$.fancybox.open({
href: href,
type: 'iframe',
padding: 5
});
});加载更多回复（2）
