ASP.NET数据列表“全选”，批量处理的JS实现

 

jquery1.3.2中的方法为：

     // 全部选中全部取消处理
      function  CheckTrue(obj)
     {
      $( " input[@type=checkbox][name=checkItem] " ).attr( " checked " ,$(obj).attr( " checked " ));
     }
     
      // 收集被选中的项
      function  CollectCheckItems()
     {
        var  allcheckboxs = $( " input[@type=checkbox][name=checkItem][checked] " );
        var  ids = new  StringBuilder();
        for ( var  i = 0 ;i < allcheckboxs.length;i ++ )
       {
                 var  id = $(allcheckboxs[i]).attr( " id " ).split( " _ " )[ 1 ];
                ids.Append(id)
                ids.Append( " , " );
       }
          var  strIds = ids.ToString();
          return  strIds.substr( 0 ,strIds.length - 1 );
     }

关于StringBuilder 见本文最后部分。

全选框的HTML:

< input  type ="checkbox"  id ='checkAll'  name ='checkAll'  onclick ='CheckTrue(this)'  /> 全选

单行数据中的选择框的HTML：

< input  type ="checkbox"  id ="checkItem_<%=item.productid%>"  name ='checkItem'  />

该方法的特点是生成的列表HTML中，选择框的id值都为"checkItem_"+id，name为"checkItem"。

以上脚本的方法就是通过选择框的id获得数据列表中该行数据的ID。

jquery1.2.6中的方法为：

      // 全部选中全部取消处理
      function  CheckTrue(obj)
     {
      $( " input[@type=checkbox][@name=checkItem] " ).attr( " checked " ,$(obj).attr( " checked " ));
     }
      // 收集被选中的项
      function  CollectCheckItems()
     {
        var  allcheckboxs = $( " input[@type=checkbox][@name=checkItem][checked] " );
        var  ids = new  StringBuilder();
        for ( var  i = 0 ;i < allcheckboxs.length;i ++ )
       {
                 var  id = $(allcheckboxs[i]).attr( " id " ).split( " _ " )[ 1 ];
                ids.Append(id)
                ids.Append( " , " );
       }
          var  strIds = ids.ToString();
          return  strIds.substr( 0 ,strIds.length - 1 );
     }

在Jquery1.3.2版使用该方法会报错： “Microsoft JScript 运行时错误: 例外被抛出且未被接住”，

定位到 “ throw "Syntax error, unrecognized expression: " + expr;”代码

原因： Jquery1.3.2版，“name”属性前不用加“@”符号。 例如：

$("input[@type=radio][name=checkItem][checked]")

 

批量删除的方法：

      // 删除选中俱乐部信息
      function  DeleteCompanyInfos()
     {
         if ( ! window.confirm( " 确定要删除您选择的数据项吗? " ))
        {
           return ;
        }
         var  checkedItems = CollectCheckItems();
         if (checkedItems == "" )
        {
            alert( " 请选择要删除的客户! " );
             return ;
        }
        $( " #divGridView " ).html( " <ul> <li> 正在尝试删除数据</li> </ul> " );
        $.ajax(
         {
            type: ' POST ' ,
            url: ' ManageAbout.aspx ' ,
            dataType: ' text ' ,
            data:{Action: ' delete ' ,CompanyInfoIDs:checkedItems},
            cache: false ,
            success:DeleteCompanyInfosCallBack   
         }
         );
     }
      // 删除选中俱乐部信息回调函数
      function  DeleteCompanyInfosCallBack(r)
     {
         if (r == " 0 " )
        {
            alert( " 删除成功! " );
        }
         else
        {
            alert( " 删除失败! " );
        }
        LoadCompanyInfoList();
     }

 

ManageAbout.aspx页面的Page_Load中是这样接收参数进行批量删除的。

             // 删除数据
             if  (action  ==   " delete " )
            {
                 string  strId  =  Request[ " CompanyInfoIDs " ];
                 if  (strId  !=   null )
                {
                     if  (DeleteCompanyInfo(strId))
                    {
                        returnValue  =   " 0 " ;
                    }
                     else
                    {
                        returnValue  =   " 1 " ;
                    }
                }
                 else
                {
                    returnValue  =   " 1 " ;
                }
                 // 向客户端发送数据
                Response.Clear();
                Response.Expires  =   0 ;
                Response.ContentType  =   " application/xml " ;
                Response.Write(returnValue);
                Response.End();
            }

其中DeleteCompanyInfo为ManageAbout.aspx.cs中的一个方法，调用的是BLL中的数据处理方法。

这种批量处理的方法在ASP.NET MVC中则只需将id字符串传给一个带接收id字符串参数（string类型）的Action既可，Action中则根据获得的id调用数据处理层的删除方法。

上文JS中的StringBuilder方法，是引用的一个JS文件中的方法，代码如下：

//  用来连接字符串，提高字符串的拼接速度
function  StringBuilder() 
{
     this .buffer  =   new  Array();
}
StringBuilder.prototype.Append  =   function  Append(string) 
{
     if  ((string  == null )  ||  ( typeof (string) == ' undefined ' ))
         return ;
     if  (( typeof (string) == ' string ' )  &&  (string.length  ==   0 ))
         return ;
     this .buffer.push(string);
};
StringBuilder.prototype.AppendLine  =   function  AppendLine(string) 
{
     this .Append(string);
     this .buffer.push( " \r\n " );
};
StringBuilder.prototype.Clear  =   function  Clear() 
{
     if  ( this .buffer.length  > 0  ){
         this .buffer.splice( 0 , this .buffer.length);
    }
};
StringBuilder.prototype.IsEmpty  =   function  IsEmpty() 
{
//     return (this.buffer.length == 0);
};
StringBuilder.prototype.ToString  =   function  ToString() 
{
     return   this .buffer.join( "" );
};
// 处理日期字符串
function  FormatDateType(date)
{
     if (date)
    {
         return  date.getFullYear() + " - " + (date.getMonth() + 1 ) + " - " + date.getDate();
    }
     else
    {
         return   "" ;
    }   
}

 

之前1.3.2版本的JS中，$("input[@type=radio][name=checkItem][checked]")写成$("input[type=radio][name=checkItem][checked]")了，导致在火狐中无效。

因为type前没加“@”，现已更正。 

转载于:https://www.cnblogs.com/xuezhizhang/archive/2009/10/28/1591639.html