GridView数据绑定自带分页及分页css样式，CheckBox多选，radio单选，自增列，[bubufx分享asp.net基础]

2023-09-26 11:21:16

GridView常用控件，数据量太大后分页是必要的功能，GridView功能强大，自带了分页功能，只要将AllowPaging="True"，在OnPageIndexChanging方法里简单设置就实现分页了。而且GridView也提供了很多可以设置的样式，能让你的分页看上去很和你的系统搭配。当然也可以使用css样式，将能展示更多的外观。

GridView用在对数据的管理时，CheckBox就太必要了。不多说了，上代码。IDE是VS2010，数据库是access的。

完整代码下载：【不用太猛轻轻点这里去下载】

图示：

GridView数据绑定自带分页及分页css样式，CheckBox多选，radio单选，自增列，[bubufx分享asp.net基础]

gridviewTest.aspx：

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

<!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>
    <style type="text/css">
        .bubufxPagerCss table
        {
            text-align: center;
            margin: auto;
        }
        .bubufxPagerCss table td
        {
            border: 0px;
            padding: 5px;
        }
        .bubufxPagerCss td
        {
            border-left: #ffffff 3px solid;
            border-right: #ffffff 3px solid;
            border-bottom: #ffffff 3px solid;
        }
        .bubufxPagerCss a
        {
            color: #231815;
            text-decoration: none;
            padding: 3px 6px 3px 6px;
            margin: 0 0 0 4px;
            text-align: center;
            border: 1px solid #ac1f24;
        }
        .bubufxPagerCss span
        {
            color: #fefefe;
            background-color: #ac1f24;
            padding: 3px 6px 3px 6px;
            margin: 0 0 0 4px;
            text-align: center;
            font-weight: bold;
            border: 1px solid #ac1f24;
        }
    </style>
    <script language="javascript" type="text/javascript">
        // 判断多选是否与选中项（没有选中的返回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;
        }


        // 多选的全选与取消
        function checkJs(boolvalue) {
            if (document.all.cbBubufx.length > 1) {
                for (var i = 0; i < document.all.cbBubufx.length; i++) {
                    document.all.cbBubufx[i].checked = boolvalue;
                }
            }
            else
                document.all.cbBubufx.checked = boolvalue;
        }
        //

        // 只有全部选中时“全选”选中
        function SingleCheckJs() {
            var flag1 = false;
            var flag2 = false;

            if (document.all.cbBubufx.length) {
                for (var i = 0; i < document.all.cbBubufx.length; i++) {
                    if (document.all.cbBubufx[i].checked)
                        flag1 = true;
                    else
                        flag2 = true;
                }
            }
            else {
                if (document.all.cbBubufx.checked)
                    flag1 = true;
                else
                    flag2 = true;
            }

            if (flag1 == true && flag2 == false)
                document.getElementById("cbBubufxHead").checked = true;
            else
                document.getElementById("cbBubufxHead").checked = false;
        }
        //
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
            EmptyDataText="没有数据记录！！" OnPageIndexChanging="GridView1_PageIndexChanging">
            <Columns>
                <asp:TemplateField HeaderText="自增列" FooterText="自增列">
                    <ItemTemplate>
                        <%#  (Container.DataItemIndex+1).ToString()%>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="&lt;input type=’checkbox’ id=’cbBubufxHead’ name=’cbBubufxHead’ onclick=’checkJs(this.checked);’  /&gt;全选"
                    FooterText="全选">
                    <ItemTemplate>
                        <input type="checkbox" id="cbBubufx" name="cbBubufx" value=’<%# Eval("ID")%>’ onclick=’SingleCheckJs();’ />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="单选" FooterText="单选">
                    <ItemTemplate>
                        <input type="radio" id="RadioName" name="RadioName" value=’<%# Eval("ID")%>’ />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="多选" FooterText="多选">
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" Text=’<%# Eval("ID")%>’ />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="编号" DataField="ID" />
                <asp:BoundField HeaderText="姓名" FooterText="姓名" DataField="name" SortExpression="name" />
                <asp:BoundField HeaderText="身份证号" FooterText="身份证号" DataField="card" SortExpression="card" />
                <asp:BoundField HeaderText="时间" FooterText="时间" DataField="createtime" SortExpression="createtime" />
            </Columns>
            <PagerSettings FirstPageText="首页" LastPageText="末页" NextPageText="下一页" PageButtonCount="5"
                PreviousPageText="上一页" Mode="NumericFirstLast" />
            <PagerStyle BorderColor="#66FF66" Font-Names="宋体" Font-Size="12px" HorizontalAlign="Center"
                CssClass="bubufxPagerCss" />
        </asp:GridView>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="获得checkbox多选值" OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
        <asp:Button ID="Button2" runat="server" Text="获得radio单选值" OnClick="Button2_Click" />
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
        <asp:Button ID="Button3" runat="server" Text="获得服务器控件checkbox多选值" OnClick="Button3_Click" />
        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

gridviewTest.aspx.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;

public partial class gridviewTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            dataBind();
        }
    }
    private void dataBind()
    {
        DB _db = new DB();
        string _sql = "select * from gridviewTestTable";

        DataTable _DT = _db.GetDt(_sql);

        GridView1.DataSource = _DT;
        GridView1.DataBind();
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        dataBind();
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = Request.Form.Get("cbBubufx");

    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label2.Text=Request.Form.Get("RadioName");
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
        string str = "";

        if (GridView1.Rows.Count > 0)
        {
            for (int i = 0; i < GridView1.Rows.Count; i++)
            {
                if (((CheckBox)GridView1.Rows[i].FindControl("CheckBox1")).Checked)
                    str = str + ((CheckBox)GridView1.Rows[i].FindControl("CheckBox1")).Text+",";
            }
        }
        Label3.Text = str;
    }

}

access数据库操作类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Data;
using System.Data.OleDb;

/// <summary>
///DB 的摘要说明
/// </summary>
public class DB
{
    public string connStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath("bubufx.mdb");

    public DataTable GetDt(string sql)
    {
        DataSet ds = new DataSet();
        OleDbConnection conn = new OleDbConnection(connStr);

        if (conn.State == ConnectionState.Closed) conn.Open();
        OleDbDataAdapter da = new OleDbDataAdapter(sql, conn);

        da.Fill(ds);
        conn.Close();
        return ds.Tables[0];
    }

    public int RunSql(string sql)
    {
        try
        {
            OleDbConnection conn = new OleDbConnection(connStr);

            if (conn.State == ConnectionState.Closed) conn.Open();
            OleDbCommand comm = new OleDbCommand(sql, conn);

            comm.ExecuteNonQuery(); conn.Close();
            return 1;
        }
        catch { return 0; }
    }

}

完整代码下载：【不用太猛轻轻点这里去下载】

GridView数据绑定自带分页及分页css样式，CheckBox多选，radio单选，自增列，[bubufx分享asp.net基础]

码农公寓

相关文章