文档章节

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

深圳大道
 深圳大道
发布于 2016/12/29 15:32
字数 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

没有更多内容

加载失败,请刷新页面

加载更多

JIT编程与方法内联

JIT的比较冷门,首先你要读一下这两篇 帖子: 《面向JIT编程-方法内联》 https://blog.csdn.net/u012834750/article/details/79488572 《浅谈对JIT编译器的理解》 https://www.cnblogs.com/...

爱吃窝窝头
18分钟前
3
0
基于TCP的RPC实现

RPC即远程服务调用 出现原因:随着项目越来越大,访问量越来越大,为了突破性能瓶颈,需要将项目拆分成多个部分,这样比起传统的项目都是本地内存调用,分布式的项目之间需要在网络间进行通信...

少年已不再年少
28分钟前
5
0
OSChina 周二乱弹 —— 他只能用这个办法劝你注意身体了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# Kodaline《High Hopes》 《High Hopes》- Kodaline 手机党少年们想听歌,请使劲儿戳(这里) @xiaoshiyue :仙女...

小小编辑
49分钟前
1K
21
Spring Boot Actuator 整合 Prometheus

简介 Spring Boot 自带监控功能 Actuator,可以帮助实现对程序内部运行情况监控,比如监控状况、Bean加载情况、环境变量、日志信息、线程信息等。这一节结合 Prometheus 、Grafana 来更加直观...

程序员果果
58分钟前
11
0
Linux文件查找命令详解

对于文件查找,我们最好用的还是属于find命令了,在说find命令之前,先把另外几个查找命令介绍一下。 目录 0x01 查询命令介绍 0x02 find命令介绍 0x01 查询命令介绍 在介绍之前,首先先了解一...

无心的梦呓
58分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部