Multi-select ASP.NET datagrid
By Prashant Nayak (.Net Lover) 译 涟漪勇
- Download source files - 3.72 Kb
- Download demo project - 8.83 Kb
- Download demo project for VS.NET 2003 - 15.8 Kb
简介
ASP.NET datagrid是非常强大和灵活的控件，但是一些特征它并没有提供，像多条记录的选择。 这篇文章显示的功能就是如何容易完成多条记录的选择。
代码的使用
在测试和使用一些有关grid 的javascript编码技巧之后，我得到的解决办法的如下内容。
- 添加选择用的CheckBox在模板列（Template column）(Hotmail/Yahoo 风格)
- 添加CheckBox的客户端事件 onclick() 和 javascript , 高亮显示和标记选择的行.
- 添加服务器端事件 CheckedChanged() 来控制保留住高亮显示的内容. [因为在每次PostBack时DataGrid都会恢复最初的颜色，不会保留我们设置的高亮显示颜色]
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<asp:CheckBox id="chkAll"
onclick="javascript:SelectAllCheckboxes(this);" runat="server"
AutoPostBack="false" ToolTip="Select/Deselect All" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="chkSelect" onclick="javascript:HighlightRow(this);"
runat="server"OnCheckedChanged= "grdEmployees_CheckedChanged"
AutoPostBack="false" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
SelectAllCheckBoxes()
这个方程使用了HotMail的选择风格,通过遍历窗体上的每一个CheckBox ,然后确定选择/不选择CheckBox.
HighlightRow()
为了实现在选择时高亮显示和在为选时不高亮显示.,我写了 HighlightRow() 函数, 当使用<asp:CheckBox>控件时，请注意一件非常重要的东西. 在CHECKBOX周围围绕<SPAN>标签，应此我们必须在javascript 中得到<SPAN>标签的.
//-------------------------------------------------------------
// Select all the checkboxes (Hotmail style)
//-------------------------------------------------------------
function SelectAllCheckboxes(spanChk){
// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox=oItem.item(0)
xState=theBox.checked;
elm=theBox.form.elements;
for(i=0;i<elm.length;i++)
if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)
{
//elm[i].click();
if(elm[i].checked!=xState)
elm[i].click();
//elm[i].checked=xState;
}
}
//-------------------------------------------------------------
//----Select highlish rows when the checkboxes are selected
//
// Note: The colors are hardcoded, however you can use
// RegisterClientScript blocks methods to use Grid's
// ItemTemplates and SelectTemplates colors.
// for ex: grdEmployees.ItemStyle.BackColor OR
// grdEmployees.SelectedItemStyle.BackColor
//-------------------------------------------------------------
function HighlightRow(chkB) {
var oItem = chkB.children;
xState=oItem.item(0).checked;
if(xState)
{chkB.parentElement.parentElement.style.backgroundColor='lightcoral';
// grdEmployees.SelectedItemStyle.BackColor
chkB.parentElement.parentElement.style.color='white';
// grdEmployees.SelectedItemStyle.ForeColor
}else
{chkB.parentElement.parentElement.style.backgroundColor='white';
//grdEmployees.ItemStyle.BackColor
chkB.parentElement.parentElement.style.color='black';
//grdEmployees.ItemStyle.ForeColor
}
}
// -->
这是客户端的事情，一直以来都很好用,既然这么好用，可能有人会问,为什么不用简单明了的HTML 中的checkbox控件呢？答案是ASP.NET 服务器端控件有viewstate属性，应此可以保留住选定的行当提交一个页面的时候.
服务器端
现在，在服务器端，我们要确保高亮的行没有丢失, 因为在每一次 postback, ASP.NET 回送到grid并且丢失高亮显示的行. 下面的方程重新得到高亮的行.
Public Sub grdEmployees_CheckedChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
Dim chkTemp As CheckBox = CType(sender, CheckBox)
Dim dgi As DataGridItem
dgi = CType(chkTemp.Parent.Parent, DataGridItem)
If (chkTemp.Checked) Then
dgi.BackColor = grdEmployees.SelectedItemStyle.BackColor
dgi.ForeColor = grdEmployees.SelectedItemStyle.ForeColor
Else
dgi.BackColor = grdEmployees.ItemStyle.BackColor
dgi.ForeColor = grdEmployees.ItemStyle.ForeColor
End If
End Sub
得到你选择的行
很简单! 遍历DataGridItems collection 取得 checkbox [例如. DemoGridItem.Cells(0).Controls(1)]. 检查 CHECKED 属性.当然你也可以用 DataKeyField 获得你要的东西.
