ASP.NET—005：GridView增加一行JS实现

最新推荐文章于 2017-12-18 08:37:55 发布
最新推荐文章于 2017-12-18 08:37:55 发布
阅读量81 收藏
点赞数
文章标签： xhtml c# ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34306446/article/details/85100401
版权


原文作者：杨友山

原文地址：http://blog.csdn.net/yysyangyangyangshan/article/details/20571705


Gridview在做项目时一般使用的比较多，用来展示数据，编辑数据等。这一篇我们来看看如何用JS控制gridview来增加一行。主要还是使用Jquery，原理是复制一行已有的数据。直接看代码

效果如下
SouthEast
点击增加按钮后
SouthEast

JS文件如下：

SouthEast

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChildFrm.aspx.cs" Inherits="ASPNETGridViewJSAdd.Pages.ChildFrm" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body runat="server">
     <form id="Form1" runat="server">
      <asp:Button ID="btnAdd" runat="server" OnClientClick="return AddNewRow();return false;" Text="增加"/>
      
      <asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"
       GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
       CellSpacing="1" Width="60%" ShowNoRecordTip="True">
     <Columns>


       <asp:TemplateField>
       <ItemTemplate>
         <%#Container.DataItemIndex +1%>
         <input id="hideID" type="hidden" runat="server" value="p_id" />
       </ItemTemplate>
       <HeaderTemplate>
           <span>序号</span>
       </HeaderTemplate>
       </asp:TemplateField>


       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_name")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>姓名</span>
       </HeaderTemplate>
       </asp:TemplateField>


        <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_age")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>年龄</span>
       </HeaderTemplate>
       </asp:TemplateField>
      
       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_sex")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>性别</span>
       </HeaderTemplate>
       </asp:TemplateField>


     </Columns>
     <FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <RowStyle HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
    </form>
</body>
</html>
增加一个gridview控件，后台存放数据使用DataTable。表头和内容使用<ItemTemplate>和<HeaderTemplate>来展示。这样可以在列中方多个控件，以满足项目的需要。

下面是JS代码： 
<script type="text/javascript" src="/Scripts/Ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>


<script language="javascript" type="text/javascript">
    var dgPersonsID = "<%= dgPersons.ClientID %>";
    $(document).ready(function () {
        $("#dgPersons tr").eq(1).hide();
    });
    function AddNewRow() {
        var tr = $("#dgPersons tr").eq(1).clone();
        tr.show();
        tr.appendTo("#dgPersons");
        refreshNo();
        return false;
    }


    function refreshNo() {
      
        var dgg = document.getElementById(dgPersonsID);
        var index = 1;
        for (var i = 2; i < dgg.rows.length; ++i) {
            var cells = dgg.rows[i].cells;
            var row = dgg.rows[i];
            if (row.style.display != "none") {
                cells[0].firstChild.nodeValue = index++;
            }
        }


        return false;
    }
</script>

主要用来响应增加按钮增加一行，并且刷新数据，这里主要是来刷新序号。

后台代码


用于读取数据的方法，专门写了一个单例模式的类，本人觉得这样利于管理，所有代码都写在页面的CS文件中，不太方便。 
public class MainManager
    {
        private DataTable personCollect = null;


        private static MainManager instance = null;


        public DataTable PersonCollect
        {
            get  { return personCollect; }


            set { personCollect = value; }
        }


        public static MainManager DoGetInstance()
        {
            if (instance == null)
            {
                instance = new MainManager();
            }


            return instance;
        }


        public void DoAddSinglePersons()
        {
            if(PersonCollect==null)
            {
                PersonCollect = new DataTable();


                PersonCollect.Columns.Add("p_id");


                PersonCollect.Columns.Add("p_name");


                PersonCollect.Columns.Add("p_age");


                PersonCollect.Columns.Add("p_sex");
            }


            if (PersonCollect.Rows.Count < 1)
            {
                for (int i = 0; i < 1; i++)
                {
                    DataRow nrow = PersonCollect.NewRow();


                    nrow["p_id"] = System.Guid.NewGuid().ToString();


                    nrow["p_name"] = "西北白杨树";


                    nrow["p_age"] = 27;


                    nrow["p_sex"] = "男";


                    PersonCollect.Rows.Add(nrow);
                }
            }
        }
    }

页面的cs类，负责加载数据和绑定。 
  public partial class ChildFrm : System.Web.UI.Page
    {
        private MainManager dManager = null;


        protected void Page_Load(object sender, EventArgs e)
        {
            dManager = MainManager.DoGetInstance();


            if (!IsPostBack)
            {
                if (dManager.PersonCollect != null) { dManager.PersonCollect.Clear(); }
                
                dManager.DoAddSinglePersons();


                this.dgPersons.DataSource = dManager.PersonCollect;


                this.dgPersons.DataBind();
            }
        }
    }
这样就完成了。
增加一行的功能主要是JS实现。当然增加完一行后，数据需要编辑和保存，下一篇来介绍删除。
代码下载 ： http://download.csdn.net/detail/yysyangyangyangshan/6997727


