由于我们公司的产品涉及到很多的表格数据显示，而且每张表的字段数都很多，在工作过程中(几任同仁的努力)，整合出一套自认为较为轻巧的方案。如图：
其中涉及到的插件主要有：
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 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 = $('');
// add in the previous and next buttons
$pager.append(renderbutton('|// 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 startpoint = 1;
}
// loop thru visible pages and render buttons
for (var page = startpoint; page var currentbutton = $('' + (page) + '');
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('共' + pagecount + 页);
// if (rowcount != undefined) {
// $pager.append('共' + rowcount + 条记录，最多显示600条);
// }
if (rowcount != undefined) {
$pager.append(' ' + rowcount + '条记录 ');
}
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 = $('' + buttonlabel + '');
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 == |pagenumber }
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 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);
}