小气的鬼

滋生，成就，努力实现
posts - 70, comments - 197, trackbacks - 3, articles - 1
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

关于GridView中自定义分页、单选、多选、排序、自增列的简单应用（原创）

Posted on 2006-05-05 19:06 星期零 阅读(6998) 评论(23)  编辑 收藏 网摘 所属分类: VS.net2005
    关于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">    
    // 判断多选是否与选中项（没有选中的返回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)
    {
        if(objbeforeItem)
        {
            objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;
        }
        objbeforeItembackgroundColor = obj.style.backgroundColor;
        objbeforeItem = obj;
        obj.style.backgroundColor = "#B9D1F3";     
    }
    //        
 
    // 多选的全选与取消
    function checkJs(boolvalue)
    {
        if(document.all.checkboxname.length>1)
        {
            for(var i=0;i<document.all.checkboxname.length;i++)
            {
                document.all.checkboxname[i].checked = boolvalue;            
            }
        }
        else
            document.all.checkboxname.checked = boolvalue;
    }
    //
    
    // 只有全部选中时“全选”选中
    function SingleCheckJs()
    {
        var flag1=false;
        var flag2=false;
        
        if (document.form1.checkboxname.length)
        {
            for (var i=0;i<document.form1.checkboxname.length;i++)
            {
                if(document.form1.checkboxname[i].checked)
                    flag1 = true;
                else
                    flag2 = true;
            }
        }
        else
        {
            if(document.form1.checkboxname.checked)
                flag1 = true;
            else
                flag2 = true;
        }
        
        if(flag1==true&&flag2==false)
            document.getElementById("chk").checked = true;
        else
            document.getElementById("chk").checked = false;
    }
    //
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table cellpadding="0" cellspacing="0" border="0" width="80%" 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="没有数据记录！！" AllowSorting="True" OnSorting="GridView1_Sorting">
                            <Columns>
                                <asp:BoundField HeaderText="编号" DataField="id" Visible="False" />
                                <asp:TemplateField HeaderText="&lt;input type='checkbox' id='chk' name='chk' onclick='checkJs(this.checked);'  /&gt;全选" FooterText="全选">
                                    <ItemTemplate>
                                        <input type="checkbox" id="checkboxname" name="checkboxname" value='<%# DataBinder.Eval(Container.DataItem, "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>
                                        <%# (Container.DataItemIndex+1).ToString()%>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="姓名" FooterText="姓名" DataField="name" SortExpression="name" />
                                <asp:BoundField HeaderText="身份证号" FooterText="身份证号" DataField="card" SortExpression="card" />
                                <asp:BoundField HeaderText="价格" FooterText="价格" DataField="price" DataFormatString="{0:￥#,##0.00}"
                                    HtmlEncode="False" SortExpression="price" />
                                <asp:BoundField HeaderText="数字" FooterText="数字" DataField="price" DataFormatString="{0:0.00}"
                                    HtmlEncode="False" SortExpression="price" />
                                <asp:BoundField HeaderText="建立时间" FooterText="建立时间" DataField="createdate" DataFormatString="{0:yyyy年MM月dd日 hh时mm分ss秒}"
                                    HtmlEncode="False" SortExpression="createdate" />
                            </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>
                        <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 Sqlsort)
    {
        string connStr = ConfigurationManager.ConnectionStrings["ConnString1"].ConnectionString;
        string SqlStr = "SELECT * FROM test01 where id<1000" + Sqlsort;
        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)";
    }

    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"));
    }
    protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
    {
        string sql = "";

        if (ViewState["SortDirection"] == null || ViewState["SortDirection"].ToString().CompareTo("") == 0)
        {
            ViewState["SortDirection"] = " desc";
        }
        else
            ViewState["SortDirection"] = "";

        sql = " order by " + e.SortExpression + ViewState["SortDirection"];
        
        GridViewBind(sql);
    }
}

    数据库中表的生成代码：
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

Feedback

#1楼   回复  引用    

2006-05-08 15:45 by JustDoIT[未注册用户]
不错!
年轻人,好好写
中国软件就靠你了

#2楼   回复  引用    

2006-05-18 11:24 by great[未注册用户]
数据提取没有实现自定义分页啊？

#3楼   回复  引用    

2006-05-18 19:41 by weekzero[未注册用户]
实现了自定义分页。
数据提取没有实现自定义分页？指的是什么？是借助存储过程分页吧！

#4楼   回复  引用    

2006-05-25 11:50 by 钱刚华[未注册用户]
如果象你这么操作的话还不如用datasource绑定，你这样操作没有优势，还多写了不少代码。

#5楼   回复  引用    

2006-05-25 14:30 by weekzero[未注册用户]
这个里面当然是单表的简单查询,可以使用datasource来绑定,但是我们在很多的业务应用中都是组合复杂的sql语句.

#6楼   回复  引用    

2006-06-23 14:44 by 奋斗[未注册用户]
没看到 每页显示多少条数据的定义阿。。。 是不是漏了？？？？

#7楼   回复  引用    

2006-06-23 16:43 by 星期零_1[未注册用户]
<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">

中的:PageSize="12"

#8楼   回复  引用    

2006-07-20 21:37 by bit.zhou[未注册用户]
单表查询我们可以用datasourse，但是复杂(多表)的查询就不行了;

#9楼   回复  引用  查看    

2006-08-01 19:52 by 功夫-皇帝      
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;
}
}
}
我有点不懂， 怎么返回true就可以取到value了吗？不懂
还有不懂的是服务器控件跟客户端控件怎么互通啊
在客户端用JS 我可以实现全选，在服务器端我就不知道怎么取到客户端操作的东西（对应行绑定的value值），郁闷 还望指教下

