我想显示gridview行的数据（鼠标悬停） [英] I want to display the data of gridview row(mouse hover)

问题描述

实际上我已经在gridview中填充了数据，但是我有很多列，所以如果用户将光标悬停在任意行上，那么该行中可用的数据应该显示在工具提示中或类似于







我试过的不工作请帮帮我



我尝试过：



< div style =height：450px;宽度：100％ >

< asp：GridView ID =gvrunat =serverAutoGenerateColumns =FalseCssClass =mGrid

AlternatingRowStyle-CssClass =alt GridLines =NoneOnRowDataBound =gv_RowDataBound>

< columns>

< asp：BoundField DataField =Column1HeaderText =C1/> ;

< asp：BoundField DataField =Column2HeaderText =C2/>

< asp：BoundField DataField =Column3HeaderText =C3 />

< / columns>

< / asp：GridView> ;

< / div>

< div id =divDetail>

< / div>

~~~~~~~~~~~~~~~~~~~~~~ ~~~~

var iRowIndex;

函数MouseEvents（objRef，evt，desc）{

if（evt.type ==mouseover ）{

objRef.style.cursor ='指针';

objRef.style.backgroundColor =#EEE;

ShowDiv（ desc，evt.pageY）;

}

else {

objRef.style.backgroundColor =＃FFF;

iRowIndex = objRef.rowIndex;

HideDiv（）;



}

}

函数ShowDiv（desc，pos）{

document.getElementById（'divDetail'）。style.display ='block';

document.getElementById（ 'divDetail'）。innerHTML = desc;

document.getElementById（'divDetail'）。style.marginTop = pos - 25 +'px';

}

函数HideDiv（）{

document.getElementById（'divDetail'）。style.display ='没有';

}

函数高亮显示（objRef，evt）{

if（evt.type ==mouseover）{

objRef.style.display ='block';

document.getElementById（'gv'）。rows [iRowIndex] .style.backgroundColor =#EEE;

}

else {

if（evt.type ==mouseout）{

document.getElementById（'gv '）.rows [iRowIndex] .style.backgroundColor =＃FFF;

objRef.style.display ='none';

}

}

}



---------------------- -----

protected void gv_RowDataBound（object sender，System.Web.UI.WebControls.GridViewRowEventArgs e）

{

if（e.Row.RowType == DataControlRowType.DataRow）

{

string sDetails = System。 String.Empty;

sDetails =详细信息;

sDetails = sDetails +名称：+

DataBinder.Eval（e.Row.DataItem，Column1）。ToString（）+;

sDetails = sDetails +Dept：+

DataBinder.Eval （e.Row.DataItem，Column2）。ToString（）+;

sDetails = sDetails +Desig：+

DataBinder.Eval（e。 Row.DataItem，Column3）。ToString（）+;

}

}

Actually I have filled the gridview with data but i have so many columns so if user hover the cursor on any row
the data which are available in that row should be displayed in tooltip or like that



What i have tried is not working please help me

What I have tried:

<div style="height: 450px; width: 100%">
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" CssClass="mGrid"
AlternatingRowStyle-CssClass="alt" GridLines="None" OnRowDataBound="gv_RowDataBound">
<columns>
<asp:BoundField DataField="Column1" HeaderText="C1" />
<asp:BoundField DataField="Column2" HeaderText="C2" />
<asp:BoundField DataField="Column3" HeaderText="C3" />
</columns>
</asp:GridView>
</div>
< div id="divDetail">
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~
var iRowIndex;
function MouseEvents(objRef, evt, desc) {
if (evt.type == "mouseover") {
objRef.style.cursor = 'pointer';
objRef.style.backgroundColor = "#EEE";
ShowDiv(desc, evt.pageY);
}
else {
objRef.style.backgroundColor = "#FFF";
iRowIndex = objRef.rowIndex;
HideDiv();

}
}
function ShowDiv(desc, pos) {
document.getElementById('divDetail').style.display = 'block';
document.getElementById('divDetail').innerHTML = desc;
document.getElementById('divDetail').style.marginTop = pos - 25 + 'px';
}
function HideDiv() {
document.getElementById('divDetail').style.display = 'none';
}
function highlight(objRef, evt) {
if (evt.type == "mouseover") {
objRef.style.display = 'block';
document.getElementById('gv').rows[iRowIndex].style.backgroundColor = "#EEE";
}
else {
if (evt.type == "mouseout") {
document.getElementById('gv').rows[iRowIndex].style.backgroundColor = "#FFF";
objRef.style.display = 'none';
}
}
}

---------------------------
protected void gv_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string sDetails = System.String.Empty;
sDetails = "Details";
sDetails = sDetails + "Name: " +
DataBinder.Eval(e.Row.DataItem, "Column1").ToString() + "";
sDetails = sDetails + "Dept: " +
DataBinder.Eval(e.Row.DataItem, "Column2").ToString() + "";
sDetails = sDetails + "Desig: " +
DataBinder.Eval(e.Row.DataItem, "Column3").ToString() + "";
}
}

推荐答案

JavaScript isn除非你想要一个花哨的工具提示，否则真的不需要。一般来说，您可以在 RowDataBound 事件中执行此类操作：

JavaScript isn't really required not unless if you want a fancy tooltip. In general, you can simply do something like this at RowDataBound event:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
            if (e.Row.RowType == DataControlRowType.DataRow) 
            { 
                ViewState["OrigData"] = e.Row.Cells[0].Text; 
                if (e.Row.Cells[0].Text.Length >= 30) //Just change the value of 30 based on your requirements 
                { 
                    e.Row.Cells[0].Text = e.Row.Cells[0].Text.Substring(0, 30) + "..."; 
                    e.Row.Cells[0].ToolTip = ViewState["OrigData"].ToString(); 
                }

             }

} 

tq for replay Vincent Maverick Durano



如下所述



链接 [ ^ ]

tq for replay Vincent Maverick Durano

referred below

Link[^]

这篇关于我想显示gridview行的数据（鼠标悬停）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！