Multi-select ASP.NET datagrid(DataGrid多条记录选择的实现)

 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() 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 获得你要的东西.