weixin_34306446
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
gridview动态添加空白行
08-22
asp.net 后台动态添加gridview空行
C# ASP.NET GridView中新增一行，嵌套一个GridView
katarina_OK的博客
02-22 1064
//Parent GridView DataTable dt_Parent = new DataTable (); GridView gv_Parent = new GridView (); gv_Parent.DataSource = dt_Parent ; gv_Parent.DataBind(); //Child GridView DataTable dt_Child = new DataTable (); GridView gv_Child = new GridView (); gv_Child.D
GRIDVIEW 中当数据行数未满时，填充空白行
MaoMao_1983的专栏
02-08 836
GRIDVIEW 中当数据行数未满时，填充空白行 Posted on 2007-01-17 09:56 余墨 阅读(10) 评论(0)  编辑 收藏 引用 网摘 所属分类: ASP.NET <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:dc="http://purl.org/dc
ASP.NET—ASP.NET—006：GridView删除一行JS实现006：GridView增删除一行JS实现
03-27
文章： http://blog.csdn.net/yysyangyangyangshan/article/details/22321921
如何用jQuery实现ASP.NET GridView折叠伸展效果
12-28
今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有6行的列表（该列表用Table标签实现，不是DIV），当选择单选按钮的选项一时，列表的前三条信息显示后三条信息隐藏，当选择单选按钮的选项二...
asp.net下利用JS实现对后台CS代码的调用方法
01-21
要求是这样的：在gridView中有些行是没有处理过的，用户用鼠标点击该行后即表示用户处理过这一行了，行的状态要和普通的一样了，但是GridView没有对行的事件处理，必须要用JavaScript对后台的事件进行调用，如果细心...
asp.net checkbox 动态绑定id GridView删除提示
01-02
asp.net checkbox 动态绑定id 代码如下:<input id='<%# “courseNo”+Eval&#... 您可能感兴趣的文章:DataGridView中CheckBox实现某一列单选Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行Grid
c# gridview底部空行插入数据(Insert Row)
04-26
C#2008源码（附mssql资料库2000及以上版本支持均支持) girdview本身不支持添加数据行功能，最简单最实用的功能（insertRow）。 使用方法：先将testdb文件还原到sql server数据库，打开Microsoft Visual Studio 2008，选择“文件”菜单→“打开”→“网站”，打开下载的文件夹。如果有建议或不明白的内容可以MSN：[email protected]与我联系。
ASP.NET—002：GridView手动增加一行
热门推荐
杨友山
02-17 1万+
ASP.NET中的gridview如何增加一行呢，下面介绍一种最简单的方式。只使用后台的数据，在后台的datatable或者list增加一项，然后重新绑定gridview。直接看代码效果：实体类public class PersonModel { private int personIndex; public int PersonIndex
GridVIew 添加行
张彦鹏的专栏
11-04 1125
<br />如果没有记录（如新建时），可以点击添加行按钮 就增加一行 ；<br />有记录时，添加行 就在gridview中 增加一行 但保留已有记录数<br /><br /><br /><%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridMuliEdit.aspx.cs" Inherits="CSDN_GridMuliEdit" %><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
ASP.Net GridView 动态添加行，列。。
iteye_3733的博客
02-08 1351
昨天客户改需求。具体需求就不说了。总之会用到asp.net GridView动态添加行，列   // 由于网上找的，只能添加String值。我想要的是直接渲染出TextBox，所以看了下网上的代码，然后自己写写，琢磨琢磨，最后弄出来了。   // 具体代码如下 // 第一步，动态添加标头列 ...
gridview添加空白行
xmzhiqiang的专栏
05-17 2305
利用 GridView 的 DataBound 事件，在绑定结束后，通过判断 GridView 的 Rows 属性将行数补充到和 PageSize 设置的大小一样，具体代码和效果如下： public void gridView_DataBound(object sender, EventArgs e)     {         if (gridView.Rows.Count != 0 &&
GridView中数据不满一页时，添加空白行方法
yanli0823的专栏
05-12 3910
因页面展示需要，如果GridView中的数据不满一页时，用空白行补充，自己所用方法为：1、在数据源中添加空对象。如我绑定的数据源为一个对象的list，一页显示10条数据，如果list中的对象不够10个，就为list添加null对象。             StudyNote sn = new StudyNote();            sn.Name="test"; 
GridView动态增加行
技术资料收集站
12-18 1181
很多时候，我们需要可编辑的表格，来比较方便的进行数据的录入，比如学习成绩的录入。当然这就要求能够动态的增加行，来一次性录入多个学生的信息。现在用ASP.NET中强大的GridView控件就能够达到这样的效果，如下图： 下面是具体实现 前台代码：     GridView中实现动态动态增加删除行             .hide{         
asp.net asp:ButtonColumn 添加一個点击事件
最新发布
05-24
在 ASP.NET Web Forms 中，可以使用 GridView 控件中的 ButtonColumn 来添加一个按钮列。要为 ButtonColumn 添加一个点击事件，可以在 GridView 的 RowCommand 事件中进行处理。 以下是一个示例，演示如何在 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值