利用radio實現Datagrid的單選

2022-02-18 14:53:04 字數 2284 閱讀 2366

在datagrid中,我們可能會需要實現這種功能——列的單選,本身datagrid提供了select命令可以實現這種功能。另為也可以利用html 控制項中的radiobutton來實現這樣的功能,當然這也是我們所習慣的。

好的,現在來實現它。  首先在頁面上加入datagrid控制項。

具體格式如下:

〈asp:datagrid id="datagrid1" style="z-index: 101; left: 8px; position: absolute; top: 8px" runat="server" bordercolor="#cc9966" borderstyle="none" borderwidth="1px" backcolor="white" cellpadding="4" autogeneratecolumns="false" width="176px" height="22px"> 〈selecteditemstyle font-bold="true" forecolor="#663399" backcolor="#ffcc66">〈/selecteditemstyle>

〈itemstyle forecolor="#330099" backcolor="white">〈/itemstyle> 〈headerstyle font-bold="true" forecolor="#ffffcc" backcolor="#990000">〈/headerstyle>

〈footerstyle forecolor="#330099" backcolor="#ffffcc">〈/footerstyle> 〈columns>

〈asp:templatecolumn headertext="select">

〈itemtemplate>

〈asp:label id="label2" runat="server">〈/asp:label>

〈/itemtemplate>

〈/asp:templatecolumn>

〈asp:boundcolumn datafield="a" headertext="last name">〈/asp:boundcolumn> 〈/columns>

〈pagerstyle horizontalalign="center" forecolor="#330099" backcolor="#ffffcc">〈/pagerstyle>

〈/asp:datagrid>

再在頁面上加入乙個label(用於顯示我們在datagrid中單選的項)和乙個button(檢視選中項),如下:

〈asp:label id="label3" style="z-index: 103; left: 222px; position: absolute; top: 35px" runat="server" width="184px">〈/asp:label> 〈asp:button id="button1" style="z-index: 102; left: 218px; position: absolute; top: 70px" runat="server" text="display selected value">〈/asp:button〉

在後台**中:

if e.item.itemtype = listitemtype.alternatingitem or e.item.itemtype = listitemtype.item then

dim lbl as label

lbl  = e.item.findcontrol("label2")

'加入radio

lbl .text = ""

end if

label3.text = request.form("myradiogroup")

dim i as datagriditem

for each i in datagrid1.items

if i.itemtype = listitemtype.alternatingitem or i.itemtype = listitemtype.item then

dim r as label

r = i.findcontrol("label2")

if r.text.indexof(label3.text) > 0 then

r.text = ""

else

r.text = ""

end if

end if

next

好了,這樣就可以實現利用radio實現datagrid的單選的功能了。

如圖:當我們選中其中一項,點選"檢視選中內容"時,如圖:

在vs.net2003、iis5.0測試通過。

利用jquery操作Radio方法小結

在開發中經常會用到radio來實現使用者的選擇效果,我在專案中積累了一些利用jquery來操作radio的方法,在這裡分享一下,供有需要的朋友借鑑。ps 移除diabled屬性 areaselect removeattr disabled 複製 如下 input radio name dialche...

利用JQUERY來操作Radio的方法

在開發中經常會用到radio來實現使用者的選擇效果,我在專案中積累了一些利用jquery來操作radio的方法,在這裡分享一下,供有需要的朋友借鑑。1 改變radio的選擇,觸發一些效果 複製 如下 input radio name dialcheckresult change function 2...

js實現動態改變radio狀態

h5的radio是自帶選中狀態改變的,但是如果自帶的狀態無法滿足自己的需求時,就需要自己去實現。如下 h5部分 class group class active type radio name parent radio value 1 id new data nclick change 最新資料 t...