0

次のように、グリッド ビュー内にラジオ ボタン リストがあります。

<asp:GridView ID="gvLineItems" runat="server">
<asp:TemplateField>
      <asp:RadioButtonList ToolTip="Please provide an answer to the method." AutoPostBack="true" RepeatDirection="Horizontal" ID="rbAnswer" runat="server" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.AnswerID")%>' OnSelectedIndexChanged="rbAnswer_SelectedIndexChanged">
                                    <asp:ListItem Text="Yes" Value="Yes" style="color:green;"></asp:ListItem>
                                    <asp:ListItem Text="No" Value="No" style="color:red;"></asp:ListItem>
                                    <asp:ListItem Text="N/A" Value="N/A" style="color:gray;"></asp:ListItem>
                                    <asp:ListItem Value="" Text="" style="display: none" />
                                </asp:RadioButtonList>
</asp:TemplateField>
</asp:GridView>

現在、ラジオボタンの選択を変更するとrbAnswer_SelectedIndexChanged()、コードビハインドで呼び出されます...

この背後にあるコード (そして私はそれを短くします) は、次のような効果があります。

 protected void rbAnswer_SelectedIndexChanged(object sender, EventArgs e)
        {
           GridViewRow gr = (GridViewRow)((DataControlFieldCell)((RadioButtonList)sender).Parent).Parent;
            RadioButtonList rbl = (RadioButtonList)gr.FindControl("rbAnswer");

            //since the answer changed set some hidden fields as being changed...
            HtmlInputHidden hiddenFieldAnswered = (HtmlInputHidden)gr.FindControl("hdnAnswered");
            hiddenFieldAnswered.Value = "1";
            HtmlInputHidden hiddenField = (HtmlInputHidden)gr.FindControl("hdnIsChanged");
            hiddenField.Value = "1";

            Panel p;
            p = (Panel)gr.FindControl("pnlAnswer");

            switch (rbl.SelectedItem.Text)
            {
                case "No":
                    gr.Cells[0].BackColor = System.Drawing.Color.Red;
                    p.Visible = true;
                    break;
                case "Yes":
                    gr.Cells[0].BackColor = System.Drawing.Color.Green;
                    p.Visible = false;
                    break;
                case "N/A":
                    gr.Cells[0].BackColor = System.Drawing.Color.Gray;
                    p.Visible = false;
                    break;
                default:
                    gr.Cells[0].BackColor = System.Drawing.Color.Transparent;
                    p.Visible = false;
                    break;
            }
        }

基本的に、回答を選択すると、グリッドビューのセルの色が変わり、パネルが非表示または非表示になります。これをバックエンド コードとして実行すると、アプリケーションで大きな遅延が発生します。jqueryでこれを行うことはできますか？gr.cells[0].backcolorその場合、radiobuttonlist、回答、パネル、およびjqueryの最初のセル () の色を変更する方法にアクセスするにはどうすればよいですか?

これをすべてクライアント側で行うと、エンド ユーザーの使いやすさが向上する可能性があります。現在、エンド ユーザーは遅すぎると不満を漏らしています。

4

2 に答える 2

1

これを試すことができます。ラジオ ボタンにクリック イベントを追加します。私はこの機能をテストしていませんが、役に立つかもしれません。jquery ファイル バージョン 1.7 以降を使用する

マークアップ ファイル: の ようなRowStyle-CssClass属性を提供します。GridView

<asp:GridView ID="gvLineItems" runat="server" RowStyle-CssClass="row">

これは、親行を見つけるのに役立ちます。

$(function(){

     var gvLineItemsRadioObjs = $('[id$=gvLineItems] input[type=radio]');
     gvLineItemsRadioObjs.on('click', function(){

         var $this = $(this);

         //var parentRow =  $this.parents('tr'); // find the parent row.
         var parentRow =  $this.parents('tr.row'); // find the parent row.

         var firstCell = parentRow.find('td:eq(0)'); //find the first cell

         var p =parentRow .find('[id$=pnlAnswer]'); // find the panel

         switch($this.val()) //check the value
         {
            case 'No':
               firstCell.css('background-color', 'red');
               p.show();
               break;
            case 'Yes':
               firstCell.css('background-color', 'green');
               p.hide();
               break;
            case 'N/A':
               firstCell.css('background-color', '');
               p.hide();
               break;
            default:
               firstCell.css('background-color', 'red');
               p.show();
               break;
         }   

    });
});
于 2012-08-23T13:51:02.150 に答える
0

ユーザーがラジオ ボタンをクリックするたびにポストバックを実行すると、ユーザーがイライラします。

jQueryでこのようなことができます

$("#tableName").click(function (e) {
if(e.target.nodeName == "INPUT") {
    var radio = $(e.target);
    // Change to whatever element you want to change color
    var chgColor = radio.parent().find(":eq(0)");
    var pnlAnswer = $("#tableName #pnlAnswer");

    switch(radio.val()) {
        case "NO":
            tr.css("background-color": "#FF0000");
            pnlAnswer.show();
            break;
        case "YES":
            tr.css("background-color": "#00FF00");
            pnlAnswer.hide();
            break;  
        // ...
    }
}

});

ページが生成する html コードを調べてから、jQuery を使用してそれを操作する方法を理解する必要があります。

于 2012-08-23T13:55:42.790 に答える