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);
easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多的更多相关文章
- EasyUi TreeGrid封装
礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于Pare ...
- EasyUI treegrid 加载checked
EasyUI treegrid 加载checked $(function () { $('#tbDictContTree').treegrid({ title: '数据字典目录管理', iconCl ...
- easy-ui treegrid 实现分页 并且添加自定义checkbox
首先第一点easy-ui treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的 后台只能先按照 根节点做分页查询 再将子节点关联进去, 这样才能将treegrid 按 ...
- Jquery easyui treegrid实现树形表格的行拖拽
前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- 基于EasyUI Treegrid的权限管理资源列表
1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...
- SpringMVC结合easyUI中datagird实现分页
SpringMVC结合easyUI中datagird实现分页 DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.轻量级,单元格合并.多列标题.冻结列和页脚只是其中 ...
- 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加分页组件
jQuery EasyUI 数据网格 - 添加分页组件 本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid). 创建数据网格(DataGrid) 为 ...
随机推荐
- InstallShield: Component-Feature Associations
Quote from: http://helpnet.installshield.com/installshield16helplib/IHelpFeatAssociateComponents.htm ...
- Custom Action : dynamic link library
工具:VS2010, Installshield 2008 实现功能: 创建一个C++ win32 DLL的工程,MSI 工程需要调用这个DLL,并将Basic MSI工程中的两个参数,传递给DLL, ...
- ThinkPHP3.2 加载过程(一)
加载过程(官方介绍) : 用户URL请求 调用应用入口文件(通常是网站的index.php) 载入框架入口文件(ThinkPHP.php) 记录初始运行时间和内存开销 系统常量判断及定义 载入框架引导 ...
- 关于C#虚函数和构造函数的一点理解
虚函数感觉总是很神秘,在本质的原理上一直也没有弄得很透彻,今天又有一点的新的感悟,纪录下来,有时间的话可以去研究一下C++对象模型 using System; using System.Collect ...
- C#基础(三)—重载与覆盖
所谓重载指的是同一个类中有两个或多个名字相同但是参数不同的方法.重载,必然发生在一个类中,函数名相同,参数类型或者顺序不同构成重载,与返回类型无关. override:过载也称重写是指子类对父类中虚函 ...
- MembershipProvider的Initialize
背景 前几天为公司的登陆写密码校验,因为是老系统的东西了,数据已经存在了,所以我要知道密码的校验规则是啥,然后业务经理告诉我了是用Membership去做的加密,让我自己去看.之后我又去问了技术经理, ...
- linux下tomcat的安装
本文主要内容: (1)安装apr,这是 Apache 为了提升 Tomcat 的性能搞的一套本地化 Socket, Thread, IO 组件也就是说它有高级 IO 功能, 操作系统级别的功能调用, ...
- SQL技术内幕三
Select 分析一个查询实例 Select empid,year(orderdate) as orderYear,count(*) as orderCount From dbo.orderInfo ...
- Starting MySQL.. ERROR! The server quit without updating PID file (/usr/local/mysql/data/localhost.localdomain.pid).
[root@localhost ~]# cd /usr/local/mysql [root@localhost mysql]# chown -R mysql.mysql . [root@loc ...
- poj 1904 King's Quest
King's Quest 题意:有N个王子和N个妹子;(1 <= N <= 2000)第i个王子喜欢Ki个妹子:(详见sample)题给一个完美匹配,即每一个王子和喜欢的一个妹子结婚:问每 ...