滚轮翻页与传动的翻页更为方便,经过本人一番探讨与琢磨终于在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. PyQt4简单小demo

    #coding=utf-8 import sys from PyQt4.QtCore import * from PyQt4.QtGui import * class FontPropertiesDl ...

  2. Python初学——窗口视窗Tkinter

    此篇文章是跟着沫凡小哥的视频学习的,附上学习网址:https://morvanzhou.github.io/tutorials/python-basic/ 什么是 tkinter 窗口1.1 什么是 ...

  3. 一语惊醒梦中人-《Before I Fall》

    I still remembered  I turned my attention to the title when I browsed in news by cellphone.I saw the ...

  4. private ,friendly,public protected四种修饰符访问权限(从idea代码提示中看出)

    文件一,本类中可以访问全部: package xsf; /** * Created by liwenj on 2017/7/25. */ public class A { private int x= ...

  5. js事件汇总

    常用事件: 1.鼠标事件:onClick,onDblClick,onMouseDown,onMouseUp,onMouseOut,onMouseOver ·onClick:单击页面元素时发生,onDb ...

  6. 使用nginx实现纯前端跨越

    你是否厌倦了老是依赖后台去处理跨域,把握不了主动权 你是否想模仿某个app倒腾一个demo,却困于接口无法跨域 那么很幸运,接下来我将现实不依赖任何后台,随心所欲的想访问哪个域名就访问哪个! 下载ng ...

  7. java多线程设计模式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt220 java多线程设计模式 java语言已经内置了多线程支持,所有实现Ru ...

  8. window.onerror 应用实例

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp75   window.onerror = function(sMessa ...

  9. Java基础学习 —— 线程

    线程: 多线程的好处:解决了在一个进程中同时执行多个任务代码的问题. 自定义线程的创建方式: 1.自定一个类继承thread类,重写thread的run方法 吧自定义线程的任务代码写在run方法内,创 ...

  10. 201521123025《java程序设计》第8周学习总结

    1. 本周学习总结 2.书面作业 Q1.List中指定元素的删除(题目4-1) public static List<String> convertStringToList(String ...