jQuery数据显示插件整合

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

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

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('|&lt;', pagenumber, pagecount, buttonClickCallback)).append(renderButton('&lt;&lt;', 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('&gt;&gt;', pagenumber, pagecount, buttonClickCallback)).append(renderButton('&gt;|', 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">&nbsp;' + rowcount + '条记录&nbsp;</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 "|&lt;":
                destPage 
= 1;
                
break;
            
case "&lt;&lt;":
                destPage 
= pagenumber - 1;
                
break;
            
case "&gt;&gt;":
                destPage 
= pagenumber + 1;
                
break;
            
case "&gt;|":
                destPage 
= pagecount;
                
break;
        }

        
// disable and 'grey' out buttons if not needed.
        if (buttonLabel == "|&lt;" || buttonLabel == "&lt;&lt;") {
            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);
}
上一篇:firefox下input type="file"的size是多大[原]


下一篇:SIGCOMM2019阿里巴巴首次发表两篇主会论文