VPF::JavaScript: работа с CheckBox и RadioButton - Форум программистов

Беспечный

Дата 5.4.2007, 16:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 18.3.2007
Где: Челябинск

Репутация: нет
Всего: нет

С помощью JavaScript нужно сделать следующее:
1. Есть GridView, в нем шаблонный столбец с CheckBox'ами. В Header'е этого столбца тоже находится CheckBox. Нужно по щелчку на CheckBox'e в header'e выделить/снять выделение со всех чекбоксов в GridView.
2. Есть две RadioButton и два соответствующих им контрола. Нужно при щелчке на каком либо из RadioButton залочить "чужой", и разлочить "свой" контрол (Enabled = true/false).

Спасибо.

Это сообщение отредактировал(а) Беспечный - 5.4.2007, 18:35

Mymik

Дата 5.4.2007, 17:13 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78

Беспечный, дай примерную структуру твоего DataGridView (довольно интересно что это за элемент :о) )и я тогда напишу тебе JS который это обойдет все.

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Беспечный

Дата 5.4.2007, 18:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 18.3.2007
Где: Челябинск

Репутация: нет
Всего: нет

Mymik, опечатка, я имел в виду обыкновенный System.Web.UI.WebControls.GridView, и ты ведь наверняка это понял smile

Mymik

Дата 5.4.2007, 19:57 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78

Цитата(Беспечный @ 5.4.2007, 18:34

)

Mymik, опечатка, я имел в виду обыкновенный System.Web.UI.WebControls.GridView, и ты ведь наверняка это понял

Вобщем ты мне так и не дал структуру твоего GridView :о) так что будем действовать на угад :о)
У тебяесть в Header (естественно уже сгенерированный код :о) )

Код


<input type="checkbox" onclick="actionBox(this)" />

и вот тебе функция JS

Код


function actionBox(obj)
{
    /* Определение значения */
    checked = obj.checked;

    /* добираемся до Table (типа до всего элемента GridView) */
    while(obj.parentNode.tagName != "TABLE")
        obj = obj.parentNode;

    /* Получаем коллекцию из ссылок на все Input в этом GridView */
    checkoxCollection = obj.parentNode.getElementsByTagName("INPUT");
    for(i = 0; i < checkoxCollection.length; i++)
        /* проверка на то что это ckeckbox */
        if(checkoxCollection[i].type == "checkbox")
            /* Установка значения */
            checkoxCollection[i].checked = checked;
}

Если не подойдет, то опиши свой GridView... я так, в слепую сейчас написал скрипт :о) вполне вероятно, что можно сделать это гораздо более оптимально :о)

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Беспечный

Дата 5.4.2007, 21:48 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 18.3.2007
Где: Челябинск

Репутация: нет
Всего: нет

Код не работает, видимо не может найти объект по tagName. tagName я так понял это ID элемента, у грида он постоянный, у чекбоксов нет. Вот так это все представлено в html

Код


<table class="bordered" cellspacing="0" cellpadding="5" align="Center" rules="all" border="1" id="ctl00_contentPlaceHolder_grid" style="width:700px;border-collapse:collapse;">

Код


<input id="ctl00_contentPlaceHolder_grid_ctl02_chkBox" type="checkbox" name="ctl00$contentPlaceHolder$grid$ctl02$chkBox" />

Вот мой GridView

Код


    <asp:GridView ID="grid" runat="server" AllowPaging="True" AutoGenerateColumns="False"
        CellPadding="5" Width="700px" HorizontalAlign="Center" OnPageIndexChanging="grid_PageIndexChanging"
        OnRowCommand="grid_RowCommand" PageSize="15" CssClass="bordered">
        <PagerSettings Mode="NumericFirstLast" />
        <Columns>
            <asp:BoundField HeaderText="№" DataField="num">
                <ItemStyle CssClass="bordered" Width="5%" />
                <HeaderStyle CssClass="bordered" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Product name">
                <ItemStyle CssClass="bordered" Width="50%" HorizontalAlign="Left" />
                <HeaderStyle CssClass="bordered" />
                <ItemTemplate>
                    <%# Eval("product_name") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtNewProduct" runat="server" Text='<%# Bind("product_name") %>'></asp:TextBox>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:ButtonField CommandName="Edit" Text="[ add as new ]">
                <ItemStyle Wrap="False" CssClass="bordered" Width="20%" />
                <HeaderStyle CssClass="bordered" />
            </asp:ButtonField>
            <asp:ButtonField CommandName="equal" Text="[ mark equal to ]">
                <ItemStyle Wrap="False" CssClass="bordered" Width="20%" />
                <HeaderStyle CssClass="bordered" />
            </asp:ButtonField>
            <asp:TemplateField HeaderText="Mark">
                <ItemStyle CssClass="bordered" Width="5%" />
                <HeaderStyle CssClass="bordered" />
                <ItemTemplate>
                    <asp:CheckBox ID="chkBox" runat="server" />
                </ItemTemplate>
                <HeaderTemplate>
                    <input id="checkbox" type="checkbox" onclick="actionBox(this)" />
                </HeaderTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

