在DataGrid中选择,确认,删除多行复选框列表

在DataGrid中选择,确认,删除多行复选框列表

  1. If the main "select all" checkbox is checked, it will select all of the DataGrid checkboxes
  2. If the main "select all" checkbox is unchecked, then all of the DataGrid checkboxes get unselected
  3. Finally, if after the main "select all" checkbox is selected and all of the DataGrid's checkboxes are all checked, any one of those checkboxes gets unchecked, then the main checkbox is also unchecked. This way we don't end up having our checkbox's logic behaving inconsistently or erratically.

function select_deselectAll (chkVal, idVal) { var frm = document.forms[0]; // Loop through all elements for (i=0; i<frm.length; i++) { // Look for our Header Template's Checkbox if (idVal.indexOf ('CheckAll') != -1) { // Check if main checkbox is checked, then select or deselect datagrid checkboxes if(chkVal == true) { frm.elements[i].checked = true; } else { frm.elements[i].checked = false; } // Work here with the Item Template's multiple checkboxes } else if (idVal.indexOf ('DeleteThis') != -1) { // Check if any of the checkboxes are not checked, and then uncheck top select all checkbox if(frm.elements[i].checked == false) { frm.elements[1].checked = false; //Uncheck main select all checkbox } } } } Figure 2 shows you the effect of the JavaScript above interacting with the DataGrid when selecting the top main "select all" checkbox. Figure 2 Now, aside from this function allowing a quick full selection, you also have the option of manually selecting as many checkbox items as you wish. Next comes the tricky part in how to determine which ones were selected, and how to confirm this the instant you submit the form, and prior to actual deletion. Confirming Multiple Deletes In this section, we'll examine how to confirm multiple deletes when we submit our form. Below in Figure 3 you can now see the alert confirmation after selecting a couple of items, and then submitting the form by press the "Delete Items" button. The alert takes place at any time you submit the form (as long as you have more than one checkbox selected). Figure 3 Note that this confirmation will alert with all checkboxes selected or a just a few as shown. Pressing the Delete Items button with none selected will not prompt any alert. Here now is how we determine what checkboxes are actually checked. The first thing we did was set up our Delete Button at the end of our DataGrid; just a regular asp server button. We also wired a server-side event to it - Delete Store - that, when confirmed, will delete the records: <asp:Button Text="Delete Items" OnClick="DeleteStore" ID="Confirm" runat="server" /> But how does that pop-up alert confirmation appear? Well, that's the cool thing. We get this by adding the code listed below to our Button server control as soon as the page loads, in our Page_Load method, by locating it using the FindControl method and then adding to the button attributes, like so: WebControl button = (WebControl) Page.FindControl("Confirm"); button.Attributes.Add ("onclick", "return confirmDelete (this.form);"); So, the second the page loads, it attached the Javascript handler to this button, and if you examine the HTML source code, the button afterwords, actually looks like this: <input type="submit" name="Confirm" value="Delete Items" id="Confirm" onclick="return confirmDelete (this.form);" /> Cool huh? Now, the second this button is pressed, is when it can now trigger the client side JavaScript function below: function confirmDelete (frm) { // loop through all elements for (i=0; i<frm.length; i++) { // Look for our checkboxes only if (frm.elements[i].name.indexOf('DeleteThis') !=-1) { // If any are checked then confirm alert, otherwise nothing happens if(frm.elements[i].checked) { return confirm ('Are you sure you want to delete your selection(s)?') } } } } Ok, what happening here? Well, the JS function above is, for all intents and purposes, not that different from the previous JavaScript function - "select_deselectAll." Except, instead of determining if the main "select all" checkbox is checked, it actually checks to see whether if any of the DataGrid row checkboxes are checked. If so, it'll then, and only then, alert you with a confirmation to proceed onto either to delete or cancel. Deleting Data Now recall our asp:button above, and its default JavaScript onclick event handler attached on Page_Load. Aside from this we also notice it has another OnClick event (this one being server based) that gets raised when the button is clicked, rather pressed, that'll allow it to fire the server-side DeleteStore method to delete our data: public void DeleteStore (Object sender, EventArgs e) { string dgIDs = ""; bool BxsChkd = false; foreach (DataGridItem i in MyDataGrid.Items) { CheckBox deleteChkBxItem = (CheckBox) i.FindControl ("DeleteThis"); if (deleteChkBxItem.Checked) { BxsChkd = true; // Concatenate DataGrid item with comma for SQL Delete dgIDs += ((Label) i.FindControl ("StoreID")).Text.ToString() + ","; } } // Set up SQL Delete statement, using LastIndexOf to remove tail comma from string. string deleteSQL = "DELETE from Stores WHERE stor_id IN (" + dgIDs.Substring (0, dgIDs.LastIndexOf (",")) + ")"; if (BxsChkd == true) { // Execute SQL Query only if checkboxes are checked, otherwise error occurs with initial null string try { SqlHelper.ExecuteNonQuery (objConnect, CommandType.Text, deleteSQL); OutputMsg.InnerHtml += "<font size=4><b>Store information has been deleted.</b></font>"; OutputMsg.Style["color"] = "green"; } catch (SqlException err) { OutputMsg.InnerHtml += err.Message.ToString(); //"<font size=4><b>An error occurred and the record could not be deleted</b></font>"; OutputMsg.Style["color"] = "red"; } //Refresh data BindData(); } } Since having wired the two client/server methods together, it's our JavaScript code that actually intercepts this button's call and goes first. If you confirm OK, then will the deleting server-side method execute, otherwise it'll cancel all events after that point and prevent anything from posting back. Looking at the DeleteStore() method, you'll notice that it is actually does a few things. First, it set's up the string variable "dgIDs" that will hold all of our selected DataGrid IDs. Next, it loops through the DataGrid, and gathers all of the selected item ids that are based on the row's TemplateColumn ID, which is why I kept the ID control as a TemplateColumn and the rest BoundColumns as these types of controls do not support the ID property we need for referencing our data. After this, it will, upon verifying checked items, gather all the ids and assign them to our "dgIDs" variable, that'll be used with our SQL "deleteSQL" delete statement. The "deleteSQL" delete statement uses the "WHERE IN" argument to perform the multiple deletes in one shot. Since we need to separate each id with a comma, you'll notice that in the loop I attach a comma after each collected item. This way we'll have all of our items clearly defined in our SQL. One problem however is that since we add on a comma after each collected item, the last one as well will include a tail-end comma and SQL won't like this. For example, once we loop through the DataGrid, gather up all of the selected items, and assign it to our delete string we could end up with something like this: DELETE from Stores WHERE stor_id IN (2,4,6,7,) Notice the last comma; that's a no-no. To quickly and easily remedy this, we must remove the last comma, and we do this by pulling the substring we need from the "dgIDs" string using LastIndexOf (",") effectively removing the last comma, and properly formatting the delete statement for SQL, like so: DELETE from Stores WHERE stor_id IN (2,4,6,7) Finally, DeleteStore proceeds to execute the query against the database. Incidentally, for those wondering why I have a conditional with BxsChkd? Well it's because if I don't initially select any items, I'm returned an error on Page_Load due to our SqlHelper having nothing initialized. Therefore, by do so, our DeleteStore method will remain silent, and happily waiting in the wings until it does get the actual go ahead. So that's the crux of our DataGrid application, and technology behind doing multiple checkbox deletes a la Hotmail and Yahoo style. And on that note, here's all the code. Just have SQL Server ready, DAAB installed, then cut and paste the code below, and have fun. Here's our main page code: <%@ Page Language="C#" Debug="False" Strict="True" Explicit="True" Inherits="MultiDeleteDG.WebForm" Src="mDatagrid.aspx.cs"%> <html> <body> <form runat="server"> <h3>Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid (i.e. HotMail & Yahoo)</h3> <br> <ASP:DataGrid id="MyDataGrid" runat="server" Width="700" BackColor="white" BorderColor="black" CellPadding=3 CellSpacing="0" Font-Size="9pt" AutoGenerateColumns="False" HeaderStyle-BackColor="darkred" HeaderStyle-ForeColor="white" > <Columns> <asp:TemplateColumn> <HeaderTemplate>      <asp:CheckBox ID="CheckAll" OnClick="javascript: return select_deselectAll (this.checked, this.id);" runat="server"/>      <font face="Webdings" color="white" size="4">a</font> </HeaderTemplate> <ItemTemplate>      <asp:CheckBox ID="DeleteThis" OnClick="javascript: return select_deselectAll (this.checked, this.id);" runat="server"/> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn> <HeaderTemplate>ID</HeaderTemplate> <ItemTemplate>      <asp:Label ID="StoreID" Text='<%# DataBinder.Eval (Container.DataItem, "ID") %>' runat="server"/> </ItemTemplate> </asp:TemplateColumn> <asp:BoundColumn HeaderText="Store" Datafield="Store" runat="server"/> <asp:BoundColumn HeaderText="Address" Datafield="Address" runat="server"/> <asp:BoundColumn HeaderText="City" Datafield="City" runat="server"/> <asp:BoundColumn HeaderText="State" Datafield="State" runat="server"/> <asp:BoundColumn HeaderText="Zip" Datafield="Zip" runat="server"/> </Columns> </ASP:DataGrid> <br> <asp:Button Text="Delete Items" OnClick="DeleteStore" ID="Confirm" runat="server" /> <span id="OutputMsg" EnableViewState="false" runat="server"/> </form> </body> And our MultiDeleteDG.WebForm code-behind file - mDatagrid.aspx.cs: using System; using System.Data; using System.Data.SqlClient; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; //Import DAAB dll namespace using Microsoft.ApplicationBlocks.Data; namespace MultiDeleteDG { /// <summary> /// Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid (i.e. HotMail & Yahoo) /// Author: Dimitrios Markatos - dmarko1@aol.com /// Date: 8/2003 /// </summary> public class WebForm : System.Web.UI.Page //Inherit Page Class { protected System.Web.UI.WebControls.DataGrid MyDataGrid; protected System.Web.UI.HtmlControls.HtmlGenericControl OutputMsg; //Span Tag protected SqlConnection objConnect; public void Page_Load (Object Sender, EventArgs E) { //Implement Client Side JavaScript code string jsScript = "<script language=JavaScript> \n" + "<!--\n" + "function confirmDelete (frm) {\n\n" + " // loop through all elements\n" + " for (i=0; i<frm.length; i++) {\n\n" + " // Look for our checkboxes only\n" + " if (frm.elements[i].name.indexOf ('DeleteThis') !=-1) {\n" + " // If any are checked then confirm alert, otherwise nothing happens\n" + " if(frm.elements[i].checked) {\n" + " return confirm ('Are you sure you want to delete your selection(s)?')\n" + " }\n" + " }\n" + " }\n" + "}\n\n\n" + "function select_deselectAll (chkVal, idVal) {\n" + "var frm = document.forms[0];\n" + "// loop through all elements\n" + " for (i=0; i<frm.length; i++) {\n" + " // // Look for our Header Template's Checkbox\n" + " if (idVal.indexOf ('CheckAll') != -1) {\n" + " // Check if main checkbox is checked, then select or deselect datagrid checkboxes \n" + " if(chkVal == true) {\n" + " frm.elements[i].checked = true;\n" + " } else {\n" + " frm.elements[i].checked = false;\n" + " }\n" + " // Work here with the Item Template's multiple checkboxes\n" + " } else if (idVal.indexOf('DeleteThis') != -1) {\n" + " // Check if any of the checkboxes are not checked, and then uncheck top select all checkbox\n" + " if(frm.elements[i].checked == false) {\n" + " frm.elements[1].checked = false; // Check if any of the checkboxes are not checked, and then uncheck top select all checkbox\n" + " }\n" + " }\n" + " }\n" + "}" + "//--> \n" + "</script>"; //Allows our .NET page to add client-side script blocks when page loads, instead of the conventional HTML JS tags. RegisterClientScriptBlock ("clientScript", jsScript); WebControl button = (WebControl) Page.FindControl ("Confirm"); button.Attributes.Add ("onclick", "return confirmDelete (this.form);"); objConnect = new SqlConnection ("server=(local);database=pubs;uid=sa;pwd=;"); if (!IsPostBack) { BindData(); } } public void DeleteStore (Object sender, EventArgs e) { string dgIDs = ""; bool BxsChkd = false; foreach (DataGridItem i in MyDataGrid.Items) { CheckBox deleteChkBxItem = (CheckBox) i.FindControl ("DeleteThis"); if (deleteChkBxItem.Checked) { BxsChkd = true; // Concatenate DataGrid item with comma for SQL Delete dgIDs += ((Label) i.FindControl ("StoreID")).Text.ToString() + ","; } } // Set up SQL Delete statement, using LastIndexOf to remove tail comma from string. string deleteSQL = "DELETE from Stores WHERE stor_id IN (" + dgIDs.Substring (0, dgIDs.LastIndexOf (",")) + ")"; if (BxsChkd == true) { // Execute SQL Query only if checkboxes are checked, otherwise error occurs with initial null string try { SqlHelper.ExecuteNonQuery (objConnect, CommandType.Text, deleteSQL); OutputMsg.InnerHtml += "<font size=4><b>Store information has been deleted.</b></font>"; OutputMsg.Style["color"] = "green"; } catch (SqlException err) { OutputMsg.InnerHtml += err.Message.ToString(); //"<font size=4><b>An error occurred and the record could not be deleted</b></font>"; OutputMsg.Style["color"] = "red"; } //Refresh data BindData(); } } public void BindData() { String sqlQuery = "Select stor_id As Id, stor_name As Store, City, State, Zip from Stores"; MyDataGrid.DataSource = SqlHelper.ExecuteDataset(objConnect, CommandType.Text, sqlQuery); MyDataGrid.DataBind(); objConnect.Close(); objConnect = null; } } //End Class }//End Namespace Conclusion Well, that's it. Pretty awesome, and there was sure a lot to grasp as this certainly was a fairly complex article; but look at what you can do with a DataGrid now? There's nothing preventing you from adding paging to it although you'll have to delete whatever you need per page before paging to the next, or you could also store all your selected values in View State or any of of state methods, then pull them from there at the end. At any rate, .NET clearly demonstrates that its Framework and all included is simply the best once again. Period! Until next time. Happy .NETing 作者Blog:http://blog.csdn.net/hbzxf/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊rocketmq的RequestTask

org/apache/rocketmq/remoting/netty/RequestTask.java

2062
来自专栏Hongten

My Notepad

I have spent near more two weeks to write this Notepad application. At this mome...

1222
来自专栏技术之路

c# 调用win32模拟点击的两种方法

第一种 using System; using System.Collections.Generic; using System.ComponentModel;...

24310
来自专栏技术之路

用 WPF 写的颜色拾取器

之前都是用别人的颜色拾取器,今天自己用WPF写了一个颜色拾取器小程序 拾取鼠标所在位置的颜色,按键盘上的空格键停止取色 程序下载:MyWPFScreenColo...

2827
来自专栏xingoo, 一个梦想做发明家的程序员

使用计时器-方法2

第一种方法 是把WM_TIMER消息发送给正常的窗口过程。 第二种方法 是 自己让 windows把计时器消息发送给程序中的另一个窗口过程 回调函数: VOID...

2219
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(三):基本模块调用

搞定基本的函数之后,开始鼓捣SAS里面的模型。也就是说,要开始写PROC了。说实话,越学SAS,越觉得SAS像Stata...无论是从输出的样式,还是语法。好不...

3325
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1692
来自专栏跟着阿笨一起玩NET

DataTable导入到Excel文件

2051
来自专栏MasiMaro 的技术博文

遍历系统中加载的驱动程序以及通过设备对象指针获取设备对象名称

遍历系统中加载的驱动可以在R3层完成,通过几个未导出的函数:ZwOpenDirectoryObject、ZwQueryDirectoryObject,下面是具体...

1242
来自专栏王磊的博客

C# 控制台应用程序输出颜色字体[更正版]

首先感谢院子里的“yanxinchen”,之前的方法是通过c#调用系统api实现的,相比之下我的有点画蛇添足了,哈哈。 最佳解决方案的代码: static vo...

4068

扫码关注云+社区

领取腾讯云代金券