gridview 행 마우스 오버시 다른 행에 행 데이터를 표시하고 싶습니다.

Question

사용자가 행 위에 마우스를 올려 놓았을 때 다른 패널에 gridview 행의 세부 정보를 표시하고 싶습니다. 뒤에 코드를 통해 가능하다는 것을 의심, 그래서 자바 스크립트를 사용 찾고 있습니다. 행이 이상 마우스가있을 때

이 간단한 예를 들어

, 나는 "lblIdDetail"와 "lblNameDetail"에서 사용자의 ID와 이름을 표시하고 싶습니다 :

<asp:GridView ID="GridView1" runat="server" EnableModelValidation="True" AutoGenerateColumns="false"> 
     <Columns> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <asp:Label ID="lblId" Text=<%# Bind("id") %> runat="server"></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <asp:Label ID="lblName" Text=<%# Bind("name") %> runat="server"></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 
    <asp:Panel ID="pnlDetails" runat="server"> 
     <asp:Label ID="Label1" runat="server" Text="The hovered Id is: "></asp:Label> 
     <asp:Label ID="lblIdDetail" runat="server" Text="Label"></asp:Label> 
     <br /> 
     <asp:Label ID="Label3" runat="server" Text="The hovered name is: "></asp:Label> 
     <asp:Label ID="lblNameDetail" runat="server" Text="Label"></asp:Label> 
    </asp:Panel> 

더미 데이터 그리드를 채우려면 :

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!IsPostBack) 
     { 
      DataTable sampleData = new DataTable(); 
      sampleData.Columns.Add("id"); 
      sampleData.Columns.Add("name"); 


      sampleData.Rows.Add("1", "Dave"); 
      sampleData.Rows.Add("2", "John"); 
      sampleData.Rows.Add("3", "Jacob"); 
      sampleData.Rows.Add("4", "Smith"); 

      GridView1.DataSource = sampleData; 
      GridView1.DataBind(); 
     } 
    } 

저는 자바 스크립트를 사용하여 매우 익숙하지 않으므로 가능한 한 자세한 답변을 제공해 주시면 감사하겠습니다. ,

//pass the needed row contens into showContents 
e.Row.Attributes["onmouseover"] = "showContents(arg1, arg2, arg3)"; 

난 당신이 레이블에 표시 할 열의 데이터 키를 추가 할 수의 값을 끌어 :이처럼 RowDataBound 이벤트에 마우스 오버 이벤트를 추가 할 수 있습니다

Answer 1

:-) 감사합니다 RowDataBound 이벤트를 만들고 showContents JS 함수에 전달합니다.

Answer 2

제임스의 도움으로 필자가 찾고자했던 기능을 결합했습니다. 제공된 코드 샘플은 gridview에 데이터가 표시되고 일부는 표시되고 일부는 숨겨집니다. 행을 통해 마우스를 가져 가면에 숨겨진 데이터가있는 gridview보다 자세한 내용은 표시하는 데 사용, 아래에 표시됩니다

<script type="text/javascript"> 

window.onload = hideColumns; 

    function hideColumns() { 
    var gv = document.getElementById("GridView1"); 
    for (var i = 0; i < gv.rows.length; i++) { 
     gv.rows[i].cells[1].style.display = "none"; 
    } 
} 

function showContents(rowIndex) { 


    var gv = document.getElementById("GridView1"); 
    var rowElement = gv.rows[rowIndex]; 
    var id = rowElement.cells[0].innerHTML; 
    document.getElementById('lblIdDetail').innerHTML = id; 
    var name = rowElement.cells[1].innerHTML; 
    document.getElementById('lblNameDetail').innerHTML = name; 

} 
</script> 

---

을 여기

<form id="form1" runat="server"> 
<div> 
    <asp:GridView ID="GridView1" runat="server" EnableModelValidation="True" 
     AutoGenerateColumns="false" OnRowDataBound="setMouseover"> 
     <Columns> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <asp:Label ID="lblId" Text="<%# Bind('id') %>" runat="server"></asp:Label> 
        <asp:Label ID="lblGreeting" Text="hello" runat="server" Visible="false" ></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField > 
       <ItemTemplate> 
        <asp:Label ID="lblName" Text="<%# Bind('name') %>" runat="server" ></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 
    <asp:Panel ID="pnlDetails" runat="server"> 
     <asp:Label ID="Label1" runat="server" Text="The hovered Id is: "></asp:Label> 
     <asp:Label ID="lblIdDetail" runat="server" Text="Label"></asp:Label> 
     <br /> 
     <asp:Label ID="Label3" runat="server" Text="The hovered name is: "></asp:Label> 
     <asp:Label ID="lblNameDetail" runat="server" Text="Label"></asp:Label> 
    </asp:Panel> 
</div> 
</form> 

---

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!IsPostBack) 
     { 
      DataTable sampleData = new DataTable(); 
      sampleData.Columns.Add("id"); 
      sampleData.Columns.Add("name"); 


      sampleData.Rows.Add("1", "Dave"); 
      sampleData.Rows.Add("2", "John"); 
      sampleData.Rows.Add("3", "Jacob"); 
      sampleData.Rows.Add("4", "Smith"); 

      GridView1.DataSource = sampleData; 
      GridView1.DataBind(); 


     } 
    } 

    protected void setMouseover(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowIndex != -1) 
     { 
      e.Row.Attributes["onmouseover"] = "showContents('" + (e.Row.RowIndex +1)+ "')"; 

     } 
    }