PS
и ещё в догонку вопрос по этому же гриду. Почему то при нажатии на кнопку "[ add as new ]" не происходит переход в режим редактирования. Насколько я понял, вместо текста <%# Eval("product_name") %> должен отобразится текстбокс с кнопкой, но ничего не происходит. DataSource грида я настраиваю на динамическую DataTable и вызываю DataBind() в Page_PreRender.

Это сообщение отредактировал(а) Беспечный - 5.4.2007, 22:06

Mymik

Дата 5.4.2007, 22:00 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78

Цитата(Беспечный @ 5.4.2007, 21:48

)

tagName это я понимаю

что ???

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Беспечный

Дата 6.4.2007, 09:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 18.3.2007
Где: Челябинск

Репутация: нет
Всего: нет

В общем первую задачу решил так:

Код


function actionBox(obj)
{
    checked = obj.checked;
    checkoxCollection = document.getElementsByTagName("input");
    for(i = 0; i < checkoxCollection.length; i++)
        if(checkoxCollection[i].type == "checkbox")
            checkoxCollection[i].checked = checked;
}

Mymik, спасибо!

С EditMode в GridView тоже разобрался, просто обработал событие RowEditing

Код


protected void grid_RowEditing(object sender, GridViewEditEventArgs e)
{
    grid.EditIndex = e.NewEditIndex;
}

Решил вторую задачу так.
Контролы:

Код


    <asp:RadioButton ID="radioDropDown" runat="server" Checked="True" GroupName="Maker" />
    <asp:DropDownList ID="dropMakers" runat="server" DataSourceID="sqldsMakers" DataTextField="maker_name"
                                DataValueField="maker_id" EnableViewState="False">
    </asp:DropDownList>
    <br />
    <asp:RadioButton ID="radioTextBox" runat="server" GroupName="Maker" />
    <asp:TextBox ID="txtNewMaker" runat="server" Enabled="False"></asp:TextBox>

Установка обработчика.

Код


protected void Page_Load(object sender, EventArgs e)
{
    //< some code >
    radioDropDown.Attributes.Add("onClick", "toggleControlsEnabled(this, '" + dropMakers.ClientID + "', '" + txtNewMaker.ClientID + "');");
    radioTextBox.Attributes.Add("onClick", "toggleControlsEnabled(this, '" + dropMakers.ClientID + "', '" + txtNewMaker.ClientID + "');");
}

Собственно скрипт.

Код


    <script language="javascript" type="text/javascript">
    function toggleControlsEnabled(radioBtn, ctrl1Id, ctrl2Id)
    {
        clickedRadio = radioBtn.value;
        if(clickedRadio == "radioDropDown")
        {
            document.getElementById(ctrl1Id).removeAttribute("disabled");
            document.getElementById(ctrl2Id).setAttribute("disabled", "disabled");
        }
        else
        {
            document.getElementById(ctrl1Id).setAttribute("disabled", "disabled");
            document.getElementById(ctrl2Id).removeAttribute("disabled");
        }
    }
    </script>

Тема закрыта.

Это сообщение отредактировал(а) Беспечный - 6.4.2007, 10:05

Mymik

Дата 6.4.2007, 10:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 50
Всего: 78

Беспечный, tagName это стандартное свойство DOM элемента. Оно работает везде. Просто я ухожу слишком высоко вверх и дохожу до самого окна, у которого нет tagName :о). (или куда-то выше :о) )

Вот потому я и просил описать структуру твоего GridView... потому что я не знал где находится твой элемент checkbox :o( Мне с какого-то бодуна причудилось что у GridView есть <HeaderTemplate> и что твой checkbox находится там.

Что касается твое кода.
В 4 строчке JS кода у тебя идет забор ВСЕХ checkbox на странице... а вдруг у тебя есть еще там checkbox'ы где-то :о)...
Потому надо сделать вот так вот -->

Код


checkoxCollection = document.getElementById('<%=grid.ClientID %>').getElementsByTagName("input");

При условии что у тебя эта функция хранится в aspx/ascx файле. Если она хранится в отдельном файле, тогда нудо будет передавать параметр в функцию в виде того же ClientID твоего грида.

Добавлено через 5 минут и 5 секунд
smile

ты так быстро редактируешь посты, что я не успеваю написать ответ.

P.S. че за второй вопрос с теме вот контролами и JS я че-то так и не понял... но вобщем-то это не важно, коль ты разобрался

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Разработка под ASP.NET \| Следующая тема »