当前位置: 代码迷 >> 综合 >> easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多
  详细解决方案

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

热度:38   发布时间:2024-01-21 13:57:10.0
/*** @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*768var 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?";//初始化加载urlthis.paramLoadUrl = "/queryList.do?";//参数加载urlthis.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();//设置分页barthis.changeGridStyle();//自定义样式},/***带参数加载 */paramLoad:function (data){$('#content').treegrid('loadData',data);//渲染数据this.gridPagination();//设置分页barthis.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;//鼠标点击了哪一行//动态设置展开查询的urlvar 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);

 

 

  相关解决方案