滚轮翻页与传动的翻页更为方便,经过本人一番探讨与琢磨终于在XtraGrid的GridView中实现了鼠标滚轮翻页。

我新建了一个组件继承原本的GridControl,在组件中添加了一个ImageList,专门存放一些资源图片。用于实现动态图的效果。

添加一个自定义委托的参数与枚举,委托参数用于传递分页的信息。

    public class PagingEventArgs : EventArgs
{
public int PageSize { get; set; }
public int PageIndex { get; set; }
} public enum LoadState
{
/// <summary>
/// 就绪
/// </summary>
Ready, /// <summary>
/// 正在读取
/// </summary>
Loading, /// <summary>
/// 读取完成
/// </summary>
Finish
}

在组件的类里面添加以下字段

        /// <summary>
/// 页面大小
/// </summary>
private int _int_page_size=20; /// <summary>
/// 当前页索引
/// </summary>
private int _int_page_index=1; /// <summary>
/// 总记录数
/// </summary>
private int _int_record_count; /// <summary>
/// 读取状态
/// </summary>
private LoadState _LodaState_state;

添加以下属性

        /// <summary>
/// 总记录数
/// </summary>
public int RecordCount
{
get
{
if (!IsPaging) return 0;
return _int_record_count;
}
set
{
if (!IsPaging) return ;
_int_record_count = value;
//当设置了新的记录总数,自动读取第一页的内容
if(value>0)
gridView_TopRowChanged(this, new EventArgs());

          else
          {
              while (this.MainView.DataRowCount > 0)
                GridView_main_view.DeleteRow(0);
              this.RefreshDataSource();
          }

            }
} /// <summary>
/// 每次读取的行数
/// </summary>
public int PageSize
{
get
{
if (!IsPaging) return 0;
return _int_page_size;
}
set
{
if (!IsPaging) return ;
_int_page_size = value;
}
} /// <summary>
/// 总页数
/// </summary>
private int PageCount
{
get
{
if (RecordCount % PageSize == 0)
return RecordCount / PageSize;
return RecordCount / PageSize + 1;
}
} /// <summary>
/// Grid
/// </summary>
private GridView _GridView_main_view
{
get { return (GridView)this.MainView; }
} /// <summary>
/// 是否启用分页
/// </summary>
public bool IsPaging { get; set; }

添加以下委托与事件

        /// <summary>
/// 内部使用的委托
/// </summary>
private delegate void myDelegate(); /// <summary>
/// 滚动翻页的委托
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
public delegate void ScrollingToPageEventHandler(object sender, PagingEventArgs e); /// <summary>
/// 滚动翻页的事件
/// </summary>
public event ScrollingToPageEventHandler OnScrollingToPage;

以下则是一些对控件的设置,按照各人喜好可以有所更改。

        /// <summary>
/// 设置分页栏
/// </summary>
private void InitEmbeddedNavigator()
{this.EmbeddedNavigator.CustomButtons.AddRange(new DevExpress.XtraEditors.NavigatorCustomButton[] {
new DevExpress.XtraEditors.NavigatorCustomButton(-1, -1, true, false, "", null)});
this.EmbeddedNavigator.TextStringFormat = " 当前 {1} 行数据 ";
this.UseEmbeddedNavigator = true; } /// <summary>
/// 设置gridView
/// </summary>
private void InitGridView()
{
_GridView_main_view.TopRowChanged += new EventHandler(gridView_TopRowChanged);
}

为控件的事件注册以下方法

        private void gridControl_Load(object sender, EventArgs e)
{
if (IsPaging)
{
_LodaState_state = LoadState.Ready; InitEmbeddedNavigator();
InitGridView();
}
} private void gridView_TopRowChanged(object sender, EventArgs e)
{ lock (this)
{
if ( _int_page_index > PageCount || _LodaState_state != LoadState.Ready) return;
} //检查是否到达底部
if (_GridView_main_view.IsRowVisible(_GridView_main_view.RowCount - 1) == RowVisibleState.Visible||
_int_page_index==1)
{ lock (this)//设置成开始读取状态
{
_LodaState_state = LoadState.Loading;
}
Thread thread_load_data = new Thread(new ThreadStart(LoadData));
Thread thread_change_text = new Thread(new ThreadStart(ChangeLoadingImage));
thread_change_text.Start();
thread_load_data.Start();
}
}

TopRowChanged事件在grid的首行改变了就会触发,类似于滚动条的Scroll事件。这里开了两个线程,第一个线程用于读取数据,第二个线程用于实现动态图。两个线程调用的方法都在下面

        /// <summary>
