DataGrid多条记录选择的实现(ASP.NET)

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 ,然后确定选择/不选择CheckBoxand.

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并且丢失高亮显示的行. 下面的方程重新得到高亮的行.

, _
    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 获得你要的东西