GridView数据控件中实现单选功能

GridView数据控件，在页面加载时，会呈现N条记录。
用户想从呈现的记录，选择其中1条。
点选GridView控件首列的radio,然后点GridView控件外的button得到数据行的数据。

GridView控制与Button如下排版，

 <asp:GridView ID="GridViewMeasuringToolData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID"
     OnRowDataBound="GridViewMeasuringToolData_RowDataBound">
     <Columns>
         <asp:TemplateField>
             <HeaderStyle />
             <ItemStyle />
             <HeaderTemplate>
             </HeaderTemplate>
             <ItemTemplate>
                 <input type="radio" name="MySelectRecordData"
                     data-nbr='<%# Eval("ID") %>'
                     data-metric='<%# Eval("Metric") %>'
                    onclick="selectRowData(this);" 
                     />
             </ItemTemplate>
         </asp:TemplateField>
         <%--其它列--%>
     </Columns>
 </asp:GridView>

 <div style="margin-top: 3px;">
     <button type="button" id="selectforhave" runat="server" onclick="selectGridViewValue();">选择</button>
 </div>

注意一点，此radio只能使用html的标签，不能用asp:RadioButton。
为什么？因为服务控件不能生成统name。服务器控件asp:RadioButton有一个GroupName属性，实际运行起来，也起不了生成统一name来达成单选功能。

本例中，想获取数据行的数据是主键ID和metric字段值。使用data-xxx作为radio标签属性。

data-nbr='<%# Eval("ID") %>' data-metric='<%# Eval("Metric") %>'

 

 

用户点击radio时，会执行onclick事件selectRowData：

<script type="text/javascript">  
 var nbr, metric;
 // 点击 Radio 时保存选中的值到全局变量
 function selectRowData(radio) {
     nbr = radio.getAttribute("data-nbr");
     metric = radio.getAttribute("data-metric");
 }
</script>

 

 

另一个Button的click事件selectGridViewValue，

<script type="text/javascript"> 
 function selectGridViewValue() {
     var radios = document.getElementsByName("MySelectRecordData");
     var selectedRadio = null;
     for (var i = 0; i < radios.length; i++) {
         if (radios[i].checked) {
             selectedRadio = radios[i];
             break;
         }
     }
     if (selectedRadio) {
         var nbr = selectedRadio.getAttribute("data-nbr");
         var metric = selectedRadio.getAttribute("data-metric");

        // 获取数据，在此处理相关功能...     
        
     } else {
         alert("请选择一条记录！");
     }
 }

 </script>