显示表格数据会涉及到一些东西，如字段显示隐藏，数据状态，分页之类。
由于我们公司的产品涉及到很多的表格数据显示，而且每张表的字段数都很多，在工作过程中(几任同仁的努力)，整合出一套自认为较为轻巧的方案。如图：
其中涉及到的插件主要有：
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>’);
