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);