首页 > 代码库 > easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多
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); }, //加载成功后 onl oadSuccess: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 = http://www.mamicode.com/$.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 = http://www.mamicode.com/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);
easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。