在 gridview 控件中使用单选按钮

Question

我有一个 gridview 控件，其中数据使用存储过程显示。网格有三列，第一列包含单选按钮。一般的想法是，用户应该只能从（在我的情况下）5 个单选按钮中选择一个单选按钮。

当前功能的问题是我可以同时选择所有单选按钮。我尝试使用 'groupname' 属性对单选按钮进行分组。它没有用。

我该如何解决？

这里是gridview控件

<asp:GridView UseAccessibleHeader="true" ID="GridView1" CssClass="top" EmptyDataText="" HeaderStyle-CssClass="griditem_heading" HeaderStyle-BackColor="" runat="server" AllowSorting="True" AutoGenerateColumns="False" CellPadding="0" Width="100%">
<EmptyDataRowStyle />
<EmptyDataTemplate>
    <table cellspacing="0" cellpadding="0" border="0" id="dgd_Clinic_empty" width="100%">
        <tr>
            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">&nbsp;&nbsp;&nbsp;</span>
            </td>
            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">Clinic Name</span>
            </td>

            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">Open</span>
            </td>
      </tr>
        <tr>
            <td colspan="8" align="Center">
                <span class="Content"><b>No matching records were found.</b></span>
            </td>
        </tr>
    </table>
</EmptyDataTemplate>
<Columns>
    <asp:TemplateField HeaderText="" HeaderStyle-CssClass="griditem_heading" ItemStyle-CssClass="griditem_1"
        HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle" SortExpression=""
        Visible="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
        <asp:Label for="rad1_1" ID="rad1_1" runat="server" Visible="false"> </asp:Label>                
            <asp:RadioButton ID="rdoClinicId" runat="server"  />                                  
         </ItemTemplate>                
    </asp:TemplateField>       
        <asp:TemplateField HeaderText="Clinic Name" HeaderStyle-CssClass="griditem_heading"
        ItemStyle-CssClass="griditem_1" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle"
        SortExpression="clinic_name" Visible="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:Label ID="lbl_Grd_Clinic_Name" runat="Server" Text="" ToolTip="" Width="" Height=""
                Style="" />                 
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Open" HeaderStyle-CssClass="griditem_heading"
        ItemStyle-CssClass="griditem_1" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle"
        SortExpression="Open" Visible="True" ItemStyle-VerticalAlign="Middle"
        ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
              <asp:Label ID="lbl_Grd_Open" runat="Server" Text="" ToolTip="" Width="" Height="" Style="" />                    
        </ItemTemplate>
    </asp:TemplateField>

</Columns>
</asp:GridView>

Answer 1

如前所述，在 GridView 中设置 GroupName 不起作用。为 GridView 生成 HTML 时，所有单选按钮都会根据 GridView 分配不同的名称。这是一个link，可能会对您有所帮助：

他们通过多种方法完全按照您的要求去做。我还尝试将 ClientIDMode 设置为静态思维以保留名称，但这也不起作用。

希望该链接有所帮助。

Answer 2

我有一个关于这个HERE的博客。

最终看起来像：

使它起作用的部分是：

<asp:TemplateField HeaderText="Best">
     <ItemTemplate>
          <input id="RBBest" type="radio" name="RBBest" value="{0}" />
     </ItemTemplate>
     <ItemStyle HorizontalAlign="Center" />
 </asp:TemplateField>

请注意，这是 ItemTemplate 中的 HTML，而不是 ASP.Net 标记。我们得到选定的索引 通过使用：

Request.Form["RBBest"]

所以要在我使用的示例中获取第二列中的文本：

ViewState["selectedBest"] = 
     this.GridView1.Rows[Convert.ToInt32(Request.Form["RBBest"])].Cells[1].Text;

在示例中返回文本“SQL Server”。

Answer 3

由于 gridview 呈现为表格元素，因此在运行时它将为每个单选按钮分配不同的“名称”，因此 GroupName 将不起作用。

但是调用一个 JavaScript 函数来验证单选按钮一次选择一个单选按钮，而不是为 gridview 之外的多个单选按钮提供相同的 GroupName。

javascript函数设置当前选中的单选按钮的行样式判断该行是否被选中然后循环遍历gridview中的单选按钮然后取消选中之前选中的单选按钮并将行样式设置回它的默认值。

请看下面的代码，

JavaScript 部分，

 <script language="javascript" type="text/javascript">
    function CheckOtherIsCheckedByGVID(rb) {
           var isChecked = rb.checked;
           var row = rb.parentNode.parentNode;

           var currentRdbID = rb.id;
           parent = document.getElementById("<%= GridView1.ClientID %>");
           var items = parent.getElementsByTagName('input');

           for (i = 0; i < items.length; i++) {
           if (items[i].id != currentRdbID && items[i].type == "radio") {
           if (items[i].checked) {
                items[i].checked = false;                   
            }
        }
     }
   }
</script>

Aspx 部分，

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
               <ItemTemplate>                          
                    <asp:RadioButton runat="server" ID="RadioButton1" onclick="javascript:CheckOtherIsCheckedByGVID(this);">
                    </asp:RadioButton>
               </ItemTemplate>
            </asp:TemplateField>                
        </Columns>
    </asp:GridView>

注意：此处使用的 onclick 是 html 属性，将出现在 Visual Studio 的 intellisense 属性中。因此，只需按照我的代码中提供的方式输入即可。

我对此进行了测试，对我来说效果很好。

希望这对你有用..

Answer 4

Harun 的回答非常好：把其他的打勾就好了。

我使用 Class 和 JQuery 来实现：

function removeotherrb(rb) {
        var items = $('.QaWs2');
        for (i = 0; i < items.length; i++) {
            var c1 = items[i].firstChild; 

           c1.checked = false;
       }
       rb.checked = true;            
   }

请注意，我首先检查了所有内容，然后将选定的内容重新打开。 请注意，当设置 cssclass 时，会创建具有此类的跨度，因此您必须以第一个孩子为目标； HTML 呈现如下：

<span class="QaWs2">
<input id="ctl00_PageSectionPH_GVCol_ctl04_RB2" type="radio"     onclick="removeotherrb(this);" value="RB2" name="ctl00$PageSectionPH$GVCol$ctl04$Y"><input>
</span>