#10楼   回复  引用  查看    

2006-08-01 19:57 by 功夫-皇帝      
Button2.Attributes["onclick"] = "return slcNo_click();";
跟这个OnClick="Button2_Click">
有什么关系了？ 是有顺序的么 ？

#11楼   回复  引用  查看    

2006-08-01 20:02 by 功夫-皇帝      
da.Fill(ds, "test01");
if (conn.State.ToString() == "Open") conn.Close();

GridView1.DataSource = ds.Tables[0].DefaultView;
GridView1.DataBind();
这样的效率不高吧，一次只需要取12个就行了
你是为了方便？

#12楼   回复  引用  查看    

2006-08-01 20:11 by 功夫-皇帝      
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 中加上
if (e.Row.RowType == DataControlRowType.DataRow)
会好些， 你写那个好象还是有点问题，颜色有点乱变

#13楼   回复  引用    

2006-08-02 08:55 by 星期零_1[未注册用户]
功夫-皇帝 ，这么多回复呀，一个一个来吧
－－－－－－－－－－－－－－－－－－－－－－－－－－－
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 中加上
if (e.Row.RowType == DataControlRowType.DataRow)
会好些， 你写那个好象还是有点问题，颜色有点乱变
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个是那个js脚本有些问题，昨天发现了，已经改了，你可以把现在这个复制过去就好了

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

GridView1.DataSource = ds.Tables[0].DefaultView;
GridView1.DataBind();
这样的效率不高吧，一次只需要取12个就行了
你是为了方便？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个方法事为了方便，数据量小的时候事可以这样的，数据量大时必须借助存储过程，每次只取当前页的记录，这个在网上搜索分页存储过程，有N多。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Button2.Attributes["onclick"] = "return slcNo_click();";
跟这个OnClick="Button2_Click">
有什么关系了？ 是有顺序的么 ？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Button2.Attributes["onclick"] = "return slcNo_click();";
这个时添加的客户端的js事件
OnClick="Button2_Click"
这个就是添加的服务器端的事件了

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
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;
}
}
}
我有点不懂， 怎么返回true就可以取到value了吗？不懂
还有不懂的是服务器控件跟客户端控件怎么互通啊
在客户端用JS 我可以实现全选，在服务器端我就不知道怎么取到客户端操作的东西（对应行绑定的value值），郁闷 还望指教下
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
代码是客户端判断checkbox是否有选中，如果有的话就返回true,没有就是false了
控件上可以添加服务器端的事件和客户端的事件
客户端实现全选后在服务器程序中取得选中所需要的值，在本实例中已经有实现

#14楼   回复  引用    

2006-08-08 08:40 by yaloob[未注册用户]
问题1:radio的CLICK事件怎么能获得。也就是不需要点击Button1就可以显示获得的值

问题2：能把排序功能加上吗，我试着在这个程序的基础上加了排序功能但没成功

#15楼   回复  引用    

2006-08-08 11:30 by yaloob[未注册用户]
还有一个问题就是我怎样才能获得RADIO选中的行的SelectedIndex呢？？

#16楼   回复  引用    

2006-08-08 11:35 by yaloob[未注册用户]
还有一个问题就是我怎样才能获得RADIO选中的行的SelectedIndex呢？？

#17楼[楼主]   回复  引用  查看    

2006-08-08 14:46 by 星期零      
增加了排序

#18楼   回复  引用    

2006-08-09 08:37 by yaloob[未注册用户]
to : 星期零
我们的排序方法写的基本都一样，也遇到了同样的问题——排序和分页结合的问题。

还有一点是关于表头的多选checkbox。当选中多选checkbox后，表中的checkbox肯定都选中了，如果把表中的一个checkbox去掉选中的话，表头的多选checkbox也应该取消选中状态。

#19楼   回复  引用    

2006-08-09 09:28 by 星期零_1[未注册用户]
我们的排序方法写的基本都一样，也遇到了同样的问题——排序和分页结合的问题。
----------------------------------------
这样的处理就比较细腻了，需要加一些程序上的处理。


还有一点是关于表头的多选checkbox。当选中多选checkbox后，表中的checkbox肯定都选中了，如果把表中的一个checkbox去掉选中的话，表头的多选checkbox也应该取消选中状态。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个想法不错，可以使多选的状态更加的合理，可以加上

#20楼   回复  引用    

2006-10-10 23:54 by Del[未注册用户]
有没有GridView中有RadioButtonList的例子，，并且点RadioButton有事件激发，并在同row中有TextBox显示和不显示。


<asp:TemplateField HeaderText="出卖方式">
<ItemTemplate>
<asp:RadioButtonList Font-Size="9pt" ID="rblSelect" DataValueField='<%#Eval("isReg") %>' runat="server" RepeatDirection="Horizontal" AutoPostBack="True" OnSelectedIndexChanged="rblSelect_SelectedIndexChanged">
<asp:ListItem Value="2">拍卖</asp:ListItem>
<asp:ListItem Value="1">一口价</asp:ListItem>
<asp:ListItem Value="0">收藏</asp:ListItem>
</asp:RadioButtonList>
</ItemTemplate>
</asp:TemplateField>

#21楼   回复  引用    

2007-01-15 13:38 by will[未注册用户]
請問下面這段如何改成vb
ckb=str.Split(new char[]{','});
tks

#22楼   回复  引用    

2007-09-20 15:05 by yang aiyou[未注册用户]
先帮你顶一下，再慢慢看，估计会帮上我大忙！

#23楼   回复  引用    

2007-09-20 15:09 by yang aiyou[未注册用户]
你这是用ASP写的页面，我现在是用C#写，我能把这样的代码用到我里面去吗？



发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 392188




相关文章:

相关链接: