GridView批量删除、全选 + TreeView+复选框

 

gridView批量删除实现方法

DataGridView的数据绑定

gridview、datalist、repeater、FormView、DetailsView的区别

 

GridView 72般绝技

Javascript 实现TreeView CheckBox全选效果

javascript 方法实现了TreeView的checkbox选中的效果

 

现成控件：ASTreeView

一、

GridView控件允许用户自己编辑模板，这样它就可以象以前混合编程一样任意的添加功能、定义格式等，对于大量记录来说如果一条一条的删除是件累人的工作。对其添加批量删除功能是件很自然的事。在进行工作之前，必须搞明白GridView主键的问题。

        1.GridView主键

           如果将数据源的所有东西都显示在GirdView中，不是件明智的事，最起码主键是应该隐藏的。这样在进行编辑时，也就不需要指定readonly等属 性，显示效果也会更理想（相信很多主键值应该是数字编号）。如果隐藏了主键（编辑列设置Visible=false），我们肯定没有办法获取使用类似于这 样的语句获取主键值GridView1.Rows[i].Cells[0].Text。在DataGrid时代这种方法是主流的。但是在GridView 中这种方法行不同，但是2.X提供了DataKeys和DataKeyNames属性，这比DataGrid更加方便。

          设定一个css样式.hidden{display:none},将其指定给主键的HeaderStyle、FooterStyle及ItemStyle的CssClass属性。那么主键列在运行时就不会被显示。在绑定数据源时需要指定GridView控件的主键：

          GridView1.DataSource = ds.Tables["Categories"];
        GridView1.DataKeyNames = new string[] { "CategoryID" };
          GridView1.DataBind();

          在使用时就很简单了：GridView1.DataKeys[i].Value.ToString()，该语句返回主键值，其中i为当前选中行的行号。现在就可以使用这种方法进行批量删除了。

 

        2.批量删除

          在进行批量删除时，需要一列选择框，让用户进行选择删除的条目。此时只需要在GridView的第一列或组后一列添加一 个<asp:TemplateField >列就可以了。在里面可以编辑模板添加需要的控件。具体的html代码如下所示。

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
              <Columns>
                <asp:TemplateField HeaderText="delete">
                      <ItemTemplate>
                          <asp:CheckBox    ID="del" runat="server" />
                      </ItemTemplate>
                  </asp:TemplateField>
                  <asp:BoundField DataField="CategoryID" HeaderText="编号" >
                    <ItemStyle CssClass="hidden" />
                      <HeaderStyle CssClass="hidden" />
                      <FooterStyle CssClass="hidden" />
                  </asp:BoundField>
                  <asp:BoundField DataField="CategoryName" HeaderText="产品类名" />
                  <asp:BoundField DataField="Description" HeaderText="描述信息" />
              </Columns>
              <HeaderStyle BackColor="#EDF7E7" Font-Bold="True" />
              <RowStyle BackColor="#F9F9F9" />
              <AlternatingRowStyle BackColor="White" />
          </asp:GridView>
          <br />
          <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="删除" />
          <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="全选" />

</div>

        3.删除前确认
         在这里使用Button1按钮进行删除任务，那在进行删除前需要用户进行最后确认，只需要在page_load事件中添加如下一行程序：
        Button1.Attributes.Add("onclick", "return confirm('are you sure?')");

       4.全选记录
          当用户单击Button2时，如果Text是全选，执行选中所有的行，并设定该按钮为取消，此时再次单击Button2，就取消所有选择。代码如下
      protected void Button2_Click(object sender, EventArgs e)
      {
          CheckBox cb;
          if (Button2.Text == "全选")
          {
              for (int i = 0; i < GridView1.Rows.Count; i++)
              {
                cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("del");
                  cb.Checked = true;
              }
              Button2.Text = "取消";
          }
          else
          {
              for (int i = 0; i < GridView1.Rows.Count; i++)
              {
                cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("del");
                  cb.Checked = false;
              }
              Button2.Text = "全选";
          }
      }
      其中del是CheckBox的ID值。

 

        5.全部源码

