今天在做一个为GridView添加Checkboxes的小练习时,想在HeaderTemplate里放置一个checkbox,并且用脚本控制ItemTemplate里的checkbox全选或全不选,主要代码如下:
Code
<script type="text/javascript"> function ChangeCheckBoxState(id, checkState) { var cb = document.getElementById(id); if (cb != null) cb.checked = checkState; } function ChangeAllCheckBoxState(checkState) { if (CheckBoxIDs != null) { for (var i = 0; i < CheckBoxIDs.length; i++) ChangeCheckBoxState(CheckBoxIDs[i], checkState); } } function ChangeHeaderAsNeeded() { if (CheckBoxIDs != null) { for (var i = 1; i < CheckBoxIDs.length; i++) { var cb = document.getElementById(CheckBoxIDs[i]); if (!cb.checked) { ChangeCheckBoxState(CheckBoxIDs[0], false); return; } } ChangeCheckBoxState(CheckBoxIDs[0], true); } } </script><asp:TemplateField> <HeaderTemplate> <asp:CheckBox runat="server" ID="HeaderLevelCheckbox" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="ProductSelector" runat="server" /> </ItemTemplate> </asp:TemplateField>protected void Products_DataBound(object sender, EventArgs e) { GridViewRow row = Products.HeaderRow; CheckBox cbHeader = (CheckBox)row.FindControl("HeaderLevelCheckbox"); cbHeader.Attributes["onclick"] = "ChangeAllCheckBoxState(this.checked);"; List<String> ArrayValues = new List<string>(); ArrayValues.Add(String.Concat("'", cbHeader.ClientID, "'")); foreach (GridViewRow grv in Products.Rows) { CheckBox cb = (CheckBox)grv.FindControl("ProductSelector"); cb.Attributes["onclick"] = "ChangeHeaderAsNeeded();"; ArrayValues.Add(String.Concat("'", cb.ClientID, "'")); } CheckBoxIDsArray.Text = @"<script type=""text/javascript"">" + String.Concat("var CheckBoxIDs = new Array(", String.Join(",", ArrayValues.ToArray()), ");") + "</script>"; }
在查看效果的时候发现了一个非常奇怪的现象:点击ItemTemplate里的一个checkbox时全部的checkbox会同时选中,这明显与实际期望产生了偏差,于是决定通过调试看看为啥出现了这个偏差,查了一下也没有显示处理这块的代码。郁闷了一会后,想到既然全部选中应该是调用了ChangeAllCheckBoxState()这个函数,但何时调用的呢,在脚本处放断点,结果显示运行也正常啊,貌似也没什么问题。于是又很失望,就在要放弃的时候突然发现ChangeAllCheckBoxState(CheckBoxIDs[0], false);这句代码,再一看ChangeAllCheckBoxState()没有两个参数的方法,赶紧把它改回来,再看效果时已经好用了。只是纳闷,调试脚本的时候明明没有合适的方法为什么不报错呢?
个人总结:有时候我们不可过分相信脚本调试器,在遇到异常的时候还是应该仔细分析可能出错的原因。
转载于:https://www.cnblogs.com/Hard/archive/2009/03/18/1415401.html