在GridView的第一列使用CheckBox控制每一行數據,是經常使用的,這裏面我要記錄的是全選、全消、選中行的底色更改,還有就是在提交數據的時候,取選中的行的編號等功能
aspx頁面定義:
<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綁定客戶端事件:
{
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裏,判斷有哪些記錄被選中
1、上面的aspx代碼裏,我加了TextBox,記錄編號
2、在自定義用戶控件裏,用下面的事件,就返回選中行的編號了
{
//取選中的事件編號
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加上客戶端事件
{
Button1.Attributes["onclick"] = "return CheckSelect(false);";
Button4.Attributes["onclick"] = "return CheckSelect(false);";
Button2.Attributes["onclick"] = "return CheckSelect(true);";
}
這裏我給Button1和Button4加了不允許多個選擇的事件,給Button2加了允許多個選擇的事件