Question

我有一个隐藏了几列的网格视图。当我将鼠标悬停在网格上的每一行时，我希望隐藏的列值显示在网格视图下方的文本框中。

以下是html / aspx代码（缩短）只有几列可见，大多数都是隐藏的。

     <asp:GridView ID="GridView1" >
           <rowstyle cssclass="GridRowStyle" />
           <Columns>                                  
              <asp:BoundField DataField="ClientsName"  HeaderText="ClientsName"></asp:BoundField>

             <asp:BoundField DataField="Clientsaddress1"  HeaderText="Clientsaddress1"><ItemStyle CssClass="hiddencol" /><HeaderStyle CssClass="hiddencol" /> </asp:BoundField>
              <asp:BoundField DataField="Clientsaddress2"  HeaderText="Clientsaddress3"><ItemStyle CssClass="hiddencol" /><HeaderStyle CssClass="hiddencol" /> </asp:BoundField>
    </columns>
    </asp:gridview>

<asp:TextBox ID="txtAddress1" runat="server" Width="250px"  ></asp:TextBox>
<asp:TextBox ID="txtAddress2" runat="server" Width="250px"  ></asp:TextBox>

以下是我用来获取我选择的gridview行的一些Jquery代码，但是我无法让它给出gridview行上每个隐藏列的值。我已经尝试过在stackoverflow中找到的几段代码，但是无法让它工作。代码给了我行号，很好，但无法获取隐藏的列值并将它们放在gridview下面的各自文本框中。

 $("#GridView1 tr td").mouseenter(function () {
                    var iColIndex = $(this).closest("tr td").prevAll("tr td").length;
                    var iRowIndex = $(this).closest("tr").prevAll("tr").length;
                    alert(iRowIndex)
                 });

感谢您的指导。

更新：这是一个用HTML呈现的示例。该页面有大约600行文本，所以我缩短了一些例子来说明gridview渲染的样子。

<tr title="Click to select this row." class="GridRowStyle" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">

<td class="hiddencol">23644</td>
<td class="hiddencol">10102</td>
<td class="hiddencol">Y</td>
<td class="hiddencol">21 Jump Street</td>
<td class="hiddencol">Sydney, Australia</td>
<td class="hiddencol">&nbsp;</td>
<td>

<table>
<tr>
<td class="STD_normal" style="width:150px; font-weight:bold">Apple Inc.</td>                                                       
</tr>
<tr>
<td class="STD_Normal_Grey" style="width:150px">Entered: 31-Jan-2015 </td>
</tr>
</table>                                              
</td><td>
<tr title="Click to select this row." class="GridRowStyle" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">
<td class="hiddencol">23644</td>
<td class="hiddencol">10102</td>
<td class="hiddencol">Y</td>
<td class="hiddencol">21 Jump Street</td>
<td class="hiddencol">Sydney, Australia</td>
<td class="hiddencol">&nbsp;</td>
<td>

<table>
<tr>
<td class="STD_normal" style="width:150px; font-weight:bold">Apple Inc.</td>                                                       
</tr>
<tr>
<td class="STD_Normal_Grey" style="width:150px">Entered: 31-Jan-2015 </td>
</tr>
</table>                                              
</td><td>

Answer 1

Html代码

每个隐藏字段的指定类。＆＃34; data1和data2＆＃34;所以我们可以直接使用该类获取元素。

<asp:GridView ID="GridView1" runat="server" CssClass="tableGrid">
            <RowStyle CssClass="GridRowStyle" />
            <Columns>
                <asp:BoundField DataField="ClientsName" HeaderText="ClientsName"></asp:BoundField>
                <asp:BoundField DataField="Clientsaddress1" HeaderText="Clientsaddress1">
                    <ItemStyle CssClass="hiddencol data1" />
                    <HeaderStyle CssClass="hiddencol" />
                </asp:BoundField>
                <asp:BoundField DataField="Clientsaddress2" HeaderText="Clientsaddress3">
                    <ItemStyle CssClass="hiddencol data2" />
                    <HeaderStyle CssClass="hiddencol" />
                </asp:BoundField>
            </Columns>
        </asp:GridView>

        <asp:TextBox ID="TextBox1" runat="server" CssClass="text1" Width="250px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="text2" Width="250px"></asp:TextBox>

脚本

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table.tableGrid tr").mouseover(function (event) {
                var row = $(this);
                $(".text1").val($(row).find("td.data1").text());
                $(".text2").val($(row).find("td.data2").text());
            });
        });
    </script>

CSS

.hiddencol {
            display: none;
        }

希望这有帮助

Answer 2

鼠标悬停事件调用客户端函数如下所示，并将该控件与您希望从gridview到textbox的其他值的行映射

   function IAmSelected(source, eventArgs) {
                if (source) {
                    // Get the HiddenField ID.
                    var hiddenfieldID = source.get_id().replace("chkAdd", "hfValue");// here you can add any control of your gridview row which value you want
                    $get(hiddenfieldID).value = eventArgs.get_value();//check value or alert
                    document.getElementById('<%= yrtextbox.ClientID %>').value = eventArgs.get_value(); //for textbox
                }
      }

asp.net使用jquery获取gridview值并放置文本框

2 个答案: