CheckBox模版列的使用（转）

 在GridView里使用CheckBox2007年03月30日 星期五 20:02在GridView的第一列使用CheckBox控制每一行数据，是经常使用的，这里面我要记录的是全选、全消、选中行的底色更改，还有就是在提交数据的时候，取选中的行的编号等功能

aspx页面定义：

 

< asp:GridView ID = " GridView1 "  runat = " server " >
          < Columns >
              < asp:TemplateField ShowHeader = " False "  HeaderText = " 选择 " >
                  < ItemStyle Width = " 60px "  Wrap = " False "   />
                  < HeaderTemplate >
                      < asp:CheckBox ID = " CheckBox1 "  runat = " server " ></ asp:CheckBox >
                  </ HeaderTemplate >
                  < ItemTemplate >
                      < asp:CheckBox ID = " CheckBox1 "  runat = " server " ></ asp:CheckBox >
                      < asp:TextBox ID = " TextBox1 "  runat = " server "  Text = ' <%# Eval("EventID") %> '  Visible = " false " ></ asp:TextBox >
                  </ ItemTemplate >
              </ asp:TemplateField >
          </ Columns >
         < HeaderStyle Font - Bold = " False "  BackColor = " #EEEEEE "   />
          < AlternatingRowStyle BackColor = " #EEEEEE "   />
</ asp:GridView >

这样在GridView的第一列，是CheckBox控件，在HeaderTemplate里的是用来控制全选全消的，在TemplateField里的，用来控制当前行是不是选中行

js脚本是这个：

 

< script type = " text/javascript "  language = " javascript " >
function  changecolor(obj,color)
... {
    e = event.srcElement
    if(e.checked==true)
    ...{
      e = e.parentElement
      e.style.background = "#C0C0FF"
     }
     else
     ...{
       e = e.parentElement
       e.style.background = color
      }
}  

function  CheckSelect(del)
... {
     var rt=true;
     var num=0;
     var boxorder=0;
     var objCheckBox;
     for(var i=0;i<aspnetForm.length;i++)
     ...{
         ///alert(aspnetForm.elements[i].type);
         if(aspnetForm.elements[i].type=="checkbox")
         ...{
             boxorder++;
             objCheckBox=aspnetForm.elements[i];
             ///alert(objCheckBox.checked);
             if(objCheckBox.checked)
             ...{
                 if(boxorder>1)
                 ...{
                     //如果是第一个CheckBox，是用来全选全消的，这个不算，不用自加
                     num++;
                 }
             }
         }
     }
     ///alert(num);
     if(!del)
     ...{
         if(num>1)
         ...{
             alert("此操作不允许选择多个事件");
             rt=false;
         }
     }
     if(num==0)
     ...{
         alert("此操作要求先选择一个事件");
         rt=false
     }
     ///alert(rt);
     return rt;
}

function  SelectAll(sa)
... {
     ///全选/全消
     var objCheckBox;
     for(var i=0;i<aspnetForm.length;i++)
     ...{
         if(aspnetForm.elements[i].type=="checkbox")
         ...{
             objCheckBox=aspnetForm.elements[i];
             objCheckBox.checked=sa;
         }
     }
}
</ script >

第一个函数changecolor用来控制被选择的行的颜色突出，第二个函数CheckSelect用来判断现在有几个行被选中，第三个函数SelectAll用来控制全选全消

在cs页面里，为每一行的CheckBox绑定客户端事件：

 

protected   void  GridView1_RowDataBound( object  sender, GridViewRowEventArgs e)
      ... {
         if (e.Row.RowType == DataControlRowType.Header || e.Row.RowType == DataControlRowType.DataRow)
         ...{
             CheckBox mycb = new CheckBox();
             mycb = (CheckBox)e.Row.FindControl("CheckBox1");
             if (mycb != null)
             ...{
                 if (e.Row.RowType == DataControlRowType.DataRow)
                 ...{
                    if (e.Row.RowIndex % 2 == 0)
                     ...{
                         mycb.Attributes.Add("onclick", "changecolor(this.name,'#FFFFFF')");
                     }
                     else
                     ...{
                         mycb.Attributes.Add("onclick", "changecolor(this.name,'#EEEEEE')");
                     }
                 }
                 else if (e.Row.RowType == DataControlRowType.Header)
                 ...{
                     mycb.Attributes.Add("onclick", "SelectAll(this.checked)");
                 }
             }
         }
     }

这里，对不同的DataControlRowType，我绑定了不同的客户端事件，因为定义在HeaderTemplate和ItemTemplate里的CheckBox是要执行不同的客户端事件的

上面的东西都很简单，分清楚客户端和服务器端就可以了，我一开始的时候在服务器端和客户端跳来跳去，自己都乱了，好烦啊

我在这里还要记录这样的情况：

在页面里，有一个自定义用户控件，有一个GridView控件，在自定义用户控件里，有Button用来控制GridView里的记录

我要记录的是，怎么在这个Button里，判断有哪些记录被选中

１、上面的aspx代码里，我加了TextBox，记录编号

２、在自定义用户控件里，用下面的事件，就返回选中行的编号了

 

public   string  GetEid()
      ... {
         //取选中的事件编号
         string streid = "";
         GridView mygv = new GridView();
         mygv = (GridView)Parent.FindControl("GridView1");
         if (mygv != null)
         ...{
             int i, row;
             i = 0;
             row = mygv.Rows.Count;
             CheckBox mycb = new CheckBox();
             for (i = 0; i < row; i++)
             ...{
                 mycb = (CheckBox)mygv.Rows[i].FindControl("CheckBox1");
                 if (mycb != null)
                 ...{
                     if (mycb.Checked)
                     ...{
                         TextBox mytb = new TextBox();
                         mytb = (TextBox)mygv.Rows[i].FindControl("TextBox1");
                         if (mytb != null)
                         ...{
                             streid = streid + mytb.Text.Trim() + ",";
                         }
                     }
                 }
             }
         }
         if (streid.Length > 0)
         ...{
             streid = streid.Remove(streid.Length - 1);
         }
         return streid;
     }

就是Parent和FindControl的使用，用Parent可以引用包含自定义用户控件的页面，对这个页面里的GridView的每一行扫描，就可以取到每一行的CheckBox了

对自定义控件里，如果有的Button需要先选择一个 or 多个记录才允许操作的，可以在自定义控件里给Button加上客户端事件

protected   void  Page_Load( object  sender, EventArgs e)
      ... {
         Button1.Attributes["onclick"] = "return CheckSelect(false);";
         Button4.Attributes["onclick"] = "return CheckSelect(false);";
         Button2.Attributes["onclick"] = "return CheckSelect(true);";
     }

这里我给Button1和Button4加了不允许多个选择的事件，给Button2加了允许多个选择的事件