(转帖)在模版列中使用RadioButton实现DataGrid单选列

这个帖子还不错，转来学习下
服务器端的方法

1、利用 DataGrid的属性编辑器给 控件添加一个 模版列 。



2、右键单击 DataGrid，选择编辑模版，进入模版编辑模式



3、添加一个RadioButton 控件在ItemTemplate中后退出。



4、进入Html模式手动编辑aspx页面代码，为添加进来的RadioButton控件添加服务端事件。
<ItemTemplate>
<asp:RadioButton id=\"RadioButton\" runat=\"server\" OnCheckedChanged=\"RadioButtons_CheckedChanged\" AutoPostBack=\"True\"></asp:RadioButton>
</ItemTemplate>

AutoPostBack设置为\"True\"，控件为服务器控件，才能响应事件。
5.    在*.aspx.cs代码文件中添加模版列中RadioButton控件事件响应函数。

//声明为protected
protected void RadioButtons_CheckedChanged(object sender, System.EventArgs e)
{
                //Sender就是单击了的那个RadioButton控件。
RadioButton   rbselected = (RadioButton)sender;
TableCell cell = (TableCell)rbselected.Parent ;
              //通过parent确定单击的RadioButton是属于DataGrid控件哪一个Item（行）的。
DataGridItem item = (DataGridItem)cell.Parent;   
  
             if( rbselected.Checked ==true)
   {
   
                          // 给Delete按钮添加上删除确认提示
    btnDelete.Attributes.Add(\"onclick\",\"return confirm ( \'Are you sure to delete the selected item? \')\" );
    btnModify.Attributes.Remove(\"onclick\");
    //btnDelete.Attributes.Remove(\"disabled\");
    //btnModify.Attributes.Remove(\"disabled\");
                           
     DataGrid_Selected_Item_Index=item.ItemIndex;
                              //选中DataGrid控件和选中的RadioButton对应的一行。
                 dgSkills.SelectedIndex =DataGrid_Selected_Item_Index ;//
                             
                              // 遍历DataGrid控件的所有子项，确保只有一个RadioButton被选中。
                             //因为 这些模版列中的RadioButton控件即使你指定了他的Group name属性
                                //最后生成的客户端代码中name属性也不一样（Groupname + 列的标志），
                               //所以不能确保这么多个RadioButton只有一个被选中。
     foreach(DataGridItem a in dgSkills.Items)
                             {
                               //可以这样访问DataGrid控件中模版列的控件，“RadioButton”是html代码中的ID属性
      RadioButton preSelected=(RadioButton)a.Cells [0].FindControl (\"RadioButton\");
       if ( preSelected.Checked==true && a.ItemIndex != item.ItemIndex )
      {
       preSelected.Checked=false;
      }
      }
}
}


6、最后就实现通过RadioButton单选DataGrid列，运行效果如图。



二。基于客户端的方法
    不过后来同事建议我改成客户端的，因为客户端的选择的时候不用刷新页面。

以下就是实现：


============
服务器端代码


////控件的定义
protected System.Web.UI.WebControls.DataGrid dgSkills;   // 一个.DataGrid控件
protected System.Web.UI.WebControls.ImageButton btnAdd;
protected System.Web.UI.WebControls.ImageButton btnModify;
protected System.Web.UI.WebControls.ImageButton btnDelete;
protected System.Web.UI.WebControls.ImageButton btnFinished;
protected System.Web.UI.HtmlControls.HtmlInputHidden RadioSelected;     //声明一个隐藏的input输入控件，用于客户端和服务器端的交互，客户端选择的时候，用javascript把这个控件的value改为选中的radiobutton控件的id，也就是选中的列数，在因为 RadioSelected是个服务器控件，所以在服务器端就可以得到这个控件的value了，也就知道客户端选中了哪一列。




绑定的DataGrid数据的时候，给第一列的label控件模板列 指定客户端代码。
Label模板列的作用很重要啊，给label的text属性赋值，他就会显示成客户端代码了。
可以看到是添加了一个<input type=“radio” >客户端控件，注意的是所有列的这些
imput控件的name属性都要相同（这里是DataGridRadioButton）才能在客户端做到单选。
下面的a.Attributes.Add(\"onClick\" 那句是在服务器端设置 这个DataGridItem的客户端属性。
这样只要你单击了这一列的任何地方，都回调用客户端的RadioOnClick函数完成选中这一列操作。

foreach(DataGridItem a in dgSkills.Items)
      {
       Label   radiobtn=(Label)a.Cells [0].FindControl (\"RadioButton\");
      
                                 radiobtn.Text = \"<input type=\\\"radio\\\" id =\\\"RadioButton\" + a.ItemIndex.ToString ()
         +\"\\\"   name=\\\"DataGridRadioButton\\\" onClick=\\\"RadioOnClick( this ,\" + a.ItemIndex.ToString ()
         + \")\\\">\";
      
       a.Attributes.Add(\"onClick\",
                           \"RadioOnClick(\"
                            + \"document.getElementById(\\\"RadioButton\" + a.ItemIndex.ToString () +\"\\\"),\"
                            +a.ItemIndex.ToString ()
                             +\")\"
                    );
                                //   a.Style.Add(\"cursor\",\"hand\");
   
      }
     
                          RadioSelected.Value =\"None\";        //一个
              }



//服务器端的删除按钮代码节选

private void btnDelete_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
          if ( RadioSelected.Value ==\"None\")   //no item to delete. 可一访问RadioSelected的value属性看客户端选中了哪一列没有。
            {
   DataGridBind ();                  

   return;
          }

           //其他代码
}


==============
aspx文件中的客户端代码


<script language=\"javascript\">
   function CheckSelected( mode)
   {
     
      if(document.getElementById(\"RadioSelected\").value !=\"None\")
      {
     if(mode == 1)
             return confirm(\"Are you sure you want to delete the selected experience ?\")
     if(mode == 0)
               return true;
          }
     alert(\"You MUST choose one experience !\");  
     return false;
     }  
           function RadioOnClick(selectedradio,index)
           {
    selectedradio.checked=true;
    document.getElementById(\"RadioSelected\").value = index;
                                               HighlightSelectedRow(index);
           }
             function HighlightSelectedRow(selectedindex)
              {
                  var datagrid=document.getElementById(\"dgSkills\");
                  var rows =datagrid.getElementsByTagName(\"TR\");
                //   alert(rows.length);   
                  for (var i = 1;i < rows.length; i++)     //row[0] is
                  {  
                     if (i==selectedindex+1)
                     {
                     rows.style.backgroundColor = \"#ffffff\";
                     }
                     else
                     {
                      rows.style.backgroundColor = \"#D3D3D3\";
                     }
                  }
              }
</script>



相关的页面代码
<td><asp:datagrid id=\"dgSkills\" runat=\"server\" Height=\"0px\" AutoGenerateColumns=\"False\" Width=\"90%\">
<SelectedItemStyle BackColor=\"White\"></SelectedItemStyle>
        <ItemStyle Font-Bold=\"True\" CssClass=\"DataGridItem\"></ItemStyle>
            <HeaderStyle CssClass=\"DataGridCaption\"></HeaderStyle>
   <Columns>
           <asp:TemplateColumn>
    <HeaderTemplate>
      <FONT face=\"宋体\"></FONT>
    </HeaderTemplate>
    <ItemTemplate>
    <FONT face=\"宋体\">
    <aspabel id=\"RadioButton\" runat=\"server\">Label</aspabel></FONT>
    </ItemTemplate>
    <EditItemTemplate>
    <FONT face=\"宋体\"></FONT>
    </EditItemTemplate>
    </asp:TemplateColumn>



<TD><asp:imagebutton id=\"btnAdd\" runat=\"server\" ImageUrl=\"../../Images/Buttons/Add.jpg\"></asp:imagebutton><asp:imagebutton id=\"btnModify\" runat=\"server\" ImageUrl=\"../../Images/Buttons/Modify.jpg\" ForeColor=\"White\"></asp:imagebutton><asp:imagebutton id=\"btnDelete\" runat=\"server\" ImageUrl=\"../../Images/Buttons/Delete.jpg\"></asp:imagebutton><asp:imagebutton id=\"btnFinished\" runat=\"server\" ImageUrl=\"../../Images/Buttons/Finished.jpg\"></asp:imagebutton></TD>
</TR>
</table>
   <INPUT id=\"RadioSelected\" style=\"Z-INDEX: 102; LEFT: 160px; WIDTH: 256px; POSITION: absolute; TOP: 368px; HEIGHT: 32px\"
   type=\"hidden\" size=\"37\" value=\"Indicate the selected DataGrid Item\" name=\"Text1\" runat=\"server\">