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) 为 ...
随机推荐
- Error 1937.An error occurred during the installation of assembly...
工具:Installshield 2008 任务: 1. 创建一个 Merge Module 工程, 在 Merge Module 中包含若干 dll, 在安装过程中,dll 会被安装到指定路径. 2 ...
- Eclipse代码自动提示
发现了一个好用的快捷键,不用跳转到源文件就可以看源代码:先按shift键,然后鼠标点击要看的代码,即可.
- Nginx+keepalived实现负载均衡
Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构,它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一,Nginx ...
- PHP中0、空、null和false的总结
php中很多人还不懂php中 0 , '' , null 和 false 之间的区别,这些区别有时会影响到数据判断的正确性和安全性,给程序的测试运行造成很多麻烦.另外在面试题中也会遇到这些问题,如下: ...
- JS获得QQ号码的昵称,头像,生日
这篇文章主要介绍了JS获得QQ号码的昵称,头像,生日的简单实例,有需要的朋友可以参考一下 http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?ui ...
- Websocket协议之握手连接
Websocket协议是为了解决web即时应用中服务器与客户端浏览器全双工通信的问题而设计的,是完全意义上的Web应用端的双向通信技术,可以取代之前使用半双工HTTP协议而模拟全双工通信,同时克服了带 ...
- 4个好用的JS联动选择插件
jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...
- SQL sum case when then else【转】
数据库 t 表 b 表内容 Id Name 胜负 1 张三 胜 2 李四 ...
- 【web安全】第二弹：XSS攻防中的复合编码问题
最近一直在研究XSS的攻防,特别是dom xss,问题慢慢的迁移到浏览器编码解码顺序上去. 今儿被人放鸽子,无奈在KFC看了两个小时的资料,突然有种豁然开朗的感觉. 参考资料先贴出来: 1. http ...
- 【存储器相关】RAM、SRAM、SDRAM、ROM、EPROM、EEPROM、Flash存储器区别
常见存储器概念:RAM.SRAM.SDRAM.ROM.EPROM.EEPROM.Flash存储器可以分为很多种类,其中根据掉电数据是否丢失可以分为RAM(随机存取存储器)和ROM(只读存储器),其中R ...