关于GridView中自定义分页、单选、多选的简单应用(原创)

    关于VS2005中GridView的自定义分页,单选、多选的简单应用。
    图片效果:

     简单示例,代码如下,
    fenpage.aspx的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fenpage.aspx.cs" Inherits="gridview_fenpage" %>

<!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>

    <script language="javascript" type="text/javascript">
    // 全部选中
    function QuanXuan_Click()
    {
        if (document.form1.checkboxname.length)
        {
            for (var i=0;i<document.form1.checkboxname.length;i++)
            {
                document.form1.checkboxname[i].checked = true;
            }
        }
        else
        {
            document.form1.checkboxname.checked = true;
        }
    }
      
    // 取消选中
    function QuXiao_Click()
    {
        if (document.form1.checkboxname.length)
        {
            for (var i=0;i<document.form1.checkboxname.length;i++)
            {
                document.form1.checkboxname[i].checked = false;
            }
        }
        else
        {
            document.form1.checkboxname.checked = false;
        }
    }
      
    // 判断没有选中的返回false
    function slcNo_click()
    {
        if (document.form1.checkboxname.length)
        {
            for (var i=0;i<document.form1.checkboxname.length;i++)
            {
                if(document.form1.checkboxname[i].checked)
                {
                    return true;
                }
            }
        }
        else
        {
            if(document.form1.checkboxname.checked)
            {
                return true;
            }
        }
        alert("请选择后再操作!");
        return false;
    }
   
    // 改变行的颜色
    if (!objbeforeItem)
    {
        var objbeforeItem=null;
        var objbeforeItembackgroundColor=null;
    }
   
    function ItemOver(obj)
    {
        objbeforeItembackgroundColor=obj.style.backgroundColor;
        obj.style.backgroundColor="#B9D1F3";                                       
        objbeforeItem=obj;
    }
       
    function ItemOut(obj)
    {           
        if(objbeforeItem)
        {
            objbeforeItem.style.backgroundColor=objbeforeItembackgroundColor;
        }   
    }
    //
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table cellpadding="0" cellspacing="0" border="0" width="60%" style="font-size: 11px">
                <tr>
                    <td align="center">
                        <asp:GridView ID="GridView1" runat="server" Width="100%" CellPadding="4" ForeColor="#333333"
                            AutoGenerateColumns="False" AllowPaging="True" PageSize="12" BorderColor="Silver"
                            BorderStyle="Solid" BorderWidth="1px" OnRowDataBound="GridView1_RowDataBound"
                            ShowFooter="True" EmptyDataText="没有数据记录!!">
                            <Columns>
                                <asp:BoundField HeaderText="编号" DataField="id" Visible="False" />
                                <asp:TemplateField HeaderText="多选" FooterText="多选">
                                    <ItemTemplate>
                                        <input type="checkbox" id="checkboxname" name="checkboxname" value='<%# DataBinder.Eval(Container.DataItem, "id")%>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="单选" FooterText="单选">
                                    <ItemTemplate>
                                        <input type="radio" id="RadioName" name="RadioName" value='<%# DataBinder.Eval(Container.DataItem, "id")%>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="姓名" FooterText="姓名" DataField="name" />
                                <asp:BoundField HeaderText="身份证号" FooterText="身份证号" DataField="card" />
                                <asp:BoundField HeaderText="价格" FooterText="价格" DataField="price" DataFormatString="{0:¥#,##0.00}"
                                    HtmlEncode="False" />
                                <asp:BoundField HeaderText="数字" FooterText="数字" DataField="price" DataFormatString="{0:0.00}"
                                    HtmlEncode="False" />
                                <asp:BoundField HeaderText="建立时间" FooterText="建立时间" DataField="createdate" DataFormatString="{0:yyyy年MM月dd日 hh时mm分ss秒}"
                                    HtmlEncode="False" />
                            </Columns>
                            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                            <EditRowStyle BackColor="#999999" />
                            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <PagerSettings Visible="False" />
                            <FooterStyle Font-Bold="True" />
                            <HeaderStyle Font-Bold="False" Font-Italic="False" />
                        </asp:GridView>
                    </td>
                </tr>
                <tr>
                    <td align="center" style="height: 25px">
                        <asp:LinkButton ID="btnFirst" CommandArgument="first" OnClick="PagerButtonClick"
                            runat="server">首 页</asp:LinkButton>
                        <asp:LinkButton ID="btnPrev" CommandArgument="prev" OnClick="PagerButtonClick" runat="server">上一页</asp:LinkButton>
                        <asp:LinkButton ID="btnNext" CommandArgument="next" OnClick="PagerButtonClick" runat="server">下一页</asp:LinkButton>
                        <asp:LinkButton ID="btnLast" CommandArgument="last" OnClick="PagerButtonClick" runat="server">尾 页</asp:LinkButton>
                        <asp:Label ID="LblCurrentIndex" runat="server"></asp:Label>
                        <asp:Label ID="LblPageCount" runat="server"></asp:Label>
                        <asp:Label ID="LblRecordCount" runat="server"></asp:Label></td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="全部选中" οnclick="QuanXuan_Click()" />
                        <input type="button" value="取消选中" οnclick="QuXiao_Click()" />
                        <asp:Button ID="Button2" runat="server" Text="checkbox得到选择的行" OnClick="Button2_Click">
                        </asp:Button>
                        <asp:Button ID="Button1" runat="server" Text="radio得到选择的行" OnClick="Button1_Click"></asp:Button>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>


     fenpage.aspx.cs的代码

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class gridview_fenpage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button2.Attributes["onclick"] = "return slcNo_click();";
        GridViewBind();
    }

    private void GridViewBind()
    {
        string connStr = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
        string SqlStr = "SELECT * FROM test01 where id<10000";
        DataSet ds = new DataSet();
       
        try
        {
            SqlConnection conn = new SqlConnection(connStr);
            if (conn.State.ToString() == "Closed") conn.Open();

            SqlDataAdapter da = new SqlDataAdapter(SqlStr, conn);
            da.Fill(ds, "test01");           
            if (conn.State.ToString() == "Open") conn.Close();

            GridView1.DataSource = ds.Tables[0].DefaultView;
            GridView1.DataBind();

            LblCurrentIndex.Text = "第 " + (GridView1.PageIndex + 1).ToString() + " 页";
            LblPageCount.Text = "共 " + GridView1 .PageCount.ToString()+ " 页";
            LblRecordCount.Text = "总共 "+ds.Tables[0].Rows.Count.ToString()+" 条";
            if (ds.Tables[0].Rows.Count == 0)
            {
                btnFirst.Visible = false;
                btnPrev.Visible = false;
                btnNext.Visible = false;
                btnLast.Visible = false;

                LblCurrentIndex.Visible = false;
                LblPageCount.Visible = false;
                LblRecordCount.Visible = false;
            }
            else if (GridView1.PageCount == 1)
            {
                btnFirst.Visible = false;
                btnPrev.Visible = false;
                btnNext.Visible = false;
                btnLast.Visible = false;
            }

            // 计算生成分页页码,分别为:"首 页" "上一页" "下一页" "尾 页"
            btnFirst.CommandName = "1";
            btnPrev.CommandName = (GridView1.PageIndex == 0 ? "1" : GridView1.PageIndex.ToString());

            btnNext.CommandName = (GridView1.PageCount == 1 ? GridView1.PageCount.ToString() : (GridView1.PageIndex + 2).ToString());
            btnLast.CommandName = GridView1.PageCount.ToString();
            //
        }
        catch(Exception ex)
        {
            Response.Write("数据库错误,错误原因:"+ex.Message);
            Response.End();
        }
    }
    protected void PagerButtonClick(object sender, EventArgs e)
    {
        GridView1.PageIndex = Convert.ToInt32(((LinkButton)sender).CommandName)-1;
        GridViewBind();
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        e.Row.Attributes["onmouseover"] = "ItemOver(this)";
        e.Row.Attributes["onmouseout"] = "ItemOut(this)";
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        string str="";
        string []ckb=null;

        str=Request.Form.Get("checkboxname");
        ckb=str.Split(new char[]{','});

        Response.Write("直接在页面中得到的值为:"+str+"<br>");

        Response.Write("处理后存放在数组中,如下:<br>");
        for(int i=0;i<ckb.Length;i++)
        {
            Response.Write("ckb["+i+"]的值为:"+ckb[i]+"<br>");
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write(Request.Form.Get("RadioName"));
    }
}


    数据库中表的生成代码:
