jQuery数据显示插件整合实现代码


Posted in Javascript onOctober 24, 2011
显示表格数据会涉及到一些东西,如字段显示隐藏,数据状态,分页之类。

由于我们公司的产品涉及到很多的表格数据显示,而且每张表的字段数都很多,在工作过程中(几任同仁的努力),整合出一套自认为较为轻巧的方案。如图:jQuery数据显示插件整合实现代码

其中涉及到的插件主要有:
jQuery.columnmanager.expand.js(扩展columnmanager)
jQuery.dropbox.js(自已写的)
jQuery.pager.expand.js(扩展pager) 
jQuery.cookie.js
 其中pager.expand.js,dropbox.js以及各插件间的整合在common.js里,代码如下:

//定义全局命名空间 
var GLOBAL = {}; 
GLOBAL.Namespace = function(str) { 
var arr = str.split("."), o = GLOBAL; 
for (var i = (arr[0] == 'GLOBAL') ? 1 : 0; i < arr.length; i++) { 
o[arr[i]] = o[arr[i]] || {}; 
o = o[arr[i]]; 
} 
} 
GLOBAL.Namespace("zyh"); 
/* 
****************************************************************** 
jQuery.pager 
****************************************************************** 
*/ 
(function($) { 
$.fn.pager = function(options) { 
var opts = $.extend({}, $.fn.pager.defaults, options); 
return this.each(function() { 
// empty out the destination element and then render out the pager with the supplied options 
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback, options.rowcount)); 
// specify correct cursor activity 
//$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; }); 
}); 
}; 
// render and return the pager with the supplied options 
function renderpager(pagenumber, pagecount, buttonClickCallback, rowcount) { 
// setup $pager to hold render 
var $pager = $('<ul class="pages"></ul>'); 
// add in the previous and next buttons 
$pager.append(renderButton('|<', pagenumber, pagecount, buttonClickCallback)).append(renderButton('<<', pagenumber, pagecount, buttonClickCallback)); 
// pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases 
var startPoint = 1; 
var endPoint = 6; 
if (pagenumber > 3) { 
startPoint = pagenumber - 3; 
endPoint = pagenumber + 3; 
} 
if (endPoint > pagecount) { 
startPoint = pagecount - 5; 
endPoint = pagecount; 
} 
if (startPoint < 1) { 
startPoint = 1; 
} 
// loop thru visible pages and render buttons 
for (var page = startPoint; page <= endPoint; page++) { 
var currentButton = $('<li class="page-number">' + (page) + '</li>'); 
page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); }); 
currentButton.appendTo($pager); 
} 
// render in the next and last buttons before returning the whole rendered control back. 
$pager.append(renderButton('>>', pagenumber, pagecount, buttonClickCallback)).append(renderButton('>|', pagenumber, pagecount, buttonClickCallback)); 
$pager.append('<li class="pgNone">共' + pagecount + "页</li>"); 
// if (rowcount != undefined) { 
// $pager.append('<li class="pgNone">共' + rowcount + "条记录,最多显示600条</li>"); 
// } 
if (rowcount != undefined) { 
$pager.append('<li class="pgText"> ' + rowcount + '条记录 </li>'); 
} 
return $pager; 
} 
// renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button 
function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) { 
var $Button = $('<li class="pgNext">' + buttonLabel + '</li>'); 
var destPage = 1; 
// work out destination page for required button type 
switch (buttonLabel) { 
case "|<": 
destPage = 1; 
break; 
case "<<": 
destPage = pagenumber - 1; 
break; 
case ">>": 
destPage = pagenumber + 1; 
break; 
case ">|": 
destPage = pagecount; 
break; 
} 
// disable and 'grey' out buttons if not needed. 
if (buttonLabel == "|<" || buttonLabel == "<<") { 
pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); 
} 
else { 
pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); 
} 
return $Button; 
} 
// pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version 
$.fn.pager.defaults = { 
pagenumber: 1, 
pagecount: 1 
}; 
})(jQuery); 
/* 
================================================================ 
//组件功能:鼠标移上指定目标弹出下拉框 -- by flowerszhong 
//参数说明: 
//target:事件对象Id 
//box:下拉框Id 
//left:以事件对象最上的坐标左偏移量,默认为0; 
//top:以事件对象最上的坐标上偏移量,默认为事件对象的高度 
//overClass:当前状态表格行保持高亮样式 
//on:弹出框是否有箭头 
//arrow:自动调节的指向箭头 
================================================================ 
*/ 
var dropbox = function(target, box, left, top, overClass, on, hasArrow) { 
var obj, b, p; 
if (typeof target == "object") 
obj = $(target); 
else 
obj = $("#" + target); 
if (typeof box == "object") 
b = $(box); 
else 
b = $("#" + box); 
p = obj.parent(); 
if (top == "undefined") top = obj.height(); 
var defaults = { 
l: left || 0, 
t: top || 0, 
overClass: overClass || "", 
on: on || "", 
hasArrow: hasArrow || "" 
}, 
offset = obj.offset(), 
w = $(window).height(), 
selectSet = function(flag) { 
//在IE6中,防止select控件遮罩下拉框 
if ($.browser.msie && $.browser.version == "6.0") { 
if (flag) { 
$("select").css("visibility", "visible"); 
} else { 
$("select").css("visibility", "hidden"); 
} 
} 
}; 
$(window).resize(function() { 
w = $(window).height(); 
offset = obj.offset(); 
}); 
$("#arrow").click(function() { 
offset = obj.offset(); 
}); 
//绑定mouseover事件 
obj.bind("mouseover", function() { 
var diff, arrow, scrollTop; 
scrollTop = $(window).scrollTop(); 
diff = w - (offset.top - scrollTop); 
if (on && diff < 145) { 
var subTop = 145 - diff; 
b.css({ "display": "block", "left": offset.left + defaults.l + "px", "top": offset.top + defaults.t - subTop + "px" }); 
if (hasArrow) { 
arrow = b.children("div")[0]; 
var arrTop = 35 + subTop; 
$(arrow).css("top", arrTop); 
} 
} else { 
b.css({ "display": "block", "left": offset.left + defaults.l + "px", "top": offset.top + defaults.t + "px" }); 
if (hasArrow) { 
arrow = b.children("div")[0]; 
$(arrow).css("top", "35px"); 
} 
} 
b.bind("mouseover", function(event) { 
$(this).show(); 
selectSet(false); 
if (overClass) { p.addClass(overClass); } 
event.stopPropagation(); //阻止事件冒泡 
}); 
b.bind("mouseout", function(event) { 
$(this).hide(); 
selectSet(true); 
if (overClass) { p.removeClass(overClass); } 
event.stopPropagation(); //阻止事件冒泡 
}); 
if (overClass) { p.addClass(overClass); } 
selectSet(false); 
}); 
//绑定mouseout事件 
obj.bind("mouseout", function() { 
b.css("display", "none"); 
selectSet(true); 
if (overClass) { p.removeClass(overClass); } 
}); 
//debugger; 
}; 
GLOBAL.zyh.dropbox = dropbox; 
/* 
================================================================ 
//功能:Toggle Column 表格自定义列通用方法,基于jquery.columnmanager组件,GLOBAL.zyh.dropbox组件 
//参数说明: 
//targetTable:表格Id 
//columnManagerArgument:jquery.columnmanager需要参数 
//btnSetColumn: 
//targetfive: 
//left: 0 
//top: 0 
================================================================ 
*/ 
GLOBAL.zyh.toggleTableColumn = function(options) { 
var defaults = { 
targetTable: '', 
columnManagerArgument: {}, 
btnSetColumn: '', 
targetfive: '', 
left: 0, 
top: 0 
} 
var settings = $.extend({}, defaults, options); 
$('#' + settings.targetTable).columnManager(settings.columnManagerArgument); 
GLOBAL.zyh.dropbox(settings.btnSetColumn, settings.targetfive, settings.left, settings.top); 
}
Javascript 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
javascript hashtable实现代码
Oct 13 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 #Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 #Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 #Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 #Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 #Javascript
css值转换成数值请抛弃parseInt
Oct 24 #Javascript
更优雅的事件触发兼容
Oct 24 #Javascript
You might like
3
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
js验证表单大全
2006/11/25 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
Vue指令指令大全
2019/02/09 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
植树造林的宣传标语
2014/06/23 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
接待员岗位职责范本
2015/04/15 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL