easyui treegrid 封装（不用分页，用加载更多按钮）延迟加载加加载更多

/**
 * @author wsf数据加载
 */
;
var intervalId = null;
(function (win,$){
	$.myCache = {
			dataCache : {},//数据缓存
			domOperCache:{}//dom操作缓存
	}
	/**
	 * js执行时间测试
	 */
	function test(fn,param){
		var s,d;
		s = new Date().getTime();
		fn(param);
		d = new Date().getTime();
		console.log('程序耗时：' + (d-s)/1000 + '秒');
	}
	/**
	 * 检测屏幕分辨率
	 */
	function screenWH() {  
		  var w=screen.width;
		  var h=screen.height;
		  return {sw:w,sh:h};
	}  
	/**
	 * 自定义加载方法
	 */
	$.myLoader = function (){
		var swh = screenWH();//计算屏幕分辩率
		var is1024 = swh.sw == 1024;//是否是1024*768
		var w = ((swh.sw - 280)/6)-10;//计算过后的宽度
		this.page = "1";//初始分页参数
		this.rows = "50";//初始分页参数
		this.paramSearchPage = "1";//带参数查询分页
		this.paramSearchRows = "5";//带参数查询分页
		this.prevLoadPage = "1";//预先加载分页
		this.prevLoadRows = "5";//预先加载分页
		this.defaultLoadUrl = "/queryListLazy.do?";//初始化加载url
		this.paramLoadUrl = "/queryList.do?";//参数加载url
		this.searchType = "default";//默认为无参数搜索
		this.columns = [
					        {field:'FULLNAME',title:"客户全称",width:280,sortable:true},
					        {field:'SHORTNAME',title:'客户简称',width:w,sortable:true},
					        {field:'ECNNAME',title:'经济类型',width:w},
					        {field:'IDYNAME',title:'行业分类',width:w},
					        {field:'ZONNZME',title:'国家',width:w},
					        {field:'PROVNAME',title:'地区',width:w},
					        {field:'FN_DT',title:'成立日期',width:w},
					        {field:'HIGHTLIGHT',title:'是否高亮',hidden:true},
					        {field:'INST_ICN_NM',title:'logo名',hidden:true},
					        {field:'MAIN_BSN_MKT_LOT',title:'行业排名',hidden:true},
					        {field:'LGL_RPRT_NM',title:'董事长',hidden:true},
					        {field:'SNR_MGR_NM',title:'总经理',hidden:true}
					]
	}
	/**
	 * 原型对象
	 */
	$.myLoader.prototype = {
			constructor:$.myLoader,//构造函数
			/**
			 * 公共渲染方法
			 */
			commonRender:function (data,flag){
				var that = this;//防止this转变
				$("#content").treegrid({
					//pagination:true,
					animate:true,
					collapsible:true,
					fitColumns:true,
					idField:'id',
					treeField:'FULLNAME',
					columns:[that.columns],
					//展开前
					onBeforeExpand:function (row){
						that.gridBeforeExpand.apply(that,arguments);
					},
					//展开后
					onExpand:function (row){
						that.gridExpanded.apply(that,arguments);
					},
					//加载成功后
					onLoadSuccess:function (row,data){
						that.gridLoadSuccess.apply(that,arguments);
					},
					//双击行
					onDblClickRow:function (){
						that.dbClickRow.apply(that,arguments);
					}
				});
				
				$('#content').treegrid('loadData',data);//渲染数据
				if(typeof flag == 'boolean'){
				}
			},
			/**
			 * 初始进来加载
			 */
			defaultLoad:function (data){
				this.commonRender(data,true);
				this.gridPagination();//设置分页bar
				this.changeGridStyle();//自定义样式
			},
			/**
			 *带参数加载 
			 */
			paramLoad:function (data){
				$('#content').treegrid('loadData',data);//渲染数据
				this.gridPagination();//设置分页bar
				this.changeGridStyle();//自定义样式
			},
			/**
			 * 动态添加行
			 */
			addRow:function (){
				var s,e;
				s = new Date().getTime();
				var that = this;
				var flag = this.searchType == "default";
				var _rowd = null;
				if(!flag){
					_rowd = that.getParamSearchPageData();//有参数搜索
				}else{
					_rowd = that.getPreLoadPageData();//无参数搜索
				}
				var i = 0 ,len = _rowd.length;
				if(len>0){
					showNoImgMyLoading();
					that.timeid = setTimeout(function (){
						do{
							var row = _rowd[i++];
							var parentid = row._parentId;//父节点
							$('#content').treegrid('append',{
								parent:parentid,
								data:[row]
							});//添加行
							if(i==len-1){
								e = new Date().getTime();
								console.log('程序耗时：' + (e-s)/1000 + '秒');
							}
						}while(i<len);
						that.afterAppendRow.apply(that,arguments);
					},100);
				}
			},
			/**
			 * 添加行
			 */
			appendRow:function (){
				
			},
			/**
			 * 改变默认图标(添加行后)
			 */
			afterAppendRow:function (){
				clearTimeout(this.timeid);
				closeLoading();
				var flag = (this.searchType == "default") && (this.rows/this.prevLoadRows == this.prevLoadPage);
				if(flag)
				   this.prevLoad();//预先加载
			},
			/**
			 * 获得预先加载分页数据
			 */
			getPreLoadPageData:function (){
				var rowData = $.myCache.dataCache["preLoadData"].rows;
				var page  = this.prevLoadPage;
				var pageSize = this.prevLoadRows;
				var start = page*pageSize-pageSize;
				var end = start+pageSize*1;
				this.prevLoadPage++;
				return rowData.slice(start,end);
			},
			/**
			 * 带参数分页（前台）
			 */
			getParamSearchPageData:function (){
				var _d = $.myCache.dataCache["paramData"].rows;
				var page = this.paramSearchPage;//当前页
				var pageSize = this.paramSearchRows;
				var start = page*pageSize-pageSize;
				var end = start+pageSize*1;
				this.paramSearchPage++;
				return _d.slice(start,end);
			},
			/**
			 * grid展开事件
			 */
			gridBeforeExpand:function (){
				var row = arguments[0];
				var _event = event||widow.event;
				var _target = _event.target||_event.srcElement;
				var _tr = $(_target).parents("tr");
				var isOpended = this.getDomOperCache(row.id);
				if(typeof isOpended != 'undefined'){
				}else{
					this.expandTar = _tr;//鼠标点击了哪一行
					//动态设置展开查询的url
					var url = "/citics.crm/customerwidget/queryListLazy.do?parentId="+row.id;
					$("#content").treegrid("options").url = url;
				}
				return true;
			},
			/**
			 * grid展开后事件
			 */
			gridExpanded:function (){
				var row = arguments[0];
				var _tr = this.expandTar;
				var isOpended = this.getDomOperCache(row.id);
                if(typeof isOpended != 'undefined'){
				}else{
					//this.changeTreeIcon(_tr.next());//修改icon小图标
					this.setDomOperCache(row.id,"alreadyOpened");//已经点开过
				}
			},
			/**
			 * 设置分页控件
			 */
			gridPagination:function (){
				var that = this;
				//设置分页控件  
			    var page = $('#content').treegrid('getPager');  
			    var opts = $('#content').treegrid('options'); 
			    $(page).pagination({  
			        pageSize: 10,//每页显示的记录条数，默认为10  
			        pageList: [5,10,15],//可以设置每页记录条数的列表  
			        beforePageText: '第',//页数文本框前显示的汉字  
			        afterPageText: '页    共 {pages} 页',  
			        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
			        onBeforeRefresh:function(){ 
			        },
					onSelectPage: function (pageNumber, pageSize) { 
						opts.pageNumber = pageNumber;  
		                opts.pageSize = pageSize;  
						that.page = pageNumber;//更新当前页
		                that.loader({page:pageNumber+"",rows:that.rows+""},0,true);
		            }
			    }); 
			},
			/**
			 * 前台分页
			 */
			pagerFilter:function (data){
				var data = arguments[0];
	            var dg = $(this);  
				var state = dg.data('treegrid');
	            var opts = dg.treegrid('options');  
	            var pager = dg.treegrid('getPager');  
	            pager.pagination({  
	                onSelectPage:function(pageNum, pageSize){  
	                    opts.pageNumber = pageNum;  
	                    opts.pageSize = pageSize;  
	                    pager.pagination('refresh',{  
	                        pageNumber:pageNum,  
	                        pageSize:pageSize  
	                    });  
	                    dg.treegrid('loadData',data);  
	                }  
	            });  
	            if (!data.topRows){  
	            	data.topRows = [];
	            	data.childRows = [];
	            	for(var i=0; i<data.rows.length; i++){
	            		var row = data.rows[i];
	            		row._parentId ? data.childRows.push(row) : data.topRows.push(row);
	            	}
					data.total = (data.topRows.length);
	            }  
	            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);  
	            var end = start + parseInt(opts.pageSize);  
				data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));
				return data;
			},
			/**
			 * grid加载完成后
			 */
			gridLoadSuccess:function (){
			},
			/**
			 * 添加dom操作缓存
			 * @param dom
			 * @param flag
			 */
			setDomOperCache:function (dom,flag){
				var _cache = $.myCache.domOperCache;
				_cache[dom] = flag;
			},
			/**
			 * 获取dom操作缓存
			 * @param dom
			 * @param flag
			 */
			getDomOperCache:function (dom){
				var _cache = $.myCache.domOperCache;
				return _cache[dom];
			},
			/**
			 * 自定义修改grid样式
			 */
			changeGridStyle:function (){
				this.changeGridHead();//改变表头样式
				this.changeGridFooter();//表脚样式
				if(typeof G_LIST == "boolean"){
					//搜索列表（固定表头）
					this.fixTh();//锁定表头
					this.fixTbody();//锁定表体
				}
				//hightSearchedTr();//高亮显示与搜索条件相关的tr
			},
			/**
			 * 改变表头样式
			 */
			changeGridHead:function (){
				var gridHead = $(".datagrid-header");
				var gridHeadInner = $(".datagrid-header-inner");
				//grid头
				gridHead.css({
					'background-image' : 'none',
					'background-color' : '#ccddff',
					'font-weight' : '900',
					"border-left":"1px solid lightblue",
					"border-right":"1px solid lightblue",
					"border-top":"1px solid lightblue"
				});
				gridHeadInner.css('background-color','#ccddff');
			},
			/**
			 * 改变表脚样式
			 */
			changeGridFooter:function (){
				var gridFooter = $(".pagination");
				//grid表脚
				gridFooter.css({
					'background-image' : 'none',
					'background-color' : '#ccddff',
				});
			},
			/**
			 * 改变grid样式（表体）
			 */
			changeGridBody:function () {
				$("td").css({
					"border-right":"none",
					"border-bottom":"1px dotted lightblue"
				});
				$(".datagrid-body,.datagrid-wrap").css({
					"border-color":"lightblue",
					"border-bottom":"none",
					"border-top":"none",
				});
				$("#expandBtn").click();//默认收起tree
			},
			/**
			 * 设置grid高度
			 */
		    resizeGrid:function (){
				var _h = $(".datagrid-body > table > tbody > tr").filter(".datagrid-row").length*25;//
				$(".datagrid-wrap,.datagrid-view").height(_h);
			},
			/**
			 * 自定义tree图标
			 */
			/*
			changeTreeIcon:function (tar){
				var folder,file;
				if(!tar){
					//整个表格
					folder = $(".tree-folder");
				    file = $(".tree-file");
				}else{
					//指定行
					folder = tar.find(".tree-folder");
					file = tar.find(".tree-file");
					
				}
				folder.css({
					"background-image":"url(/citics.crm/modules/customerwidget/images/user_add.png)",
					"background-position":"0"
				});
				file.css({
					"background-image":"url(/citics.crm/modules/customerwidget/images/user.png)",
					"background-position":"0"
				});
			},*/
			/**
			 * 锁定表头
			 */
			fixTh:function (){
				var th = $(".datagrid-header");//表头
				var _top = $("#headWraper").height();
				setTimeout(function (){
					var innerTop = $("#headWraper").height();
					if(_top == innerTop){
						th.css({
							"position":'fixed',
							"top":_top+"px"
						});
					}
				},200);
			},
			/**
			 * 定位grid位置
			 */
			fixTbody:function (){
				$(".datagrid").css("margin-top",($("#headWraper").height()+18)+"px");
			},
			/**
			 * 双击行
			 */
			dbClickRow:function (){
				var row = arguments[0];
				if(row) {
					//客户组件客户双击
					var param = {};
					param["bpno"] = null;
					param["custid"] = row.id;//客户主键
					param["fullName"] = row.FULLNAME;//客户名称
					win.singleViewParam = param;//传入单一视图的参数
					win.open("/citics.crm/modules/customerwidget/singleview/singleview.jsp","_blank");
				}else{
					alert("请选择一行进行修改!");
					return;
				}
			},
			/**
			 * 高亮显示与搜索条件相关的tr
			 */
			hightlightSearchedTr:function (){
				var allTr = $("tr").filter(function (){
					var kids = $(this).children();//最后一列
					var flag = $.trim(kids.filter(":eq(7)").find("div").text()) == "Y";
					return flag;
				});
				allTr.css({
					"font-weight":700,
					"color":"grey"
				});
			},
			/**
			 * 前台处理数据
			 */
			processData:function (data){
				var len = data.total;
				if(len>this.rows){
					data.rows.splice(this.rows);
				}
			},
			//公共调用方法
			loader:function (param,parentId,flag,callback){
				var that = this;//防止this转换
				showMyLoading();
				var _url = (flag?this.defaultLoadUrl:this.paramLoadUrl)+"parentId="+parentId;
				$.ajax({
					url:_url,
					dataType:'json',
					type:"post",
					data:{
						searchParam:JSON.stringify(param)
					},
					success:function (data){
						if(data.total>0){
							if(flag){
								//初始化加载
								that.searchType = "default";//无参数搜索
								$.myCache.dataCache["noParamData"] = data;//缓存数据
								that.defaultLoad(data);
								that.loadAllCustName();//加载所有名称
								that.prevLoad();//预先加载
							}else{
								$.myCache.dataCache["preLoadData"] = undefined;//清空初始化
								$.myCache.dataCache["paramData"] = $.extend(true,{},data);//带参数数据缓存(深度copy)
								$.myCache.dataCache["paramData"].rows.splice(0,that.rows);//删除初始进来的部分
								that.searchType = "param";//带参数搜索
								that.processData(data);//前台处理数据（模拟分页）（只渲染分页指定的条数）
								//条件搜索
								that.paramLoad(data);
							}
							if(data.total>that.rows){
								intervalId = setInterval(function (){
									if(typeof $.myCache.dataCache["preLoadData"] != 'undefined'){
										clearInterval(intervalId);
										$("#loadMoreDiv").show()
									}else{
										$("#loadMoreDiv").hide()
									}
								},500);
							}
							
						}else{
							$('#content').treegrid('loadData',data);//渲染数据
							$("#loadMoreDiv").hide()
						}
						closeLoading();
						if(callback)
							callback();
					},
					error:function (a,b,c){
						alert("加载列表出错："+b);
						closeLoading();
					}
				});
			},
			/**
			 * 预先加载一页
			 */
			prevLoad:function (){
				var searchParam = JSON.stringify({page:(++this.page)+"",rows:this.rows});
				var _url = "/citics.crm/customerwidget/queryListLazy.do?parentId=0&searchParam="+searchParam;
				var that = this;
				$.getJSON(_url,function (data){
					$.myCache.dataCache["preLoadData"] = data;//预先加载缓存数据
					that.prevLoadPage = 1;//预先加载分页(重置)
				})
			},
			/**
			 * 加载所有客户名称（缓存）
			 */
			loadAllCustName:function (){
				$.getJSON("/citics.crm/customerwidget/queryAllCustName.do",function (data){
					$.myCache.dataCache["allName"] = data;//缓存名称数据
				})
			}
			
	}
	
})(window,jQuery);