2012-05-08 1 views
1

У меня есть GridView со столбцом АСП кнопок, которые я переключать текст, используя JavaScript в follws:Как установить флажок gridview для проверки, когда я нажимаю кнопку asp: в той же строке?

function btnBuyToggle(objRef) 
{ 
    var row = objRef.parentNode.parentNode; 
    var rowIndex = row.rowIndex; 
    if (objRef.value == "ADD") 
    { 
     objRef.value = "REMOVE"; 
     $("#" + objRef.id).parent().parent().css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61"); 
    } 
    else 
    { 
     objRef.value = "ADD"; 
    } 
} 

Теперь я добавил еще один GridView столбец скрытых флажков, которые я хочу использовать для прохождения переключены экземпляров кнопки вернуться к коду позади другого события нажатия кнопки. Итак, что мне нужно сделать, это изменить приведенный выше сценарий (JQuery в порядке), чтобы установить флажок в той же строке, которая переключается (проверяется на наличие текстовых значений кнопки ADD, и не отмечена для текстовых значений кнопки «СНЯТИЕ».

мои GridView поля:

<asp:TemplateField HeaderText="Prior <br /> Downld" HeaderStyle-ForeColor="White" > 
    <ItemTemplate > 
     <asp:Button id="btnBuy" runat="server" OnClientClick="btnBuyToggle(this); return false;" 
      Text="ADD" CssClass="buyButton" Visible="true" /> 
    </ItemTemplate> 
    <HeaderStyle Width="7%" /> 
    <ItemStyle CssClass="sessionOrderDownloadItems" VerticalAlign="Middle" HorizontalAlign="Center" /> 
</asp:TemplateField> 
<asp:TemplateField HeaderStyle-Width="0px" > 
    <ItemTemplate> 
     <asp:CheckBox Visible="False" Enabled="false" ID="buyCheckBoxHidden" runat="server" 
      Checked='<%# Eval("SORD_SelectedForPurchaseFlag") %>' /> 
    </ItemTemplate> 
    <HeaderStyle Width="0px" /> 
</asp:TemplateField> 

Спасибо, Jim

Вот моя попытка фиксированного сценария:

 function btnBuyToggle(objRef) 
      { 
      var $btn = $("#" + objRef.id); 

      if (objRef.value == "ADD") 
      { 
       objRef.value = "REMOVE"; 
       $btn.closest('.myClass').prop("checked", true); 
       $btn.parent().parent().css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61"); 
      } else { 
       objRef.value = "ADD"; 
       $btn.closest('.myClass').prop("checked", false); 
       $btn.parent().parent().css("background-color", "#FFFFFF").css("color", "#191970").css("font-style", "normal"); 
      } 
     } 

И мой модифицированный checkbo х разметка:

<asp:TemplateField HeaderStyle-Width="0px" > 
    <ItemTemplate> 
    <asp:CheckBox style="display:block;" ID="buyCheckBoxHidden" runat="server" CssClass="myClass" Checked="false" /> 
    </ItemTemplate> 
    <HeaderStyle Width="0px" /> 
</asp:TemplateField> 

Спасибо, Jim

+0

Кстати, поскольку вы новичок в StackOverflow, вы можете взглянуть на эти ссылки: http://stackoverflow.com/faq и http://stackoverflow.com/privileges –

ответ

0

Ваш первый вопрос в том, что у вас есть флажок установлен как visible="false". Когда вы это сделаете, флажок не будет отображаться в javascript. Вам необходимо изменить его на display:none. Во-вторых, вы можете использовать метод jquery closest() для доступа к ближайшему флажку. Чтобы это стало проще, вы, вероятно, должны добавить класс в свой чекбокс. После того, как вы установили этот флажок, вы можете использовать метод jquery prop(), чтобы установить свойство checked в true или false.

HTML:

<asp:CheckBox runat="server" ID="buyCheckBoxHidden" Checked='<%# Eval("SORD_SelectedForPurchaseFlag") %>' style="display:none;" CssClass="class" /> 

Javascript:

function btnBuyToggle(objRef) 
{ 
    var $row = $(objRef).closest('tr'); 

    if (objRef.value == "ADD") 
    { 
     objRef.value = "REMOVE"; 
     $row.find('.myClass').prop("checked", true); 
     // OR $row.find('input[type=checkbox]').prop("checked", true); 
     $row.css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61"); 
    } else { 
     objRef.value = "ADD"; 
     $row.find('.myClass').prop("checked", false); 
     // OR $row.find('input[type=checkbox]').prop("checked", false); 
     $row.css("background-color", "#FFFFFF").css("color", "#191970").css("font-style", "normal"); 
    } 
}​ 

Вот пример jsfiddle.

Edit:

Кстати JQuery prop() рекомендуемый способ изменения значений свойств для Jquery версии 1.6 и более поздних версий. Если вы используете более раннюю версию jquery, вам нужно будет использовать метод attr().

Edit:

Так как кажется, что элементы управления ASP.Net удаляете классы. Элементы управления FYI, ASP.Net имеют предустановленные скины, которые можно найти в папке App_Themes и тему, которую вы используете. В пределах конкретной темы обычно есть файл Default.skin, который указывает, какие классы находятся на ваших элементах управления по умолчанию. ASP.Net может удалять ваш класс, когда он создает флажок. Вы должны искать класс, добавленный ASP.net, если вам не нужен собственный класс.

+0

Да, флажок находится внутри INPUT, который находится внутри SPAN, который находится внутри последнего TD строки.Здесь есть myClass. Класс myclass находится в SPAN, а не в INPUT. –

+0

Это работает как шарм! Огромное спасибо. И вы дали мне много знаний о том, как отлаживать эти типы вещей. Jim –

+0

Добро пожаловать! Рад помочь! –