0

私はグリッドビューを持っていますgrdtest。アンカー クリックで表示されるモーダル ダイアログから JQuery を使用して、グリッド内のテキスト ボックスを更新したいと考えています。コードを追加しましたが、モーダル ダイアログがグリッド内のすべてのテキスト ボックスを更新します。アンカーと同じ行のテキスト ボックスのみを更新するにはどうすればよいですか?

htmlコードは

<div id="output">
<asp:GridView ID="grdtest" CssClass="grid" Width="20%" AutoGenerateColumns="false" runat="server"
 DataKeyNames="ID" OnRowCreated="grdtest_RowCreated" OnRowCommand="grdtest_RowCommand">
<Columns>
<asp:BoundField DataField="ID" Visible="false" />
<asp:BoundField HeaderText="NAME"  DataField="NAME" ItemStyle-Width="5%"/>
<asp:TemplateField HeaderText="MONTH" ItemStyle-Width="5%">
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Wrap="true"></asp:TextBox>
</ItemTemplate></asp:TemplateField>
<asp:TemplateField ItemStyle-Width="2%">
<ItemTemplate><a href="#" >Month</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
    <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
        <tr>
            <td class="web_dialog_title">Month Chooser</td>
            <td class="web_dialog_title align_right">
                <a href="#" id="btnClose">Close</a>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 15px;">
                <b>Choose the months from the list </b>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 15px;">
                <div id="months">
                    <input id="month1" name="month" type="checkbox" value="Jan" />January
                    <input id="month2" name="month" type="checkbox" value="Feb" />February
                    <input id="month3" name="month" type="checkbox" value="Mar" />March
                    <input id="month4" name="month" type="checkbox" value="Apr" />April
                    <input id="month5" name="month" type="checkbox" value="May" />May
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input id="btnSubmit" type="button" value="Submit" />
            </td>
        </tr>
    </table>
</div>
</form>
</body>

jsコードは

<script type="text/javascript">

    $(document).ready(function ()
    {
        $("#btnClose").click(function (e)
        {
            HideDialog();
            e.preventDefault();
        });


        $('#btnSubmit').click(function(e)
        {
            var sub = [];
            $(':checkbox:checked').each(function(i){
            sub[i] = $(this).val();
            });
            $("#grdtest").find("input[type=text][id*=txtsubject]").val(sub);
            HideDialog();
            e.preventDefault();
        });

    });

    function ShowDialog(modal)
    {
        $("#overlay").show();
        $("#dialog").fadeIn(300);

        if (modal)
        {
            $("#overlay").unbind("click");
        }
        else
        {
            $("#overlay").click(function (e)
            {
                HideDialog();
            });
        }
    }

    function HideDialog()
    {
        $("#overlay").hide();
        $("#dialog").fadeOut(300);
    } 

</script>
4

2 に答える 2

2

リンククリックメソッドに何かを追加して、後でターゲットにできる特定のクラスをテキストボックスに与えることができます。これにより、次のような1つだけをターゲットにできます。

$(".openModalLink").click(function(){
    $(this).parent().parent()
        .find("input[type=text][id*=txtsubject]").addClass("ChangeMe");
    ShowDialog();
}

グリッドビューのにクラスを追加する必要があり<a href="#" class="your class name">Month</a>ます。私の場合はopenModalLink。その場合、送信関数は次のようになります。

    $('#btnSubmit').click(function(e)
    {
        var sub = [];
        $(':checkbox:checked').each(function(i){
        sub[i] = $(this).val();
        });
        $("#grdtest").find(".ChangeMe").val(sub);
        HideDialog();
        e.preventDefault();
    });

そして、HideDialogで、すべてのテキストボックスから特定のクラスを削除します。

function HideDialog()
{
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
    $("#grdtest").find("input[type=text][id*=txtsubject]").removeClass("ChangeMe");
}

これがお役に立てば幸いです。あなたが探していたものです。

于 2012-04-19T14:16:40.050 に答える