gridview、datalist、repeater、FormView、DetailsView的区别
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
首先绑定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中使用JavaScript完成CheckBox全选的办法
javascrip实现：若选中TreeView的父节点checkbox，则其子节点全部选中
用javascript实现treeview上的checkbox的新发现
Javascript 实现TreeView CheckBox全选效果
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 同时默认显示编辑前选项
相关推荐
3. 全选功能：为了实现全选功能，我们需要在GridView的列头添加一个复选框，通常设置为HeaderRow的第一列。通过JavaScript或者jQuery实现客户端的全选/反选，或者在服务器端处理SelectedIndexChanged事件来同步全选...
在很多场景下，我们可能需要为GridView添加单选、多选以及全选和取消全选的功能，比如在图片选择器或者列表设置中。下面我们将详细探讨如何实现这些功能。 1. **GridView的基本使用** GridView继承自AbsListView，...
同时，还需要确保全选复选框的状态与GridView中所有行的选中状态保持一致。 在处理多选数据时，通常需要保存用户的选中状态。这可以通过遍历GridView的SelectedRows集合，获取每行的索引，然后在后端存储这些索引。...
在ASPX页面中，还包含了一个JavaScript函数`CheckAll()`，该函数会在全选复选框被点击时调用，用于同步所有行的复选框状态。通过遍历整个文档（document.all）来查找名称以"chkSel"结尾的所有复选框，并设置它们的...
联动复选框（复选框的全选和取消全选）。选中指定的父复选框，则设置其所有子复选框为选中状态；取消选中指定的父复选框，则设置其所有子复选框为取消选中状态。如果某父复选框的所有子复选框为均选中状态，则设置该...
- 添加一个位于表头的全选复选框，设置其`CheckedChanged`事件，当全选复选框状态改变时，遍历GridView的所有行（除了表头行），设置对应复选框的状态。 - 反之，当任一复选框被选中或取消时，也可以更新全选复选...
在实际应用中，我们常常需要在`GridView`中实现“全选”功能，即通过一个全选复选框来控制表格中所有行的复选框的状态。本文将介绍两种在ASP.NET `GridView`中实现全选的方法：一种是服务器端实现方式，另一种是...
3. 处理复选框状态：在其他复选框被选中或取消选中时，需要同步更新全选复选框的状态。这可以在GridView的RowDataBound事件中实现。 ```csharp protected void GridView1_RowDataBound(object sender, ...
首先，需要在 GridView 中添加一个模板字段，并在该字段中添加一个复选框，以便用户选择要删除的记录。接着，需要在 GridView 的绑定数据源时，指定主键字段，以便能够获取记录的主键值。然后，需要在确认对话框中，...
在GridView中，通常有一个全局的复选框用于控制所有分页的全选状态。当这个全局复选框被选中时，我们可以通过遍历所有的行复选框并改变它们的`checked`属性来实现全选。以下是一个简单的示例： ```javascript ...
1. 添加复选框列：首先，我们需要在GridView的第一列添加一个复选框，这可以通过在GridView的列定义中添加TemplateField来完成。在HeaderTemplate中添加一个复选框，用于全选操作。 ```xml <asp:GridView ID=...
实现全选功能的第一步是在GridView的表头添加一个主复选框，当用户点击这个复选框时，所有行的复选框会被选中或取消选中。HTML代码示例如下： ```html <table id="gridView"> <th><input type="checkbox" id=...
2. 创建一个JavaScript函数`toggleSelectAll`，该函数接收点击的全选复选框作为参数。当全选按钮被选中时，遍历GridView的所有行（除了表头行），找到每个行中的复选框并将其选中；反之，如果全选按钮未被选中，则...
当用户勾选这些复选框时，我们可以获取到被选中的行的信息，进而进行进一步的操作，比如批量删除或批量更新等。 #### 三、代码解析 下面我们将通过具体的代码示例来详细分析如何在`GridView`中实现复选框的功能。 ...
本篇知识文档重点介绍如何在Yii2的GridView中实现全选复选框以及如何添加批量删除按钮。这一功能的实现使得开发者能够向用户提供一个简洁的界面，来高效地对多条数据记录进行操作。 首先，要实现全选复选框，需要在...
2. 在GridView或ListView的顶部添加一个复选框，作为全选/全不选的控制开关。 3. 当全选开关被选中时，遍历Adapter的数据集，将每个列表项的选中状态设置为true。 4. 反之，当全选开关取消选中时，将所有列表项的...
全选/反选的实现通常会涉及两个事件处理程序：一个是全选复选框的`.CheckedChanged`事件，另一个是GridView的`RowCheckedChanged`事件。当全选复选框被点击时，我们会遍历GridView的所有行，设置每个行内复选框的`...
反之，如果全选复选框被取消选中，所有行的复选框也将被取消选中。这可以通过遍历所有的行复选框并改变它们的选中状态来实现。 此外，可能还需要处理多选复选框间的互斥关系，比如在一组复选框中只能选择一个。这时...