如何在gridview中按行设置jquery模式中的asp文本框的值

时间:2015-12-15 05:30:31

标签: javascript jquery asp.net gridview bootstrap-modal

我在网格视图中的jquery模式内有关于textbox(tb)的问题。基本上,问题是tb的值与我点击gridview中其他行的模态相同,即使我把“tr”设置为行。关键是'id_rN'和'rN'。情况是:

  1. 点击gridview
  2. 中第1行的模态链接
  3. 以模态(例如:hello)
  4. 在tb中插入数据
  5. 关闭模式
  6. 点击gridview中第2行的模态链接,其值与第1行相同
  7. 我将展示它的图片:

    Click "Add/Edit" at 'Remarks' column to show modal pop

    Modal Textbox row1 show 'hello'

    你可以看到modal tb得到row1和row2的相同值。

    这是剧本:

    $('a[data-toggle=modal]').click(function () {
    
                var data_pN = String($(".pN", $(this).closest("tr")).html());
                var data_cN = String($(".cN", $(this).closest("tr")).html());
                var data_aN = String($(".aN", $(this).closest("tr")).html());
                var data_rN = $('#<%=GridView1.ClientID %>').find('[id*="id_rN"]', $(this).closest("tr")).val(); //variable for textbox in modal
    
    
    
                $('input[id*="id_pN"]').val(data_pN);
                $('input[id*="id_cN"]').val(data_cN);
                $('input[id*="id_aN"]').val(data_aN);
                $('[id*="rN"]', $(this).closest("tr")).val(data_rN); //get value from texbox modal to textbox for column 'Remarktest'
    
            }); 
    

    这是gridview html:

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDeleting="GridView1_RowDeleting"
                    CssClass="table table-hover table-striped" GridLines="None" RowStyle-BackColor="#5AC3DE"
                    AlternatingRowStyle-BackColor="#1ac6ff" Font-Size="Smaller">
                    <Columns>
                        <asp:BoundField DataField="Project No." HeaderText="Project No." ItemStyle-CssClass="pN" />
                        <asp:BoundField DataField="Ctr No." HeaderText="Ctr No." ItemStyle-CssClass="cN" />
                        <asp:BoundField DataField="Activity" HeaderText="Activity" ItemStyle-CssClass="aN" />
                        <asp:TemplateField HeaderText="ad" >
                            <ItemTemplate>
                                <asp:TextBox ID="rN" runat="server"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <%--<asp:BoundField DataField="Remark" HeaderText="Remark" ItemStyle-CssClass="rN"  Visible="false"/>--%>
                        <asp:TemplateField HeaderText="Remarks">
                            <ItemTemplate>
                            <!-- Link trigger modal -->
                                <a data-toggle="modal" href="#myModal" id="modalLink">Add/Edit</a>
                                <%--<asp:TextBox ID="rN" runat="server"></asp:TextBox>--%>
                                <!-- Modal tabindex="-1" role="dialog" div class="modal-dialog modal-lg" role="document"-->
                                <div class="modal container fade" id="myModal" aria-labelledby="myModalLabel" style="width: 60%;
                                    margin-bottom: 20%">
                                    <%--<div class="modal-dialog modal-lg">--%>
                                    <%--<div class="modal-content">--%>
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h3 class="modal-title" id="myModalLabel">
                                            Details</h3>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <h4>
                                                        Project No.</h4>
                                                    <asp:TextBox ID="id_pN" runat="server" CssClass="form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <h4>
                                                        Ctr No.</h4>
                                                    <asp:TextBox ID="id_cN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <h4>
                                                        Activity</h4>
                                                    <asp:TextBox ID="id_aN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                <div class="form-group">
                                                    <h4>
                                                        Remark</h4>
                                                    <asp:TextBox ID="id_rN" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4"
                                                        Font-Size="Small"></asp:TextBox>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
    
                                            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" >
                                                Close</button>
                                        </div>
                                    </div>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="Actual" HeaderText="Actual To End of Week" />
                        <asp:TemplateField HeaderText="Sat st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_sat" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Sat ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_sat" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Sun st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Sun ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Mon st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_mon" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Mon ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_mon" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Tue st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_tue" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Tue ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_tue" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Wed st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_wed" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Wed ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_wed" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Thu st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_thu" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Thu ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_thu" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Fri st">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_nt_fri" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Fri ot">
                            <ItemTemplate>
                                <asp:TextBox ID="tb_ot_fri" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="hourtest">
                            <ItemTemplate>
                                <asp:TextBox ID="hTest" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:BoundField DataField="Week" HeaderText="Weekly Total" />
                        <asp:BoundField DataField="Remain" HeaderText="Remaining hour" />
                        <asp:CommandField ShowEditButton="True" ButtonType="Button" />
                        <asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
                    </Columns>
                </asp:GridView>
    
    很高兴有人可以帮助我。 :)

1 个答案:

答案 0 :(得分:0)

尝试这样的事情

HTML MARKUP: 添加类toyour文本框:

<asp:TextBox ID="id_pN" runat="server" CssClass="cls_pN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>

<asp:TextBox ID="id_cN" runat="server" CssClass="cls_cN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>

<强> JQUERY:

$('a[data-toggle=modal]').click(function () {
            var self=$(this);
            var selfTR=self.closest('tr');

            // get current row textbox value
            var txt_p=selfTR.find(".cls_pN").val();
            var txt_c=selfTR.find(".cls_cN").val();

            alert(txt_p);
            alert(txt_c);
    });