public partial class delAll : System.Web.UI.Page
{
      protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
          {
              loadGridView();
          }
        Button1.Attributes.Add("onclick", "return confirm('are you sure?')");
      }
      protected void Button1_Click(object sender, EventArgs e)
      {
          string sql = "delete from Categories where";
          string cal = "";
          for (int i = 0; i < GridView1.Rows.Count; i++)
          {
              CheckBox cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("del");
              if (cb.Checked==true)
              {
                  cal += " CategoryID=" + GridView1.DataKeys[i].Value.ToString() + " or";
              }
          }
        if (cal != "")
          {
              sql += cal.Substring(0, cal.Length - 3);
          }
          else
          {
            sql = "";//不删除
          }
        Response.Write(sql);//这里可以自己定义程序，进行删除任务
      }
      private void loadGridView()
      {
          string strconn = "server=localhost\\sqlexpress;database=Northwind;user id=rayshow;password=ray123";
          SqlConnection conn = new SqlConnection(strconn);
          DataSet ds = new DataSet();
          SqlDataAdapter da = new SqlDataAdapter("select * from Categories", conn);
          da.Fill(ds, "Categories");
          GridView1.DataSource = ds.Tables["Categories"];
        GridView1.DataKeyNames = new string[] { "CategoryID" };
          GridView1.DataBind();
      }
      protected void Button2_Click(object sender, EventArgs e)
      {
          CheckBox cb;
        if (Button2.Text == "全选")
          {
              for (int i = 0; i < GridView1.Rows.Count; i++)
              {
                  cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("del");
                  cb.Checked = true;
              }
              Button2.Text = "取消";
        }
          else
          {
              for (int i = 0; i < GridView1.Rows.Count; i++)
              {
                  cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("del");
                  cb.Checked = false;
              }
              Button2.Text = "全选";
        }
      }
}

运行效果图：

 

来源：http://hi.baidu.com/rayshow/item/84cf01d30759501c20e25075

 

 

二、取得GridView某行的DataKey

首先绑定DataKeyNames
GridView.DataKeyNames = new string[] { "字段名称" };
然后取值
string aaa= GridView.DataKeys[e.Row.RowIndex].Value.ToString();

1、在绑定时设置主键：
//设置主键；
        GridView1.DataKeyNames = new string[] { "id" };
        GridView1.DataBind();
2、获取键值：
 GridView1.DataKeys[e.Row.RowIndex].Value.ToString();

按钮事件里添加
string str_dk= GridView1.DataKeys[e.Row.RowIndex].Value.ToString();

如果GridView控件的DataKeyNames属性设置了表的两个字段(SubjectID,Mode)，那么在为GridView绑定数据时对库表的每个记录的指定字段值要作出判断。

后台代码中的e.Row.RowIndex即表示GridView的当前行(对应于库表的当前记录)；

View1.DataKeys[e.Row.RowIndex].Values["Mode"].ToString()则获取当前行指定字段(Mode) 的值。

若前台代码只写：DataKeyNames="SubjectID'(即DataKeyNames属性只填入一个字段名)，则后台只需写成： View1.DataKeys[e.Row.RowIndex].Value.ToString()) 即可。
　　同样的，要动态获取当前行另一个字段的值可以这样写： View.DataKeys[e.Row.RowIndex].Values["SubjectID"].ToString())。

 

3、节点操作：

#region 递归设置父节点的checked属性
        private void SetParentTreeNodeStatus(TreeNode node)
        {
            TreeNode parentNode = node.Parent as TreeNode;
            if (parentNode != null)
            {
                if (node.Checked)
                {
                    parentNode.Checked = true;
                    SetParentTreeNodeStatus(parentNode);
                }
                else //被取消
                {
                    bool flag = false;
                    for (int i = 0; i < parentNode.Nodes.Count; i++)
                    {
                        if (parentNode.Nodes[i].Checked)
                        {
                            flag = true;
                            break;
                        }
                    }

                    if (flag)
                    {
                        parentNode.Checked = true;
                    }
                    else
                    {
                        parentNode.Checked = false;
                        SetParentTreeNodeStatus(parentNode);
                    }
                }
            }
            else //根节点
            {
                if (!node.Checked)
                {
                    UncheckNodeChildren(node); //取消其子项的选中状态
                }

            }
        }
        #endregion

 

.Net树复选框：

<ie:TreeView ID="ResourceTreeView" runat="server" AutoPostBack="true"
                    Width="100%" Height="100%" Style="border: 1px solid #A8CFEB; overflow: scroll;
                    height: 400px;" SystemImagesPath="../../webctrl_client/1_0/TreeImages/" ></ie:TreeView>        

 