CREATE   TABLE   [ dbo ] . [ test01 ]  (
    
[ id ]   [ decimal ] ( 18 0 IDENTITY  ( 1 1 NOT   NULL  ,
    
[ name ]   [ varchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ card ]   [ varchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ createdate ]   [ datetime ]   NULL  
ON   [ PRIMARY ]
GO

ALTER   TABLE   [ dbo ] . [ test01 ]   ADD  
    
CONSTRAINT   [ DF_test01_createdate ]   DEFAULT  ( getdate ())  FOR   [ createdate ] ,
    
CONSTRAINT   [ PK_test01 ]   PRIMARY   KEY    CLUSTERED  
    (
        
[ id ]
    )  
ON   [ PRIMARY ]  
GO

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
GridView是一个非常常用的ASP.NET控件,它可以方便地呈现数据,并且支持分页功能。在GridView,可以使用内置的分页样式,也可以自定义分页样式。下面我将介绍两种自定义分页样式。 1. 自定义分页样式一:使用自定义模板 GridView提供了一个PagerTemplate属性,可以使用这个属性来自定义分页模板。下面是一个简单的例子: ```html <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> <PagerTemplate> <div class="pagination"> <span>共<%# GridView1.PageCount %>页,当前第<%# GridView1.PageIndex+1 %>页</span> <ul> <li><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= GridView1.PageIndex-1 %>')">上一页</a></li> <% for (int i = 0; i < GridView1.PageCount; i++) { %> <li <% if (GridView1.PageIndex == i) { %>class="active"<% } %>><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= i %>')"><%= i+1 %></a></li> <% } %> <li><a href="#" onclick="javascript:__doPostBack('GridView1','Page', '<%= GridView1.PageIndex+1 %>')">下一页</a></li> </ul> </div> </PagerTemplate> </asp:GridView> ``` 在这个例子,我们使用PagerTemplate属性定义了一个分页模板。该模板包含一个div元素,用于包含分页控件。在div元素,我们使用了一些HTML代码和ASP.NET表达式来生成分页控件。 在分页控件,我们使用了一个ul元素和一些li元素来呈现页码。在每个li元素,我们使用了一个a元素和一个onclick事件来触发GridView分页功能。在onclick事件,我们使用了一个__doPostBack函数来向服务器发送分页请求,并且传递了两个参数:GridView的ID和分页索引。 2. 自定义分页样式二:使用第三方分页插件 除了使用自定义模板之外,我们还可以使用第三方分页插件来自定义GridView分页样式。下面是一个使用Bootstrap Paginator插件的例子: ```html <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> </asp:GridView> <div id="pagination"></div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.js"></script> <script> $(function () { $('#pagination').bootstrapPaginator({ currentPage: <%= GridView1.PageIndex+1 %>, totalPages: <%= GridView1.PageCount %>, onPageChanged: function (e, oldPage, newPage) { __doPostBack('GridView1', 'Page', newPage-1); } }); }); </script> ``` 在这个例子,我们使用了Bootstrap Paginator插件来自定义分页样式。在页面加载完成之后,我们使用jQuery选择器选了一个id为pagination的div元素,并且调用了bootstrapPaginator函数来初始化分页控件。在bootstrapPaginator函数,我们传递了三个参数:当前页码、总页码数和一个回调函数。在回调函数,我们使用__doPostBack函数向服务器发送分页请求,并且传递了两个参数:GridView的ID和分页索引。 这两种自定义分页样式都非常简单易懂,可以根据自己的需求进行选择和修改。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值