/**
* @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);
easyui treegrid 封裝（不用分頁，用加載更多按鈕）延遲加載加加載更多
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章