在GridView裏使用CheckBox

在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加了允許多個選擇的事件