现在我遇到了一个问题，就是点击一行时，div层就在该层下显示。问题就出来了，我根本不能定位到这个div的top和left。因为我没有办法取得我点击行的top和left值。在winform里面好做，可是asp.net就不知道了。
1
虽然也可以用这个 this.popUp.Style["top"]设置，但是取不到点击行的Style["top"]，没有设置的情况下为null。
2
我找到了οnfοcus="popShow(this);"这个客户端事件。
document.getElementById('popUp').style.top =e.getBoundingClientRect().top + 20 + document.body.scrollTop;//ttop + h;
document.getElementById('popUp').style.left=e.getBoundingClientRect().left + 20 + document.body.scrollLeft;//tleft + w - moneyMsg.clientWidth;
这个可以取道top和left。但是我还要触发服务器端事件，把数据绑定到div层中显示信息，这样一来div层又回初始位置了。
现在头疼啊，我都找了一天了，请高手赐教啊！分不是问题，不够我补！
redria»
说一个不完美的方法，当然我比较菜，left相对于gridview应该是相对固定的。剩下的就是top的问题，可以根据鼠标来定位，就是出来的div不会很准确的定位。
chen_lichao»
点击的时候有
event.clientX
event.clientY
diandian82»
http://www.cssrain.cn/article.asp?id=62
lovingkiss»
还要触发服务器端事件，就只能用Ajax来获取数据，和定位了；
zhengweitao»
我比较菜 但我可以帮你顶上去
Magicwords»
获取到鼠标的位置就可以了，
liubin911»
不知道能不能帮你
-
HTML code
-
< script > function show(o,id){ var m = document.getElementById(id) m.style.pixelLeft = getL(o) m.style.pixelTop = getT(o) + o.offsetHeight m.style.visibility = '' } function hide(id){ document.getElementById(id).style.visibility = ' hidden ' } function getL(e){ var l = e.offsetLeft; while (e = e.offsetParent){ l += e.offsetLeft; } return l } function getT(e){ var t = e.offsetTop; while (e = e.offsetParent){ t += e.offsetTop; } return t } <!-- 模板列里 --> < asp:TemplateColumn > < HeaderTemplate > 图片 < / HeaderTemplate> < ItemTemplate > < a href = ' productbianji.aspx?id=<%#DataBinder.Eval(Container.DataItem,"product_id") %> ' style = " text-decoration: none; border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; border-bottom: 0px solid; " > < img src = ' <%#DataBinder. Eval(Container.DataItem,"product_url")%> ' onmouseover = ' show(this,<%#DataBinder.Eval(Container.DataItem,"product_id") %>) ' onmouseout = ' hide(<%#DataBinder.Eval(Container.DataItem,"product_id") %>) ' style = " padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; margin: 0px; width: 100px; height: 100px; " > < / a> < div id = ' <%#DataBinder.Eval(Container.DataItem,"product_id") %> ' style = " BORDER-RIGHT:black 1px solid; PADDING-RIGHT:0px; BORDER-TOP:black 1px solid; PADDING-LEFT:0px; VISIBILITY:hidden; PADDING-BOTTOM:0px; BORDER-LEFT:black 1px solid; WIDTH:0px; PADDING-TOP:0px; BORDER-BOTTOM:black 1px solid; left: 0px; top: 0px; position: absolute; " > < img src = ' <%#DataBinder. Eval(Container.DataItem,"product_url")%> ' style = " width:300px; height: 300px; " > < / div> < / ItemTemplate> < / asp:TemplateColumn> </ script >
liubin911»
复制错了点东西，模板列里不是在 </script>标记里的，放在控件里，我像一般人都能看明白
spyking945»
document.all("div").style.top=event.clientY+10;
document.all("div").style.left=event.clientX+10;
xiaxiazhu119»
帮顶一下
wwd252»
来了哦
delphi_new»
设置这个DIV的z-index 的值最大，
比如设置为 z-index:10000就在上面了
haplvs»
顶，我先收藏了
typeof»
up
kokyulei»
希望大家把我说的看清楚在说。
weinaxxc»
我提个建议，做增删改操作的时候，如果一定要做成LZ这样，最好先做一个z-index=99的div来屏蔽当前窗口，然后在这个DIV上摆一个居中的DIV来显示当前操作的数据，再提交！
yytt123622»
层的定位是靠position属性的！先把弹出层的position属性定义为“绝对定位”，然后在包含这个层的标签的position属性定位为“相对定位”，这样就可以控制住这个层在GridView的上面，然后通过定义弹出层的left和top等属性等位好，此时left代表你层的左边框距离包含这个层的标签的距离，top等属性也是如此
比如：
<table>
<tr>
<td style="height:20px; widht:100px; position:relative">
<div style=" position:absolute; left:0px; top:5px; z-index:99;">这个就是能覆盖在你GridView上面的层，而且这个层不会因为你页面的伸缩而位置乱跑 </div>
</td>
</tr>
</table>
多学学样式表就好了！
kokyulei»
现在谢谢各位，我也知道position:absolute; left:0px; top:5px; z-index:99这些。现在我的问题是怎么能根据我点击的按钮的位置弹出div层。简单的说div不能跟随我点击的按钮来显示。只能固定一个位置显示。你们有什么好的办法吗？
kokyulei»
这是我在codeproject找到的，但是只有dll，没有说明怎么实现的。我现在做的功能跟他一样，就是我的是datalist，他用的是gridview。请高手们看看div根据点击的行跟随显示这个功能怎么完成，当然还要触发要是在服务器事件。
takako_mu»
臺……難了，LX速度解決！
weinaxxc»
这个是我以前改的一个DIV的提示框代码，就是在鼠标悬停的地方弹出DIV来描述信息，我觉得你改改应该可以搞的出来的！
-
C# code
-
// 这里不用多说了，JS代码 < script language = " JavaScript " > // ----------------------写HTML代码---------------------- var changdi = " <table style='margin:0 0 0 0;border:solid 1px #009933;background:#ffffff''><tr><td align='center' vlign='middle'><img src='../website/image/tips.jpg' width=50 height=50></td><td align='center' vlign='middle'><font color='green' size='6'>这里写你需要显示的东西，也重新写这个变量里面所有的HTML</font></td></tr></table> " ; // ------------------------------------------------------ var isIE = document.all ? true : false ; function overlib(tipcontent) { customdiv = document.getElementById( " overDiv " ); customdiv2 = document.getElementById( " overDiv2 " ); customdiv.innerHTML = tipcontent; var tleft = document.body.scrollLeft + window. event .clientX; var ttop = document.body.scrollTop + window. event .clientY; if (document.body.clientWidth < 300 ) { customdiv.style.left = 2 ; customdiv2.style.left = 2 ; } else if (tleft > document.body.clientWidth - 200 ) { customdiv.style.left = tleft - 175 ; customdiv2.style.left = tleft - 175 ; } else { customdiv.style.left = tleft + 10 ; customdiv2.style.left = tleft + 10 ; } if (document.body.clientHeight < 100 ) { customdiv.style.top = 25 ; customdiv2.style.top = 25 ; } else if (ttop > document.body.clientHeight - 55 ) { customdiv.style.top = ttop - 55 ; customdiv2.style.top = ttop - 55 ; } else { customdiv.style.top = ttop + 10 ; customdiv2.style.top = ttop + 10 ; } customdiv2.style.width = customdiv.clientWidth; customdiv2.style.height = customdiv.clientHeight; customdiv.style.visibility = ' visible ' ; customdiv2.style.visibility = ' visible ' ; } function nd() { customdiv = document.getElementById( " overDiv " ); customdiv2 = document.getElementById( " overDiv2 " ); customdiv.style.width = 0 ; customdiv.style.height = 0 ; customdiv.style.visibility = ' hidden ' ; customdiv2.style.visibility = ' hidden ' ; } function b(v) { window.status = v }; </ script > // 这里可以放在网页的任何地方，一个IFRAME，一个DIV，组合起来可以遮挡SELECT < div id = " overDiv " style = " position:absolute; visibility:hidden;z-index:100;padding:0 0 0 0;background:#FDFEF9;text-align:left;font-size:12px; " > </ div > < iframe id = " overDiv2 " src = "" scrolling = " no " frameborder = " no " style = " position:absolute; visibility:hidden;z-index:99;filter: Alpha(style=0,opacity=0) " > </ iframe > // 鼠标悬停调用 onMouseOver = " return overlib(changdi) " onMouseOut = " return nd(); "
kokyulei»
谢谢楼上的兄弟，在js中我知道该怎么做?可是我现在要先点击一行弹出div。这是本来就是调用了客户端事件，然后在调用服务器端时间的。现在我还要加载数据，这些事情都是在服务器端完成的。所以不好搞啊。我还没有想到好的方法。有兴趣研究的，请看看http://www.codeproject.com/KB/custom-controls/SDXGrid.aspx
cteddy»
你给RMB我给你一个一模一样的
GRIDVIEW
源代码 也可以给你
就是国外的一个重写了的GRIDVIEW组件而已
因为这个组件是收费的
shawn_yang»
mark
weinaxxc»
你是说加载数据不好搞吗？
用AJAX异步加载
或者在GRID进行BOUND的时候直接传参到JS函数
-
C# code
-
string title1 = " 姓名 " ； string title2 = " 编号 " ; string title3 = " 密码 " ; string title4 = " 性别 " ; tr_link.Attributes.Add( " onclick " , " overlib(' " + title1 + " ',' " + title2 + " ',' " + title3 + " ',' " + title4 + " ') " );
neilzaza»
我写了个例子 时间有限 简单了一点 不过应该对你有点帮助 能实现你的要求
前台：
-
HTML code
-
< html xmlns ="http://www.w3.org/1999/xhtml" > < head runat ="server" > < title > 无标题页 </ title > < script type ="text/javascript" src ="../jquery/jquery.js" ></ script > < script type ="text/javascript" > $( function (){ $( " #GridView1 " ).find( " tr " ).click( function (){ $( " #div1 " ).show(); $( " #div1 " ).css({ position: " absolute " , background: " blue " }); $( " #div1 " ).css( " left " ,$( " #content " ).offset().left + $( " #GridView1 " ).width() / 2-$("#div1").width() / 2 ); // 这里的弹出框我用的是GridView1正中 $( " #div1 " ).css( " top " ,$( " #content " ).offset().top + $( " #GridView1 " ).height() / 2-$("#div1").height() / 2 ); $( this ).find( " td " ).each( function (i){ switch (i) { case 1 :$( " #table1 " ).find( " #tbName " ).val($( this ).text()); break ; case 2 :$( " #table1 " ).find( " #tbImg " ).val($( this ).text()); break ; case 3 :$( " #table1 " ).find( " #tbTime " ).val($( this ).text()); break ; } }); // 遍历选中行cell中的text }); }) </ script > </ head > < body > < form id ="form1" runat ="server" > < div id ="content" > < asp:GridView ID ="GridView1" runat ="server" AutoGenerateColumns ="False" DataKeyNames ="id" DataSourceID ="SqlDataSource1" OnRowDataBound ="GridView1_RowDataBound" > < Columns > < asp:BoundField DataField ="id" HeaderText ="id" InsertVisible ="False" ReadOnly ="True" SortExpression ="id" /> < asp:BoundField DataField ="name" HeaderText ="name" SortExpression ="name" /> < asp:BoundField DataField ="mapImage" HeaderText ="mapImage" SortExpression ="mapImage" /> < asp:BoundField DataField ="createtime" HeaderText ="createtime" SortExpression ="createtime" /> </ Columns > </ asp:GridView > < asp:SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString ="Data Source=.;Initial Catalog=xxx;Integrated Security=True" ProviderName ="System.Data.SqlClient" SelectCommand ="SELECT [id], [name], [mapImage], [createtime] FROM [panoImg]" > </ asp:SqlDataSource > < div id ="div1" style ="display:none" > < table id ="table1" > < tr >< td > XXX: < asp:TextBox ID ="tbName" runat ="server" ></ asp:TextBox ></ td ></ tr > < tr >< td > XXX: < asp:TextBox ID ="tbImg" runat ="server" ></ asp:TextBox ></ td ></ tr > < tr >< td > XXX: < asp:TextBox ID ="tbTime" runat ="server" ></ asp:TextBox ></ td ></ tr > </ table ></ div > </ div > </ form > </ body > </ html >
后台：
-
C# code
-
protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e) { for ( int i = - 1 ; i < GridView1.Rows.Count; i ++ ) { // 首先判断是否是数据行 if (e.Row.RowType == DataControlRowType.DataRow) { // 当鼠标停留时更改背景色 e.Row.Attributes.Add( " onmouseover " , " c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF' " ); // 当鼠标移开时还原背景色 e.Row.Attributes.Add( " onmouseout " , " this.style.backgroundColor=c " ); } } }
扫一扫
6008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
