我希望将复选框的值放在网格视图中。如果选中复选框,则应启用该行中的文本框,如果再次取消选中该文本框,则文本框应清除并禁用。几小时后我问了这个问题,但仍然没有得到满意的答复。 我试过这样的。
//我的网格代码。
<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>
答案 0 :(得分:2)
此解决方案 测试 且 正常工作 仅使用JavaScript
(无{{1}这个解决方案是必需的!)。
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
,这是我们以后需要的。
确保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">
然后在您的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;
}
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);