文档章节

在GridView表头新增图片 实现GridView行折叠展开效果

深圳大道
 深圳大道
发布于 2016/12/29 15:37
字数 379
阅读 4
收藏 0
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewExpandCollapse.aspx.cs" Inherits="GridViewExpandCollapse" %>
<!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 id="Head1" runat="server">
    <title>Expand/Collapse</title>

    <script type="text/javascript">
        var Grid = null;
        var UpperBound = 0;
        var LowerBound = 1;
        var CollapseImage = 'images/minus.gif';
        var ExpandImage = 'images/plus.gif';
        var IsExpanded = true;
        var Rows = null;
        var n = 1;
        var TimeSpan = 25;

        window.onload = function () {
            Grid = document.getElementById('<%= this.gvTab.ClientID %>');
            UpperBound = parseInt('<%= this.gvTab.Rows.Count %>');
            Rows = Grid.getElementsByTagName('tr');
        }

        function Toggle(Image) {
            ToggleImage(Image);
            ToggleRows();
        }

        function ToggleImage(Image) {
            if (IsExpanded) {
                Image.src = ExpandImage;
                Image.title = 'Expand';
                Grid.rules = 'none';
                n = LowerBound;

                IsExpanded = false;
            }
            else {
                Image.src = CollapseImage;
                Image.title = 'Collapse';
                Grid.rules = 'cols';
                n = UpperBound;

                IsExpanded = true;
            }
        }

        function ToggleRows() {
            if (n < LowerBound || n > UpperBound) return;

            Rows[n].style.display = Rows[n].style.display == '' ? 'none' : '';
            if (IsExpanded) n--; else n++;
            setTimeout("ToggleRows()", TimeSpan);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="gvTab" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False"
                GridLines="Vertical" ShowFooter="True">
                <Columns>
                    <asp:TemplateField>
                        <HeaderStyle Width="25px" />
                        <ItemStyle Width="25px" BackColor="White" />
                        <HeaderTemplate>
                            <asp:Image ID="imgTab" onclick="javascript:Toggle(this);" runat="server" ImageUrl="images/minus.gif" ToolTip="Collapse" />
                        </HeaderTemplate>
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="n" DataField="n">
                        <HeaderStyle Width="25px" />
                        <ItemStyle Width="25px" />
                    </asp:BoundField>
                    <asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
                        <HeaderStyle Width="150px" />
                        <ItemStyle Width="150px" />
                    </asp:BoundField>
                    <asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
                        <HeaderStyle Width="150px" />
                        <ItemStyle Width="150px" />
                    </asp:BoundField>
                </Columns>
                <HeaderStyle Height="25px" Font-Bold="True" BackColor="DimGray" ForeColor="White"
                    HorizontalAlign="Center" VerticalAlign="Middle" />
                <RowStyle Height="25px" BackColor="Gainsboro" HorizontalAlign="Center" VerticalAlign="Middle" />
                <AlternatingRowStyle Height="25px" BackColor="LightGray" HorizontalAlign="Center"
                    VerticalAlign="Middle" />
                <FooterStyle BackColor="Gray" />
            </asp:GridView>
        </div>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
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;
public partial class GridViewExpandCollapse : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvTab.DataSource = GetDataTable();
            gvTab.DataBind();
        }
    }

    protected DataTable GetDataTable()
    {
        DataTable dTable = new DataTable();
        DataRow dRow = null;
        Random rnd = new Random();
        dTable.Columns.Add("n");
        dTable.Columns.Add("qbrtn");
        dTable.Columns.Add("sqrtn");

        for (int n = 1; n <= 10; ++n)
        {
            dRow = dTable.NewRow();
            dRow["n"] = n + ".";
            dRow["qbrtn"] = Math.Pow(n, 1D / 3D) + "";
            dRow["sqrtn"] = Math.Sqrt(n) + "";
            dTable.Rows.Add(dRow);
            dTable.AcceptChanges();
        }
        return dTable;
    }
}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/8206347

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
DevExpress控件开发常用要点(项目总结版)

使用DevExss控件来做项目开发已经有很长一段时间了,在摸索开发到客户苛刻要求的过程中,其中碰到过很多问题需要解决的,随着一个个问题的解决,也留下很多对DevExss控件的使用经验及教训,综...

长平狐
2012/08/22
1K
0
GridView 使用方法总结 (一)

今天到csdn发现一篇让我忍不住要转的文章,虽然作者写的都是基础,但是对于初学者来说帮助还是很大的,原文件作者是:csdn.net的清清月儿 她的主页 http://blog.csdn.net/21aspnet/ 。 看了文...

Yamazaki
2012/06/02
221
0
gridview 折叠效果怎么实现

gridview 折叠效果怎么实现 点击ITEM的时候怎么折叠方式显示一个gridview 这样的

xakir
2014/04/14
323
0
手机商城第四天,利用GridView和viewpager实现频道按钮和热门活动图片的展示

代码已经上传码云,有兴趣的小伙伴可以下载看看: https://git.oschina.net/joy_yuan/ShoppingMall 下面是这次的效果图: 其中哪些服饰、游戏、动漫等栏目以及下方的那个活动都是这次的内容。...

老婆的宝宝
2017/08/22
0
0
GridView网格视图&ImageSwithcer

GridView用于在节目上按行、列分布的方式来显示多个组件。 GridView与ListView有共同的父类AbsListView,因此二者具有一定的相似性。他们的主要区别在于,ListView只是在一个方向上分布,而G...

mutouzhang
2014/03/11
61
0

没有更多内容

加载失败,请刷新页面

加载更多

新架构、新角色:TiDB Community Upgrade!

作者:Jian Zhang 经过几年的发展,TiDB 社区已经逐渐成熟,但是随着社区的发展壮大,我们逐渐感受到了现在社区架构上的一些不足。经过一系列的思考和总结,我们决定升级和调整目前社区组织架...

TiDB
30分钟前
6
0
jquery qrcode库提示not function

jquery qrcode 这个库能用,但是必须在初始化的时候,官方给的使用方法是 引入qrcode的库文件后,在js中写以下 html <div id="qrcode"></div> js jQuery('#qrcode').qrcode({ render: ......

shikamaru
35分钟前
14
0
MySQL数据库去重的简单方案

利用 distinct 对需要处理的字段进行去重 select distinct 字段名 from 表名 利用group by select * from 表名 group by 字段名 利用having select * from 表名 group by 字段名 having 字段...

FeanLau
37分钟前
9
0
字符串转换成整数

实现一个 atoi 函数,使其能将字符串转换成整数。 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止。 当我们寻找到的第一个非空字符为正或者负号时,则将该...

蔚蓝_晴天
48分钟前
8
0
Eureka客户端续约及服务端过期租约清理源码解析

在之前的文章:EurekaClient自动装配及启动流程解析中,我们提到了在构造DiscoveryClient时除了包含注册流程之外,还调度了一个心跳线程: scheduler.schedule( new Ti...

Java学习录
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部