在 gridview 控件中使用单选按钮 [英] using radiobuttons in a gridview control

问题描述

我有一个 gridview 控件，其中数据使用存储过程显示.网格有三列，第一列包含单选按钮.总体思路是，用户应该只能从(在我的情况下)5 个单选按钮中选择一个单选按钮.

I have a gridview control in which the data is dispalyed using a stored procedure. the grid has three columns, first one contains radiobuttons. the general idea is that the user should be able to select only one radiobutton from (in my case) 5 radiobuttons.

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

The problem in the present functionality is that i can select all the radiobuttons at the same time. I tried group the radiobuttons using 'groupname' property..it didn't work.

我该如何解决?

这里是gridview控件

Here is the gridview control

<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>

推荐答案

由于 gridview 被渲染为表格元素，在运行时它将为每个单选按钮分配不同的名称"，从而获得 GroupName不行.

Since a gridview is rendered as table element , at run time it will assign different "name" to each radio button giving GroupName won't work.

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

But calling a JavaScript function for validating the radio button to select one radio button at a time instead of giving same GroupName for multiple radio button outside gridview.

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

The javascript function sets the row of the current selected radio button's style to determine that the row is selected and then loops through the radio buttons in the gridview and then de-select the previous selected radio button and set the row style back to its default.

请看下面的代码，

JavaScript 部分，

JavaScript section,

 <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 属性中.因此，只需按照我的代码中提供的方式输入即可.

NOTE: the onclick used here is th html property and will appear within intellisense property of visual studio. So just type this as provided in my code.

我对此进行了测试，并且非常适合我.

I tested this and worked perfectly for me.

希望这对你有用..

这篇关于在 gridview 控件中使用单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！