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].backcolorjquery 中第一个单元格 ( ) 的颜色的方法？

如果我在客户端做这一切，它可能会增加最终用户的可用性，他们现在抱怨它太慢了。

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 回答