treeview.htc：

function doCheckboxClick(el) {
    if (el.checked != event.srcElement.checked) {
        private_setAttribute(el, "checked", event.srcElement.checked);
    } else {
        el.checked = !el.checked;
    }
    var evt = createEventObject();
    evt.treeNodeIndex = getNodeIndex(el);
    g_nodeClicked = el;
    _tvevtCheck.fire(evt);
    setNodeState(el, el.getAttribute("checked"));
} 

// 
function _setChildNode(el, state) {
    var childNodes = el.children;
    if (childNodes.length > 0) {
        for (var i = 0; i <= childNodes.length - 1; i++) {
            if (childNodes[i].getAttribute("checked") != state) {
                if (childNodes[i].getAttribute("checked") != null || state == true) {
                    private_setAttribute(childNodes[i], "checked", state);
                    _saveCheckState(childNodes[i]);
                }
            }
            _setChildNode(childNodes[i], state);
        }
    }
}

function _setParentNode(el) {
    var parentNode = el.parentElement;
    if (parentNode) {
        if (!_checkSiblingdNode(el)) {
            if (parentNode.getAttribute("checked") != el.getAttribute("checked")) {
                private_setAttribute(parentNode, "checked", el.getAttribute("checked"));
                _saveCheckState(parentNode);
                _setParentNode(parentNode, el.getAttribute("checked"));
            }
        }
    }
}

function setNodeState(el, state) {
    _setChildNode(el, state);
    _setParentNode(el);
}

function _saveCheckState(el) {
    if (getNodeIndex(el)) queueEvent('oncheck', getNodeIndex(el));
}

function _checkSiblingdNode(el) {
    var parentNode = el.parentElement;
    for (var i = 0; i <= parentNode.children.length - 1; i++) {
        if (el != parentNode.children[i]) {
            if (private_getAttribute(parentNode.children[i], "checked")) {
                return true;
            }
        }
    }
    return false;
}

 保持TreeView父子节点的CheckBox节点状态一致的一种方法

TreeView父子联动效果保持节点状态一致

 操作TreeView节点CheckBox的小例子

 解决TreeView中使用JavaScript完成CheckBox全选的办法

 javascrip实现：若选中TreeView的父节点checkbox，则其子节点全部选中

 

用javascript实现treeview上的checkbox的新发现

关于修改TreeView.htc的问题

改造 treeview.htc

Javascript 实现TreeView CheckBox全选效果

treeview和webctrl_client目录问题

 

Gridview编辑时显示dropdownlist 同时默认显示编辑前选项

 

<asp:TemplateField HeaderText="允许/禁止" ShowHeader="true" ItemStyle-Width="10%">
    <EditItemTemplate>
	<asp:DropDownList ID="ATTRIBUTE3" runat="server" Width="100%">
	    <asp:ListItem Value="1">允许</asp:ListItem>
	    <asp:ListItem Value="0">禁止</asp:ListItem>
	</asp:DropDownList>
    </EditItemTemplate>                                                    
    <ItemTemplate>
	<%# Eval("ATTRIBUTE3").ToString() == "1" ? "允许" : "禁止"%>	
	// <asp:Label ID="Label1" runat="server"><%# Eval("ATTRIBUTE3").ToString() == "1" ? "允许" : "禁止"%></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

 

<asp:TemplateField HeaderText="允许/禁止" ShowHeader="true" ItemStyle-Width="10%">
	<EditItemTemplate>
		<asp:Label ID="Label2" runat="server" style="display:none;" Text='<%#Eval("ATTRIBUTE3") %>'></asp:Label> 
		<asp:DropDownList ID="ATTRIBUTE3" runat="server" Width="100%">
			<asp:ListItem Value="1">允许</asp:ListItem>
			<asp:ListItem Value="0">禁止</asp:ListItem>
		</asp:DropDownList>
	</EditItemTemplate>                                                    
	<ItemTemplate>                                                        
		<asp:Label ID="Label1" runat="server"><%# Eval("ATTRIBUTE3").ToString() == "1" ? "允许" : "禁止"%></asp:Label>
	</ItemTemplate>
</asp:TemplateField>

 Gridview编辑时显示dropdownlist 同时默认显示编辑前选项

 

ASP.NET2.0下含有DropDownList的GridView编辑、删除的完整例子

gridview赋值

在GridView中加入DropDownList