Question

如果我使用jQuery向GridView添加行，我是否可以使用以下命令获取新添加的行：

Updated 

1. add nopadding class beside col-md-8 like below markup for all skills and add below css to override the default column padding.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Remove the padding of progress class:
.progress {

    /* margin-left: 20px; */ remove this and check
}


    <div class="row">

      <div class="col-md-8 nopadding">
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
          </div>
        </div>
      </div>
     <div class="col-md-2 skilltitle">Photoshop</div>
    </div>

如何添加行以便可以在代码后面迭代？

Answer 1

我将Gridview控件放在更新面板中并设置异步触发器以指向我的添加按钮（以便在添加新行时不刷新整个页面。）

然后在代码后面，我向数据表添加新行。将数据表保存在视图状态中，并将gridview重新绑定到viewstate。然后，当从gridview获取数据时，循环遍历viewstate数据表行。

不确定这是否是最佳解决方案，但到目前为止它一直在为我工作。

protected void cmdAdd(){
  datatable table=(datatable)viewstate["savedTable"];
  datarow row = table.newRow;
  row["myColumnName"]=txtSomething.text;
  datatable.rows.add(row);

  viewstate["savedTable"]=table;
  grid.datasource=viewstate["savedTable"];
  grid.databind();
  // or create your own functions to make the code reusable
}

protected void cmdSave(){
     datatable table=viewstate["savedTable"];
     foreach(datarow row in table.rows){
     //do stuff
}
}

我通常使用bootstrap模式向网格中添加新行，并通过网格标题按钮从后面的代码中调用这些模式。

所以我的Gridview html看起来像这样：

 <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:GridView runat="server" ID="stockTakeGrid"
                                    CssClass="table table-striped table-bordered table-condensed table-hover"
                                    AllowPaging="true" PageSize="8" OnPageIndexChanging="stockTakeGrid_PageIndexChanging"
                                    ShowHeaderWhenEmpty="true"
                                    OnRowCommand="stockTakeGrid_RowCommand"
                                    OnRowDataBound="stockTakeGrid_RowDataBound">
                                    <Columns>
                                        <asp:TemplateField>
                                                <ItemTemplate>
                                                    <asp:LinkButton runat="server" ID="cmdEdit" CssClass="btn" ToolTip="Edit Stock"
                                                         CommandName="editStock" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">
                                                        <span><i class=" glyphicon glyphicon-pencil"></i></span>
                                                    </asp:LinkButton>
                                                </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="ITEMCODE" HeaderText="Item Code" />
                                        <asp:BoundField DataField="ITEMDESC" HeaderText="Item Desc" />
                                        <asp:BoundField DataField="ONHAND" HeaderText="Stock On Hand" />
                                        <asp:BoundField DataField="STCOUNT" HeaderText="Stock Count" />
                                        <asp:BoundField DataField="VARIANCE" HeaderText="Variane" />
                                        <asp:BoundField DataField="PRICE" HeaderText="Price" />
                                        <asp:BoundField DataField="VALUE" HeaderText="Value" DataFormatString="{0:0,0.00}" />
                                        <asp:BoundField DataField="COMMENT" HeaderText="Comment" />
                                    </Columns>
                                    <PagerStyle CssClass="pagination-ys" />
                                </asp:GridView>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="cmbLocation" EventName="selectedindexchanged" />
                                <asp:AsyncPostBackTrigger ControlID="cmdSaveLine" EventName="click" />
                            </Triggers>
                        </asp:UpdatePanel>

然后我的模态html看起来像这样：

                           <!--Item Modal-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <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>
                <h4 class="modal-title" id="myModalLabel">Set actual stock count</h4>
              </div>
              <div class="modal-body">
                  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                      <ContentTemplate>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2 ">Item Code</asp:Label>
                            <div class="col-md-2">
                                <asp:TextBox runat="server" ID="txtItemCode" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                            </div>
                            <div class="col-md-6">
                                <asp:TextBox runat="server" ID="txtItemDesc" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">Stock on Hand</asp:Label>
                            <div class="col-md-2">
                                <asp:TextBox runat="server" ID="txtOnHand" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">Stock Count</asp:Label>
                            <div class="col-md-2">
                                <asp:TextBox runat="server" ID="txtSTCount" CssClass="form-control decimal-empty"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">Comment</asp:Label>
                            <div class="col-md-10">
                                <asp:TextBox runat="server" CssClass="form-control" TextMode="MultiLine" ID="txtComment" ></asp:TextBox>
                            </div>
                        </div>
                      </ContentTemplate>
                      <Triggers>
                          <asp:AsyncPostBackTrigger ControlID="stockTakeGrid" EventName="rowcommand" />
                      </Triggers>
                  </asp:UpdatePanel>
              </div>
              <div class="modal-footer">
                  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                      <ContentTemplate>
                        <asp:Button runat="server" ID="cmdSaveLine" CssClass="btn btn-info pull-left" Text="Save" 
                             OnClientClick="$('#myModal').modal('hide');" OnClick="cmdSaveLine_Click" />
                      </ContentTemplate>
                  </asp:UpdatePanel>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                </div>
              </div>
            </div>

希望这有帮助！

使用jQuery向GridView添加行并保存

1 个答案: