2015-02-12 3 views
0

У меня есть сетка с несколькими скрытыми столбцами. Когда я курсирую над каждой строкой в ​​сетке, я хочу, чтобы значения скрытых столбцов отображались в текстовых полях ниже gridview.asp.net получить значения gridview с jquery и надеть текстовые поля

Ниже приведен код 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> 

Ниже некоторые из кода JQuery я использую, чтобы получить GridView строки я выбрал, но я не могу заставить его дать мне значение каждого скрытого столбца в 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> 
+0

, если вы разместите обработанную HTML это будет очень легко решить эту проблему. –

+0

Привет, я разместил некоторый визуализированный HTML-код области gridview ... Надеюсь, этого достаточно ... спасибо. – user1135218

+0

Я отправлю ответ ниже с помощью html и jquery. –

ответ

2

Html код

Указанный класс для каждого скрытого поля. «data1 и data2», поэтому мы можем напрямую получить элемент, используя этот класс.

<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

<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; 
     } 

Надеется, что это помогает

+0

Фантастический! именно то, что я искал. работает как шарм! спасибо Фребину. – user1135218

+0

Вы всегда рады –

0

На клиентской функции вызова события парения мыши, как показано ниже, и карты, которые контролируют с другими значениями строки, которые дорожат и хотят от 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 
       } 
     } 
+0

спасибо за руководство, но я был больше после решения, подобного тому, которое было у Frebin's. Тем не менее, я ценю вашу помощь. – user1135218

Смежные вопросы