easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多

Js代码
  1. /** 
  2.  * @author wsf数据加载 
  3.  */  
  4. ;  
  5. var intervalId = null;  
  6. (function (win,$){  
  7.     $.myCache = {  
  8.             dataCache : {},//数据缓存  
  9.             domOperCache:{}//dom操作缓存  
  10.     }  
  11.     /** 
  12.      * js执行时间测试 
  13.      */  
  14.     function test(fn,param){  
  15.         var s,d;  
  16.         s = new Date().getTime();  
  17.         fn(param);  
  18.         d = new Date().getTime();  
  19.         console.log('程序耗时:' + (d-s)/1000 + '秒');  
  20.     }  
  21.     /** 
  22.      * 检测屏幕分辨率 
  23.      */  
  24.     function screenWH() {    
  25.           var w=screen.width;  
  26.           var h=screen.height;  
  27.           return {sw:w,sh:h};  
  28.     }    
  29.     /** 
  30.      * 自定义加载方法 
  31.      */  
  32.     $.myLoader = function (){  
  33.         var swh = screenWH();//计算屏幕分辩率  
  34.         var is1024 = swh.sw == 1024;//是否是1024*768  
  35.         var w = ((swh.sw - 280)/6)-10;//计算过后的宽度  
  36.         this.page = "1";//初始分页参数  
  37.         this.rows = "50";//初始分页参数  
  38.         this.paramSearchPage = "1";//带参数查询分页  
  39.         this.paramSearchRows = "5";//带参数查询分页  
  40.         this.prevLoadPage = "1";//预先加载分页  
  41.         this.prevLoadRows = "5";//预先加载分页  
  42.         this.defaultLoadUrl = "/queryListLazy.do?";//初始化加载url  
  43.         this.paramLoadUrl = "/queryList.do?";//参数加载url  
  44.         this.searchType = "default";//默认为无参数搜索  
  45.         this.columns = [  
  46.                             {field:'FULLNAME',title:"客户全称",width:280,sortable:true},  
  47.                             {field:'SHORTNAME',title:'客户简称',width:w,sortable:true},  
  48.                             {field:'ECNNAME',title:'经济类型',width:w},  
  49.                             {field:'IDYNAME',title:'行业分类',width:w},  
  50.                             {field:'ZONNZME',title:'国家',width:w},  
  51.                             {field:'PROVNAME',title:'地区',width:w},  
  52.                             {field:'FN_DT',title:'成立日期',width:w},  
  53.                             {field:'HIGHTLIGHT',title:'是否高亮',hidden:true},  
  54.                             {field:'INST_ICN_NM',title:'logo名',hidden:true},  
  55.                             {field:'MAIN_BSN_MKT_LOT',title:'行业排名',hidden:true},  
  56.                             {field:'LGL_RPRT_NM',title:'董事长',hidden:true},  
  57.                             {field:'SNR_MGR_NM',title:'总经理',hidden:true}  
  58.                     ]  
  59.     }  
  60.     /** 
  61.      * 原型对象 
  62.      */  
  63.     $.myLoader.prototype = {  
  64.             constructor:$.myLoader,//构造函数  
  65.             /** 
  66.              * 公共渲染方法 
  67.              */  
  68.             commonRender:function (data,flag){  
  69.                 var that = this;//防止this转变  
  70.                 $("#content").treegrid({  
  71.                     //pagination:true,  
  72.                     animate:true,  
  73.                     collapsible:true,  
  74.                     fitColumns:true,  
  75.                     idField:'id',  
  76.                     treeField:'FULLNAME',  
  77.                     columns:[that.columns],  
  78.                     //展开前  
  79.                     onBeforeExpand:function (row){  
  80.                         that.gridBeforeExpand.apply(that,arguments);  
  81.                     },  
  82.                     //展开后  
  83.                     onExpand:function (row){  
  84.                         that.gridExpanded.apply(that,arguments);  
  85.                     },  
  86.                     //加载成功后  
  87.                     onLoadSuccess:function (row,data){  
  88.                         that.gridLoadSuccess.apply(that,arguments);  
  89.                     },  
  90.                     //双击行  
  91.                     onDblClickRow:function (){  
  92.                         that.dbClickRow.apply(that,arguments);  
  93.                     }  
  94.                 });  
  95.                   
  96.                 $('#content').treegrid('loadData',data);//渲染数据  
  97.                 if(typeof flag == 'boolean'){  
  98.                 }  
  99.             },  
  100.             /** 
  101.              * 初始进来加载 
  102.              */  
  103.             defaultLoad:function (data){  
  104.                 this.commonRender(data,true);  
  105.                 this.gridPagination();//设置分页bar  
  106.                 this.changeGridStyle();//自定义样式  
  107.             },  
  108.             /** 
  109.              *带参数加载  
  110.              */  
  111.             paramLoad:function (data){  
  112.                 $('#content').treegrid('loadData',data);//渲染数据  
  113.                 this.gridPagination();//设置分页bar  
  114.                 this.changeGridStyle();//自定义样式  
  115.             },  
  116.             /** 
  117.              * 动态添加行 
  118.              */  
  119.             addRow:function (){  
  120.                 var s,e;  
  121.                 s = new Date().getTime();  
  122.                 var that = this;  
  123.                 var flag = this.searchType == "default";  
  124.                 var _rowd = null;  
  125.                 if(!flag){  
  126.                     _rowd = that.getParamSearchPageData();//有参数搜索  
  127.                 }else{  
  128.                     _rowd = that.getPreLoadPageData();//无参数搜索  
  129.                 }  
  130.                 var i = 0 ,len = _rowd.length;  
  131.                 if(len>0){  
  132.                     showNoImgMyLoading();  
  133.                     that.timeid = setTimeout(function (){  
  134.                         do{  
  135.                             var row = _rowd[i++];  
  136.                             var parentid = row._parentId;//父节点  
  137.                             $('#content').treegrid('append',{  
  138.                                 parent:parentid,  
  139.                                 data:[row]  
  140.                             });//添加行  
  141.                             if(i==len-1){  
  142.                                 e = new Date().getTime();  
  143.                                 console.log('程序耗时:' + (e-s)/1000 + '秒');  
  144.                             }  
  145.                         }while(i<len);  
  146.                         that.afterAppendRow.apply(that,arguments);  
  147.                     },100);  
  148.                 }  
  149.             },  
  150.             /** 
  151.              * 添加行 
  152.              */  
  153.             appendRow:function (){  
  154.                   
  155.             },  
  156.             /** 
  157.              * 改变默认图标(添加行后) 
  158.              */  
  159.             afterAppendRow:function (){  
  160.                 clearTimeout(this.timeid);  
  161.                 closeLoading();  
  162.                 var flag = (this.searchType == "default") && (this.rows/this.prevLoadRows == this.prevLoadPage);  
  163.                 if(flag)  
  164.                    this.prevLoad();//预先加载  
  165.             },  
  166.             /** 
  167.              * 获得预先加载分页数据 
  168.              */  
  169.             getPreLoadPageData:function (){  
  170.                 var rowData = $.myCache.dataCache["preLoadData"].rows;  
  171.                 var page  = this.prevLoadPage;  
  172.                 var pageSize = this.prevLoadRows;  
  173.                 var start = page*pageSize-pageSize;  
  174.                 var end = start+pageSize*1;  
  175.                 this.prevLoadPage++;  
  176.                 return rowData.slice(start,end);  
  177.             },  
  178.             /** 
  179.              * 带参数分页(前台) 
  180.              */  
  181.             getParamSearchPageData:function (){  
  182.                 var _d = $.myCache.dataCache["paramData"].rows;  
  183.                 var page = this.paramSearchPage;//当前页  
  184.                 var pageSize = this.paramSearchRows;  
  185.                 var start = page*pageSize-pageSize;  
  186.                 var end = start+pageSize*1;  
  187.                 this.paramSearchPage++;  
  188.                 return _d.slice(start,end);  
  189.             },  
  190.             /** 
  191.              * grid展开事件 
  192.              */  
  193.             gridBeforeExpand:function (){  
  194.                 var row = arguments[0];  
  195.                 var _event = event||widow.event;  
  196.                 var _target = _event.target||_event.srcElement;  
  197.                 var _tr = $(_target).parents("tr");  
  198.                 var isOpended = this.getDomOperCache(row.id);  
  199.                 if(typeof isOpended != 'undefined'){  
  200.                 }else{  
  201.                     this.expandTar = _tr;//鼠标点击了哪一行  
  202.                     //动态设置展开查询的url  
  203.                     var url = "/citics.crm/customerwidget/queryListLazy.do?parentId="+row.id;  
  204.                     $("#content").treegrid("options").url = url;  
  205.                 }  
  206.                 return true;  
  207.             },  
  208.             /** 
  209.              * grid展开后事件 
  210.              */  
  211.             gridExpanded:function (){  
  212.                 var row = arguments[0];  
  213.                 var _tr = this.expandTar;  
  214.                 var isOpended = this.getDomOperCache(row.id);  
  215.                 if(typeof isOpended != 'undefined'){  
  216.                 }else{  
  217.                     //this.changeTreeIcon(_tr.next());//修改icon小图标  
  218.                     this.setDomOperCache(row.id,"alreadyOpened");//已经点开过  
  219.                 }  
  220.             },  
  221.             /** 
  222.              * 设置分页控件 
  223.              */  
  224.             gridPagination:function (){  
  225.                 var that = this;  
  226.                 //设置分页控件    
  227.                 var page = $('#content').treegrid('getPager');    
  228.                 var opts = $('#content').treegrid('options');   
  229.                 $(page).pagination({    
  230.                     pageSize: 10,//每页显示的记录条数,默认为10    
  231.                     pageList: [5,10,15],//可以设置每页记录条数的列表    
  232.                     beforePageText: '第',//页数文本框前显示的汉字    
  233.                     afterPageText: '页    共 {pages} 页',    
  234.                     displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',    
  235.                     onBeforeRefresh:function(){   
  236.                     },  
  237.                     onSelectPage: function (pageNumber, pageSize) {   
  238.                         opts.pageNumber = pageNumber;    
  239.                         opts.pageSize = pageSize;    
  240.                         that.page = pageNumber;//更新当前页  
  241.                         that.loader({page:pageNumber+"",rows:that.rows+""},0,true);  
  242.                     }  
  243.                 });   
  244.             },  
  245.             /** 
  246.              * 前台分页 
  247.              */  
  248.             pagerFilter:function (data){  
  249.                 var data = arguments[0];  
  250.                 var dg = $(this);    
  251.                 var state = dg.data('treegrid');  
  252.                 var opts = dg.treegrid('options');    
  253.                 var pager = dg.treegrid('getPager');    
  254.                 pager.pagination({    
  255.                     onSelectPage:function(pageNum, pageSize){    
  256.                         opts.pageNumber = pageNum;    
  257.                         opts.pageSize = pageSize;    
  258.                         pager.pagination('refresh',{    
  259.                             pageNumber:pageNum,    
  260.                             pageSize:pageSize    
  261.                         });    
  262.                         dg.treegrid('loadData',data);    
  263.                     }    
  264.                 });    
  265.                 if (!data.topRows){    
  266.                     data.topRows = [];  
  267.                     data.childRows = [];  
  268.                     for(var i=0; i<data.rows.length; i++){  
  269.                         var row = data.rows[i];  
  270.                         row._parentId ? data.childRows.push(row) : data.topRows.push(row);  
  271.                     }  
  272.                     data.total = (data.topRows.length);  
  273.                 }    
  274.                 var start = (opts.pageNumber-1)*parseInt(opts.pageSize);    
  275.                 var end = start + parseInt(opts.pageSize);    
  276.                 data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));  
  277.                 return data;  
  278.             },  
  279.             /** 
  280.              * grid加载完成后 
  281.              */  
  282.             gridLoadSuccess:function (){  
  283.             },  
  284.             /** 
  285.              * 添加dom操作缓存 
  286.              * @param dom 
  287.              * @param flag 
  288.              */  
  289.             setDomOperCache:function (dom,flag){  
  290.                 var _cache = $.myCache.domOperCache;  
  291.                 _cache[dom] = flag;  
  292.             },  
  293.             /** 
  294.              * 获取dom操作缓存 
  295.              * @param dom 
  296.              * @param flag 
  297.              */  
  298.             getDomOperCache:function (dom){  
  299.                 var _cache = $.myCache.domOperCache;  
  300.                 return _cache[dom];  
  301.             },  
  302.             /** 
  303.              * 自定义修改grid样式 
  304.              */  
  305.             changeGridStyle:function (){  
  306.                 this.changeGridHead();//改变表头样式  
  307.                 this.changeGridFooter();//表脚样式  
  308.                 if(typeof G_LIST == "boolean"){  
  309.                     //搜索列表(固定表头)  
  310.                     this.fixTh();//锁定表头  
  311.                     this.fixTbody();//锁定表体  
  312.                 }  
  313.                 //hightSearchedTr();//高亮显示与搜索条件相关的tr  
  314.             },  
  315.             /** 
  316.              * 改变表头样式 
  317.              */  
  318.             changeGridHead:function (){  
  319.                 var gridHead = $(".datagrid-header");  
  320.                 var gridHeadInner = $(".datagrid-header-inner");  
  321.                 //grid头  
  322.                 gridHead.css({  
  323.                     'background-image' : 'none',  
  324.                     'background-color' : '#ccddff',  
  325.                     'font-weight' : '900',  
  326.                     "border-left":"1px solid lightblue",  
  327.                     "border-right":"1px solid lightblue",  
  328.                     "border-top":"1px solid lightblue"  
  329.                 });  
  330.                 gridHeadInner.css('background-color','#ccddff');  
  331.             },  
  332.             /** 
  333.              * 改变表脚样式 
  334.              */  
  335.             changeGridFooter:function (){  
  336.                 var gridFooter = $(".pagination");  
  337.                 //grid表脚  
  338.                 gridFooter.css({  
  339.                     'background-image' : 'none',  
  340.                     'background-color' : '#ccddff',  
  341.                 });  
  342.             },  
  343.             /** 
  344.              * 改变grid样式(表体) 
  345.              */  
  346.             changeGridBody:function () {  
  347.                 $("td").css({  
  348.                     "border-right":"none",  
  349.                     "border-bottom":"1px dotted lightblue"  
  350.                 });  
  351.                 $(".datagrid-body,.datagrid-wrap").css({  
  352.                     "border-color":"lightblue",  
  353.                     "border-bottom":"none",  
  354.                     "border-top":"none",  
  355.                 });  
  356.                 $("#expandBtn").click();//默认收起tree  
  357.             },  
  358.             /** 
  359.              * 设置grid高度 
  360.              */  
  361.             resizeGrid:function (){  
  362.                 var _h = $(".datagrid-body > table > tbody > tr").filter(".datagrid-row").length*25;//  
  363.                 $(".datagrid-wrap,.datagrid-view").height(_h);  
  364.             },  
  365.             /** 
  366.              * 自定义tree图标 
  367.              */  
  368.             /* 
  369.             changeTreeIcon:function (tar){ 
  370.                 var folder,file; 
  371.                 if(!tar){ 
  372.                     //整个表格 
  373.                     folder = $(".tree-folder"); 
  374.                     file = $(".tree-file"); 
  375.                 }else{ 
  376.                     //指定行 
  377.                     folder = tar.find(".tree-folder"); 
  378.                     file = tar.find(".tree-file"); 
  379.                      
  380.                 } 
  381.                 folder.css({ 
  382.                     "background-image":"url(/citics.crm/modules/customerwidget/images/user_add.png)", 
  383.                     "background-position":"0" 
  384.                 }); 
  385.                 file.css({ 
  386.                     "background-image":"url(/citics.crm/modules/customerwidget/images/user.png)", 
  387.                     "background-position":"0" 
  388.                 }); 
  389.             },*/  
  390.             /** 
  391.              * 锁定表头 
  392.              */  
  393.             fixTh:function (){  
  394.                 var th = $(".datagrid-header");//表头  
  395.                 var _top = $("#headWraper").height();  
  396.                 setTimeout(function (){  
  397.                     var innerTop = $("#headWraper").height();  
  398.                     if(_top == innerTop){  
  399.                         th.css({  
  400.                             "position":'fixed',  
  401.                             "top":_top+"px"  
  402.                         });  
  403.                     }  
  404.                 },200);  
  405.             },  
  406.             /** 
  407.              * 定位grid位置 
  408.              */  
  409.             fixTbody:function (){  
  410.                 $(".datagrid").css("margin-top",($("#headWraper").height()+18)+"px");  
  411.             },  
  412.             /** 
  413.              * 双击行 
  414.              */  
  415.             dbClickRow:function (){  
  416.                 var row = arguments[0];  
  417.                 if(row) {  
  418.                     //客户组件客户双击  
  419.                     var param = {};  
  420.                     param["bpno"] = null;  
  421.                     param["custid"] = row.id;//客户主键  
  422.                     param["fullName"] = row.FULLNAME;//客户名称  
  423.                     win.singleViewParam = param;//传入单一视图的参数  
  424.                     win.open("/citics.crm/modules/customerwidget/singleview/singleview.jsp","_blank");  
  425.                 }else{  
  426.                     alert("请选择一行进行修改!");  
  427.                     return;  
  428.                 }  
  429.             },  
  430.             /** 
  431.              * 高亮显示与搜索条件相关的tr 
  432.              */  
  433.             hightlightSearchedTr:function (){  
  434.                 var allTr = $("tr").filter(function (){  
  435.                     var kids = $(this).children();//最后一列  
  436.                     var flag = $.trim(kids.filter(":eq(7)").find("div").text()) == "Y";  
  437.                     return flag;  
  438.                 });  
  439.                 allTr.css({  
  440.                     "font-weight":700,  
  441.                     "color":"grey"  
  442.                 });  
  443.             },  
  444.             /** 
  445.              * 前台处理数据 
  446.              */  
  447.             processData:function (data){  
  448.                 var len = data.total;  
  449.                 if(len>this.rows){  
  450.                     data.rows.splice(this.rows);  
  451.                 }  
  452.             },  
  453.             //公共调用方法  
  454.             loader:function (param,parentId,flag,callback){  
  455.                 var that = this;//防止this转换  
  456.                 showMyLoading();  
  457.                 var _url = (flag?this.defaultLoadUrl:this.paramLoadUrl)+"parentId="+parentId;  
  458.                 $.ajax({  
  459.                     url:_url,  
  460.                     dataType:'json',  
  461.                     type:"post",  
  462.                     data:{  
  463.                         searchParam:JSON.stringify(param)  
  464.                     },  
  465.                     success:function (data){  
  466.                         if(data.total>0){  
  467.                             if(flag){  
  468.                                 //初始化加载  
  469.                                 that.searchType = "default";//无参数搜索  
  470.                                 $.myCache.dataCache["noParamData"] = data;//缓存数据  
  471.                                 that.defaultLoad(data);  
  472.                                 that.loadAllCustName();//加载所有名称  
  473.                                 that.prevLoad();//预先加载  
  474.                             }else{  
  475.                                 $.myCache.dataCache["preLoadData"] = undefined;//清空初始化  
  476.                                 $.myCache.dataCache["paramData"] = $.extend(true,{},data);//带参数数据缓存(深度copy)  
  477.                                 $.myCache.dataCache["paramData"].rows.splice(0,that.rows);//删除初始进来的部分  
  478.                                 that.searchType = "param";//带参数搜索  
  479.                                 that.processData(data);//前台处理数据(模拟分页)(只渲染分页指定的条数)  
  480.                                 //条件搜索  
  481.                                 that.paramLoad(data);  
  482.                             }  
  483.                             if(data.total>that.rows){  
  484.                                 intervalId = setInterval(function (){  
  485.                                     if(typeof $.myCache.dataCache["preLoadData"] != 'undefined'){  
  486.                                         clearInterval(intervalId);  
  487.                                         $("#loadMoreDiv").show()  
  488.                                     }else{  
  489.                                         $("#loadMoreDiv").hide()  
  490.                                     }  
  491.                                 },500);  
  492.                             }  
  493.                               
  494.                         }else{  
  495.                             $('#content').treegrid('loadData',data);//渲染数据  
  496.                             $("#loadMoreDiv").hide()  
  497.                         }  
  498.                         closeLoading();  
  499.                         if(callback)  
  500.                             callback();  
  501.                     },  
  502.                     error:function (a,b,c){  
  503.                         alert("加载列表出错:"+b);  
  504.                         closeLoading();  
  505.                     }  
  506.                 });  
  507.             },  
  508.             /** 
  509.              * 预先加载一页 
  510.              */  
  511.             prevLoad:function (){  
  512.                 var searchParam = JSON.stringify({page:(++this.page)+"",rows:this.rows});  
  513.                 var _url = "/citics.crm/customerwidget/queryListLazy.do?parentId=0&searchParam="+searchParam;  
  514.                 var that = this;  
  515.                 $.getJSON(_url,function (data){  
  516.                     $.myCache.dataCache["preLoadData"] = data;//预先加载缓存数据  
  517.                     that.prevLoadPage = 1;//预先加载分页(重置)  
  518.                 })  
  519.             },  
  520.             /** 
  521.              * 加载所有客户名称(缓存) 
  522.              */  
  523.             loadAllCustName:function (){  
  524.                 $.getJSON("/citics.crm/customerwidget/queryAllCustName.do",function (data){  
  525.                     $.myCache.dataCache["allName"] = data;//缓存名称数据  
  526.                 })  
  527.             }  
  528.               
  529.     }  
  530.       
  531. })(window,jQuery);  

 


你可能感兴趣的:(easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多)