/// 读取数据
/// </summary>
private void LoadData()
{
int top_row_index = 0;
int focus_index = 0;
lock (this)
{
top_row_index = _GridView_main_view.TopRowIndex;
focus_index = _GridView_main_view.FocusedRowHandle; //执行事件
if (OnScrollingToPage == null)
throw new Exception("OnScrollingToPage can not be null"); PagingEventArgs e = new PagingEventArgs();
e.PageIndex = this._int_page_index;
e.PageSize = this._int_page_size;
OnScrollingToPage(this,e); } //刷新grid的数据
if (this.Parent.InvokeRequired)
{
this.Parent.Invoke(new myDelegate(delegate
{
_GridView_main_view.TopRowIndex = top_row_index;
_GridView_main_view.FocusedRowHandle = focus_index;
           _GridView_main_view.RefreshData();
})); }
lock (this)
{
_LodaState_state = LoadState.Finish;//设置成读取完成状态
}
} /// <summary>
/// 更替图片
/// </summary>
private void ChangeLoadingImage()
{ int image_index = 0; if (this.Parent.InvokeRequired)//显示loading的gif
{
this.Parent.Invoke(new myDelegate(delegate
{
this.EmbeddedNavigator.Buttons.CustomButtons[0].Visible = true;
}));
}
while (true)//循环更替图片实现动态图效果
{
lock (this)
{
if (_LodaState_state != LoadState.Loading)//判定数据是否完成
break;
} Thread.Sleep(120); if (image_index == 3)
image_index = 0;
else
image_index++;
if (this.Parent.InvokeRequired)
{
//轮流更换图片实现gif动态图
this.Parent.Invoke(new myDelegate(delegate
{
this.EmbeddedNavigator.Buttons.CustomButtons[0].ImageIndex = image_index;
}));
}
} if (this.Parent.InvokeRequired)//隐藏loading的gif
{
this.Parent.Invoke(new myDelegate(delegate
{
this.EmbeddedNavigator.Buttons.CustomButtons[0].Visible = false;
}));
} lock (this)
{
_LodaState_state = 0;
_int_page_index++;
} }

不过这个代码有点问题,当GridControl绑定的数据源有相同实例的子项时,随着RefreshData方法的调用会不停触发TopRowChanged事件,确切的原因还没搞清楚,解决这个问题就是要不去除数据源上相同的实例子项,要不就不调用RefreshData方法。还有更好的办法还请高手们的指点。

XtraGrid滚轮翻页的更多相关文章

  1. vue案例 - vue-awesome-swiper实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  2. 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

  3. 页面PC端 / 移动端整屏纵向翻页,点击/触摸滑动效果功能代码非插件

    页面翻页,滑动功能示范代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  5. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  6. 采用cocos2d-x lua 的listview 实现pageview的翻页效果之上下翻页效果

    --翻页滚动效果local function fnScrollViewScrolling( sender,eventType)    -- body    if eventType == 10 the ...

  7. HTML5翻页电子书

    体验效果:http://hovertree.com/texiao/jquery/60/ 图片请用正方形的 参考:http://hovertree.com/h/bjaf/d339euw9.htmhttp ...

  8. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  9. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. django开发总结

    首先我用的是虚拟机,python3.6+django1.11.0: 为了版本的一致,以及在环境种更好的体验,我们需要的是先用虚拟环境virtualenv其命令有: 1.创建环境(name是虚拟环境名字 ...

  2. WEB前端规范命名

    头部 header ----------------用于头部 主要内容 main ------------用于主体内容(中部) 左侧 main-left -------------左侧布局 右侧 ma ...

  3. [读书笔记] 一、Spring boot项目搭建与配置文件

    读书笔记:[JavaEE开发的颠覆者 Spring Boot实战] 作者:汪云飞 从今天开始坚持读书,并记录下此读书笔记. 一,初接触 Spring boot 项目Hello world搭建 1.po ...

  4. ios和android的发展前景比较

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt164 一直都有很多人在讨论未来的IOS和android市场哪个前景更好,现在 ...

  5. Swift4.0 Array详解

    数组的介绍 数组(Array)是一串有序的由相同类型元素构成的集合,数组中的集合元素是有序的,可以重复出现.在Swift中数组类型是Array,是一个泛型集合.数组分成:可变数组和不可变数组,分别使用 ...

  6. ELM极限学习机

    极限学习机(Extreme Learning Machine) ELM,是由黄广斌提出来的求解神经网络算法.ELM最大的特点是对于传统的神经网络,尤其是单隐层前馈神经网络(SLFNs),ELM比传统的 ...

  7. Windbg DUMP

    Windbg DUMP分析(原创汇总) 1. 引入篇 1.1 下载安装 1.2 调试器 1.3 操作界面2. 命令篇 2.1 按照来源划分 2.1.1 基本命令 2.1.2 元命令 2.1.3 扩展命 ...

  8. 使用BootStrap框架设置全局CSS样式

    一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...

  9. 团队作业1 团队展示&选题

    团队展示&选题 Coding项目地址:https://git.coding.net/wjunren/running.git 一.团队展示 1.队名:Runing Guys 2.队员: 组长:骆 ...

  10. 【Beta】Daily Scrum Meeting——Day7

    站立式会议照片 1.本次会议为第七次Meeting会议: 2.本次会议在中午12点,在陆大楼召开,本次会议为30分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 成 员 昨天已 ...