使用javascript查找置于gridview内的复选框和文本框

时间:2011-06-07 10:42:22

标签: c# javascript asp.net gridview checkbox

我希望将复选框的值放在网格视图中。如果选中复选框,则应启用该行中的文本框,如果再次取消选中该文本框,则文本框应清除并禁用。几小时后我问了这个问题,但仍然没有得到满意的答复。 我试过这样的。

//我的网格代码。

<asp:GridView ID="DeptGrid" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="DeptId" HeaderText="ID"/>
                    <asp:BoundField DataField="DeptName" HeaderText="Department"/>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="addToCompanyBox"  onClick="EnableHODBox()" runat="server" />
                        </ItemTemplate>
                        <HeaderTemplate>
                            Add
                        </HeaderTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:TextBox ID="hodNameBox" runat="server" Width="200px" Enabled="false"></asp:TextBox>
                        </ItemTemplate>
                        <HeaderTemplate>
                            Dept Head
                        </HeaderTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

//我的javascript代码

<script type="text/javascript">
 function EnableHODBox() {
     //alert('hello');
     var GridView = document.getElementById('<%=DeptGrid.ClientID %>');
     //var GridView = document.getElementById('');
     var DeptId;
     if (GridView.rows.length > 0) {
         for (Row = 1; Row < GridView.rows.length; Row++) {
            // DeptId = GridView.rows.cell[0];
             if (GridView.rows[Row].cell[3].type == "checkbox")
             // var chkbox = GridView.rows[Row].cell[3].type == "checkbox"
                 (GridView.rows[Row].cell[3].type).checked = true;
         }
     }
 }
 </script>

7 个答案:

答案 0 :(得分:2)

此解决方案 测试 正常工作 仅使用JavaScript(无{{1}这个解决方案是必需的!)。

1。 C#部分(在jQuery方法中)

Page_Load我们需要添加一个小黑客:

Page_Load

这样,我们就会在foreach(GridViewRow row in YourGridViewControlID.Rows) { if (row.RowType == DataControlRowType.DataRow ) { ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");"); } } OnChange的每个CheckBox GridView事件中添加JavaScript函数调用。什么是特殊的,我们无法通过HTML实现的是我们在JavaScript函数中传递每个Row Index,这是我们以后需要的。

2。 HTML部分的一些重要说明

确保Checkbox控件和Textbox控制,但更重要您的GridView控件具有静态ID,使用ClientIDMode="Static",如图所示波纹管:

<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />

对于GridView控件:

<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">

3。 Javascript部分

然后在您的JavaScript文件/代码中:

function TextboxAutoEnableAndDisable(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];

  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked === false) {
    // Empty textbox and make it disabled
    rowTextBox.value = "";
    rowTextBox.disabled = true;
    return;
  }

  // To be here means the row checkbox is checked, therefore make it enabled.
  rowTextBox.disabled = false;
}

4。上述实施的一些注意事项

  • 请注意,在JavaScript代码中,行:
    var currentGridViewRow = GridView.rows[Row + 1];
    [Row + 1]对于完成这项工作很重要,不应该改变。
  • 最后:

以下几行:

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

.cells[2].cells[0]可能与您有所不同,因此您必须在[]中选择正确的数字。
通常,这将是从GridView开始计算的0的列号。

因此,如果您的CheckBox位于GridView的第一列,那么您需要.cells[0]
如果您的TextBox位于GridView的第二列,那么您需要.cells[1](在我的情况下,TextBox位于GridView的第三列因此,我使用了.cells[2]

答案 1 :(得分:1)

您可以使用onclick JavaScript而不是OncheckedChanged事件,这是一个CheckBox服务器端事件。

<asp:CheckBox ID="CheckBox2" runat="server" onclick="Javascript:JSfunctionName();" />

修改

var GridView = document.getElementById('<%=DeptGrid.ClientID %>')

修改:根据您的评论请求

 if (GridView.rows[Row].cell[2].type == "checkbox")
 {
    if (GridView.rows[Row].cell[2].childNodes[0].checked)
    {
       GridView.rows[Row].cell[3].childNodes[0].disabled=false;// Enable your control here
    }
 }

答案 2 :(得分:0)

我还发现语句if(GridView.rows [Row] .cell [2] .type ==“checkbox”)导致错误,GridView.rows [Row] .cell [2] .type is undefined 。我现在运行的代码如下:

    var grid = document.getElementById('<%=grdResults.ClientID%>');
    if (grid.rows.length > 0) {
        for (row = 1; row < grid.rows.length; row++) {
            if (grid.rows[row].cells[0].childNodes[0].checked) {
                // do something here
                alert('function for row ' + row);
            }                                  
        }

答案 3 :(得分:0)

您可以像这样定义网格:

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

你的Javascript功能将是:

<script language="javascript" type="text/javascript">
     /* Populating same data to all the textboxes inside grid, 
     once change of text for one textbox - by using jquery
     */
     function SetPostingPeriod(obj) {

         var cntNbr = $("#" + obj.id).val();
      // var cntNbr = document.getElementById(obj.id).value;
      // alert(cntNbr);

         //Access Grid element by using name selector
         $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

             if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }
         });
     }
 </script>

这个Javascript函数被称为文本框的onblur事件。  当同时调用此函数时,它传递一个参数  这只是文本框ID。

使用参数是javascript函数 文本框的ID我们得到了vaue。

以下是代码:

      var cntNbr = $("#" + obj.id).val();

然后对于网格内可用的每个“txtPeriod”控件,我们需要分配  当前“txtPeriod”文本框值的值。

循环网格识别每个“txtPeriod”可用:    这是代码:

 $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

 });

在这个循环中,我们需要将“txtPeriod”(当前/修改)值分配给其他     “txtPeriod”文本框。在指定其检查的良好做法之前,它是null还是NAN。  这是代码:

               if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }

答案 4 :(得分:0)

您好,这里有一个非常简单的解决方案

假设你的网格是这样的:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px"
    Width="389px" EnableViewState="False">
    <Columns>
        <asp:TemplateField HeaderText="EmployeeId">
            <ItemTemplate>
                <asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="FirstName">
            <ItemTemplate>
                <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="LastName">
            <ItemTemplate>
                <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#FF66FF" ForeColor="#660033" />
</asp:GridView>

和你的javascript在你的网格中找到控件是

   <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnAddToGrid").click(function () {
                var $grid = $('#<%=GridView1.ClientID %>');
                var $row = $grid.find('tr:last').clone().appendTo($grid);
                var employeeId = $row.find("span[id*='lblEmployeeId']").text();
                var firstname =  $row.find("span[id*='lblFirstName']").text();
                var lastname = $row.find("span[id*='lblLastName']").text();
              alert("ID :" + employeeId +"\n" + "Name :" + firstname +" "+ lastname );
            });
        });
    </script>

答案 5 :(得分:0)

使用javascript查找网格内的控件:

for (var r = 1; r < grid.rows.length; ++r) {

    var indexValue = 0; //based on browser. //IE8
    var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
    if (typeof (txtPeriod.value) == "undefined")//IE9                      
        indexValue = 1
     var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
     alert(txtPeriod.value);
}

答案 6 :(得分:0)

var x = document.getElementById('<%=grdResults.ClientID%>').querySelectorAll("input");
var i;
var cnt = 0;
for (i = 0; i < x.length; i++) {
     if(x[i].type== "checkbox" && x[i].checked)
     cnt++;
}
alert("item selected=" + cnt);