Tips:代码中easyui treegrid的操作(项目中用easyui),代码并不能放之四海而皆准, 但是可以通过代码了解滚动加载的原理(只为学习)。 /** * @author wsf 前台分页(只对已经加载的数据进行分割) */ ; (function (win,$){ /** * 自定义命名空间 */ $.scrollPage = $.extend({},{ /** * page对象 */ config:{ pageData:{},//页面数据 dataLoding:false,//是否正在加载数据 canStartLoadData:false,//是否可以开始加载数据 pageNo:1,//页码 pageItem:10,//没有的数据条数(每页显示的条数) currentPageItem:30,//当前页面显示了多少数据 time:null,//时间及时器 speed:10,//判断是否可加载的间隔 }, /** * 初始化 */ init:function (_config){ var _this = $.scrollPage;// $.extend(_this.config,_config); return _this;//为了链式操作 }, /** * 设置pageData */ setPageData:function (pageData){ this.config.pageData = pageData; }, /** * 加载下一页 */ getNext:function (){ var _this = $.scrollPage; var cfg = _this.config; var sliceStart = cfg.currentPageItem;//数组截取开始下标 cfg.pageNo ++;//页码加一 cfg.currentPageItem = cfg.pageNo*cfg.pageItem; var sliceEnd = cfg.currentPageItem;//数组截取开始下标 return cfg.pageData.slice(sliceStart,sliceEnd); }, /** * 返回前一页 */ getPrev:function (){ var _this = $.scrollPage; var cfg = _this.config; var sliceEnd = cfg.currentPageItem;//数组截取开始下标 cfg.pageNo--;//页码加一 cfg.currentPageItem = cfg.pageNo*cfg.pageItem; var sliceStart = cfg.currentPageItem;//数组截取开始下标 return cfg.pageData.slice(sliceStart,sliceEnd); }, /** * 监听页面滚动事件 */ listener:function (){ var _this = $.scrollPage; var cfg = _this.config; //var _canStart = _this._canStartLoadData();//是否可以开始加载 var _canStart = _this.isPageBottom();//是否滚动到页面底部 if(_canStart){ showMyLoading(); _this._startLoad(_this._endLoad);//开始加载 } return _this; }, /** * 开始加载数据 */ _startLoad:function (callback){ var _this = $.scrollPage; var cfg = _this.config; cfg.dataLoding = true;//正在加载数据 var _loadData = _this.getNext();//要加载的数据 for(var i in _loadData){ _this._addRow(_loadData[i]);//添加行 } if(callback) callback(); }, /** * 添加行 */ _addRow:function (_pageData){ var _this = $.scrollPage; var cfg = _this.config; $('#content').treegrid('append',{ parent: 0, // 这里指定父级标识就可以了 data: [_pageData] }); _this._interlaceRow();//隔行变色 }, /** * 加载结束 */ _endLoad:function (){ var _this = $.scrollPage; var cfg = _this.config; cfg.dataLoding = false; cfg.canStartLoadData = false; setTimeout(function (){ closeLoading(); },2000); return _this; }, /** * 是否可以开始加载数据 */ _canStartLoadData:function (){ var _this = $.scrollPage; var cfg = _this.config; var scrollPos = _this._scrollPosition(); }, /** * 页面滚动到哪个地方了 */ _scrollPosition:function (){ var _this = $.scrollPage; var cfg = _this.config; var scrTop = $("body").scrollTop();//页面的滚动高度 return scrTop; }, /** * 判断页面是否滚动到底部 */ isPageBottom:function () { var scrollTop = 0; var clientHeight = 0; var scrollHeight = 0; /* if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } */ scrollTop = $(document).scrollTop(); /* if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; } else { clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; } */ clientHeight = $(document).height(); // 知识点:Math.max 比较大小,取最大值返回 scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); if (scrollTop + clientHeight == scrollHeight) { return true; } else { return false; } }, _interlaceRow : function(){ var allRows = $(".datagrid-row:odd"); allRows.css("background-color","rgb(224, 232, 255)");//隔行变色 } }); })(window,jQuery);
相关推荐
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 ...
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 ...
--我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这是默认属性)。 +PageManager的实例方法AddAjaxUpdateControl改名为...
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 ...
2.2 配置使用ext js库 / 35 2.3 编写“hello world”程序 / 37 2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 2.6 关于字体 / 42 2.7 ext js 4语法 / 42 2.8 本地化 / 60 2.9 为本书示例准备...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 ...
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 ...
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 ...
该函数库实现了基本的解释器,它有一套实现变量、流程控制和过程的核心脚本命令,而且还有一组用来存取操作系统服务以运行其他程序、存取文件系统和使用网络套接字的命令。Tcl和Tk提供了一台可以在UNIX、Windows和...