如何让这个jQuery code可与GridView控件 [英] How to make this jQuery code works with GridView control
问题描述
编辑：
什么是不工作： - 我有一个两列（批准所有/拒绝所有的）我怎么能限制用户只允许有一个每个复选框？如果你不使用GridView中低于code工程....
我在这里问这个问题（<一个href=\"http://stackoverflow.com/questions/10560012/allow-only-one-approve-reject-checkbox-to-be-checked\">Allow只有一个（批准/拒绝）复选框进行检查）和它的工作如预期的仅如果我有asp.net控制的意义，而不使用GridView控件，现在我的处境在这里我不得不使用GridView控件，似乎我的code不工作...我都保持着相同的类名。任何帮助吗？
这是我的.aspx code。与GridView的：
＆LT;脚本类型=文/ JavaScript的LANGUAGE =JavaScript的＆GT; $（文件）。就绪（函数（）{
$（'＃C1All'）。点击（函数（）{调试
$（'。COL1＆GT;输入'）。ATTR（选中，$（'＃C1All'）ATTR（选中））;
$（'。COL2＆GT;输入'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）; $（'＃C2All'）。点击（函数（）{调试
$（'。COL2＆GT;输入'）。ATTR（选中，$（'＃C2All'）ATTR（选中））;
$（'。COL1＆GT;输入'）removeAttr（选中）。
$（'＃C1All'）removeAttr（选中）。
}）; $（'。COL1'）。每个（函数（）{
$（本）。点击（函数（）{调试
VAR ID = $（输入，这一点）.attr（'身份证'）;
变种coresId = id.replace（'C1'，'C 2'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）; $（'。COL2'）。每个（函数（）{
$（本）。点击（函数（）{调试
VAR ID = $（输入，这一点）.attr（'身份证'）;
变种coresId = id.replace（'C2'，'C1'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃C1All'）removeAttr（选中）。
$（'＃C2All'）removeAttr（选中）。
}）;
}）;
}）; ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT;
＆LT; ASP：GridView控件ID =GV=服务器的AutoGenerateColumns =FALSE的DataKeyNames =ID
OnRowDataBound =gv_RowDataBound＆GT;
＆LT;柱体和GT;
＆LT; ASP：的TemplateField的HeaderText =批准HeaderStyle-HorizontalAlign =中心HeaderStyle宽度=50像素＆GT;
＆LT;＆HeaderTemplate中GT;
批准＆LT; BR /＆GT;
＆LT; ASP：复选框ID =C1All=服务器/＆GT;
＆LT; / HeaderTemplate中＆GT;
＆LT; ItemStyle HorizontalAlign =中心/＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：复选框的CssClass =COL1ID =chkApprove=服务器＆GT;
＆LT; / ASP：复选框＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; HeaderStyle HorizontalAlign =中心/＆GT;
＆LT; / ASP：的TemplateField＆GT;
＆LT; ASP：的TemplateField的HeaderText =拒绝HeaderStyle-HorizontalAlign =中心HeaderStyle-WIDTH =180像素＆GT;
＆LT;＆HeaderTemplate中GT;
拒绝＆LT; BR /＆GT;
＆LT; ASP：复选框ID =C2All=服务器/＆GT;
＆LT; ASP：DropDownList的ID =drpPaymentMethod=服务器＆GT;
＆LT; ASP：ListItem的值= - 1＆gt;请选择＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=0＆GT;当月＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=1＆gt;对于结束＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=2＆gt;对于旅游与LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; / HeaderTemplate中＆GT;
＆LT; ItemStyle HorizontalAlign =中心/＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; DIV CLASS =selectReason＆GT;
＆LT; ASP：复选框的CssClass =COL2ID =chkReject=服务器＆GT;
＆LT; / ASP：复选框＆GT;
＆LT; ASP：DropDownList的ID =drpPaymentMethod=服务器＆GT;
＆LT; ASP：ListItem的值= - 1＆gt;请选择＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=0＆GT;当月＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=1＆gt;对于结束＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=2＆gt;对于旅游与LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; / DIV＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; HeaderStyle HorizontalAlign =中心/＆GT;
＆LT; / ASP：的TemplateField＆GT;
＆LT; ASP：BoundField的数据字段=IDControlStyle-WIDTH =250像素的HeaderText =IDSORTEX pression =ID/＆GT;
＆LT; ASP：BoundField的数据字段=姓ControlStyle-WIDTH =250像素的HeaderText =姓
SORTEX pression =名字/＆GT;
＆LT; ASP：BoundField的数据字段=姓氏ControlStyle-WIDTH =250像素的HeaderText =姓氏
SORTEX pression =姓氏/＆GT;
＆LT; ASP：的TemplateField＆GT; ＆LT; / ASP：的TemplateField＆GT; ＆LT; /专栏＆GT;
＆LT; / ASP：GridView的＆GT; ＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这是所有做控件如何呈现给浏览器。因此，基于你将需要修改的jQuery元素选择。与案件的 GridView控件正在发生的事情是，而不是 C1All 和 C2All 现在是 gv_C1All 和 gv_C2All 。在复选框而不是替换 C1 与 C2 ，反之亦然的情况下，这时候你就需要更换字批准与拒绝，反之亦然。这里是改性的jQuery。现在，它应该工作。
我建议你去看看在浏览器中的HTML页面，这样你可以计算出控制的呈现方式（你可以美元的InternetExplorer p $ PSS功能键F12查看开发人员工具窗格中，在那里你可以看到HTML树）
$（文件）。就绪（函数（）{
$（'＃gv_C1All'）。点击（函数（）{
$（'。COL1＆GT;输入'）。ATTR（选中，$（'＃gv_C1All'）ATTR（选中））;
$（'。COL2＆GT;输入'）removeAttr（选中）。
$（'＃gv_C2All'）removeAttr（选中）;
}）; $（'＃gv_C2All'）。点击（函数（）{
$（'。COL2＆GT;输入'）。ATTR（选中，$（'＃gv_C2All'）ATTR（选中））;
$（'。COL1＆GT;输入'）removeAttr（选中）。
$（'＃gv_C1All'）removeAttr（选中）;
}）; $（'。COL1'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（输入，这一点）.attr（'身份证'）;
VAR coresId = id.replace（'批准'，'拒绝'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃gv_C1All'）removeAttr（选中）;
$（'＃gv_C2All'）removeAttr（选中）;
}）;
}）; $（'。COL2'）。每个（函数（）{
$（本）。点击（函数（）{
VAR ID = $（输入，这一点）.attr（'身份证'）;
VAR coresId = id.replace（'拒绝'，'批准'）;
$（'＃'+ coresId）.removeAttr（选中）;
$（'＃gv_C1All'）removeAttr（选中）;
$（'＃gv_C2All'）removeAttr（选中）;
}）;
}）;
}）;
edit: What is not working:- i have a two columns (approve all/reject all) how can i restrict the user to allow only one checkbox of each? the below code works if you dont use the gridview....
i have asked this question here (Allow only one (approve/reject) checkbox to be checked ) and its working as expected only if i have asp.net control meaning without using the gridview control and now i'm in a situation where i have to use the gridview control and seems my code does not work... i have maintained the same class names. any help?
here is my .aspx code with gridview:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#C1All').click(function () { debugger
$('.col1 > input').attr("checked", $('#C1All').attr("checked"));
$('.col2 > input').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
$('#C2All').click(function () { debugger
$('.col2 > input').attr("checked", $('#C2All').attr("checked"));
$('.col1 > input').removeAttr("checked");
$('#C1All').removeAttr("checked");
});
$('.col1').each(function () {
$(this).click(function () { debugger
var id = $("input", this).attr('id');
var coresId = id.replace('C1', 'C2');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
$('.col2').each(function () {
$(this).click(function () {debugger
var id = $("input", this).attr('id');
var coresId = id.replace('C2', 'C1');
$('#' + coresId).removeAttr("checked");
$('#C1All').removeAttr("checked");
$('#C2All').removeAttr("checked");
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
OnRowDataBound="gv_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Approve" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px" >
<HeaderTemplate>
Approve<br />
<asp:CheckBox ID="C1All" runat="server" />
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate >
<asp:CheckBox CssClass="col1" ID="chkApprove" runat="server" >
</asp:CheckBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Reject" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="180px">
<HeaderTemplate>
Reject<br />
<asp:CheckBox ID="C2All" runat="server" />
<asp:DropDownList ID="drpPaymentMethod" runat="server">
<asp:ListItem Value="-1">Please select</asp:ListItem>
<asp:ListItem Value="0">Month</asp:ListItem>
<asp:ListItem Value="1">At End</asp:ListItem>
<asp:ListItem Value="2">At Travel</asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<div class="selectReason">
<asp:CheckBox CssClass="col2" ID="chkReject" runat="server" >
</asp:CheckBox>
<asp:DropDownList ID="drpPaymentMethod" runat="server">
<asp:ListItem Value="-1">Please select</asp:ListItem>
<asp:ListItem Value="0">Month</asp:ListItem>
<asp:ListItem Value="1">At End</asp:ListItem>
<asp:ListItem Value="2">At Travel</asp:ListItem>
</asp:DropDownList>
</div>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="ID" ControlStyle-Width="250px" HeaderText="ID" SortExpression="ID" />
<asp:BoundField DataField="FirstName" ControlStyle-Width="250px" HeaderText="FirstName"
SortExpression="FirstName" />
<asp:BoundField DataField="LastName" ControlStyle-Width="250px" HeaderText="LastName"
SortExpression="LastName" />
<asp:TemplateField>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
It is all to do with how controls are rendered to the browser. So based on that you will need to modify the jQuery element selectors. In the case with your GridView what is happening is that instead of C1All and C2All it is now gv_C1All and gv_C2All. In the case of checkboxes, instead of replacing C1 with C2 and vise versa, this time you will need to replace the word Approve with Reject and vise versa. Here is the modified jQuery. Now it should work.
I would suggest you to have a look at the page HTML in the browser so that you can figure out how controls are rendered (you can press function key F12 in InternetExplorer to view the Developer tools pane, where you can see the HTML tree)
$(document).ready(function () {
$('#gv_C1All').click(function () {
$('.col1 > input').attr("checked", $('#gv_C1All').attr("checked"));
$('.col2 > input').removeAttr("checked");
$('#gv_C2All').removeAttr("checked");
});
$('#gv_C2All').click(function () {
$('.col2 > input').attr("checked", $('#gv_C2All').attr("checked"));
$('.col1 > input').removeAttr("checked");
$('#gv_C1All').removeAttr("checked");
});
$('.col1').each(function () {
$(this).click(function () {
var id = $("input", this).attr('id');
var coresId = id.replace('Approve', 'Reject');
$('#' + coresId).removeAttr("checked");
$('#gv_C1All').removeAttr("checked");
$('#gv_C2All').removeAttr("checked");
});
});
$('.col2').each(function () {
$(this).click(function () {
var id = $("input", this).attr('id');
var coresId = id.replace('Reject', 'Approve');
$('#' + coresId).removeAttr("checked");
$('#gv_C1All').removeAttr("checked");
$('#gv_C2All').removeAttr("checked");
});
});
});
这篇关于如何让这个jQuery code可与GridView控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
