冯东的博客

每天学一点,不断进取
posts - 76, comments - 269, trackbacks - 7, articles - 4
  博客园 :: 首页 :: 新随笔 ::  :: 订阅 订阅 :: 管理

批量删除记录时如何实现全选【总结】

Posted on 2007-04-26 21:24 冯东 阅读(1146) 评论(2)  编辑 收藏 所属分类: ASP.NET/C#

做大批量的数据删除时,如果有个全选按钮把多个页面上显示的记录全都选中删除那比一条条的删除要人性化得多,接下来说一说如何实现,其实网上一搜有好多文章都是说如何进行批量删除的,大体上可以分为两大类1:利用JS脚本实现全选。2:在服务器端实现全选
首先来说一说如何利用JS实现全选
往页面上拖一个GridView,设置好数据源,并为GridView添加一个模板列,往模板列里添加一个chekcbox,比如下面的代码

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID
="SqlDataSource1">
    
<Columns>
        
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
            ReadOnly
="True" SortExpression="ProductID" />
        
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
        
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
        
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
        
<asp:TemplateField>
            
<ItemTemplate>
                
<asp:CheckBox ID="chk_Del" runat="server" />
            
</ItemTemplate>
        
</asp:TemplateField>
    
</Columns>
</asp:GridView>
接下来往页面上添加一个checkbox控件
<asp:CheckBox ID="chk_JS" runat="server" Text="全选(JS)" onclick="selectAll(this)"/>
并为该控件编写JS脚本如下:
<script type="text/javascript">
    
//根据传入的checkbox的选中状态设置所有checkbox的选中状态
    function selectAll(obj)
    
{
        
var allInput = document.getElementsByTagName("input");
        
//alert(allInput.length);
        var loopTime = allInput.length;
        
for(i = 0;i < loopTime;i++)
        
{
            
//alert(allInput[i].type);
            if(allInput[i].type == "checkbox")
            
{
                allInput[i].checked 
= obj.checked;
            }

        }

    }

</script>
基本效果就有了,接下来我们在点缀一下。在网页中添加一个button
<asp:Button ID="btn_DeleteRecords" runat="server" OnClientClick="return judgeSelect();" Text="删除选中记录" />
添加JS脚本
//判断是否选中记录,用户确认删除
function judgeSelect()
{
    
var result = false;
    
var allInput = document.getElementsByTagName("input");
    
var loopTime = allInput.length;
    
for(i = 0;i < loopTime;i++)
    
{
        
if(allInput[i].checked)
        
{
            result 
= true;
            
break;
        }

    }

    
if(!result)
    
{
        alert(
"请先选则要删除的记录!");
        
return result;
    }

    result 
= confirm("你确认要删除选定的记录吗?");
    
return result;
}

2通过服务器端代码实现全选
向页面同添加一个CheckBox并将AutoPostBack属性设置成true,并为它添加CheckedChanged事件
<asp:CheckBox ID="chk_Server" runat="server" OnCheckedChanged="chk_Server_CheckedChanged" Text="全选(Server)" AutoPostBack="True" />
事件代码如下

int a = this.GridView1.Rows.Count;
for (int i = 0; i < a; i++)
{
    CheckBox chk 
= (CheckBox)this.GridView1.Rows[i].FindControl("chk_Del");
    chk.Checked 
= this.chk_Server.Checked;
}

Feedback

#1楼    回复  引用  查看    

2007-04-28 18:05 by 脚印      
<script type="text/javascript" language="javascript">
function selectAll(ob)
{
var rows =document.all["GridView1"].rows.length;
for( var i=2; i<=rows; i++)
{
var idname = "GridView1__ctl" + i +"_chk_Del";
document.all[idname].checked = ob.checked;
}
}

</script>

这样也是一种做法,不过没有你的优化,
document.all[idname] 这个太消耗资源了,使用的遍历

#2楼 [楼主]   回复  引用  查看    

2007-05-02 10:32 by 冯东      
用DOM客户端负载就比较大,你又进行了遍历所以资源肯定比上边的那段消耗的多,另外我不推荐在代码中出现控件的ID当你把代码放到单独的.js文件里就容易出错,尽量的传递ID,在代码里根据ID获取对象或者直接传递对象。

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接: