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

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

其中涉及到的插件主要有:

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(visibilityvisible);
            } 
else {
                $(
select).css(visibilityhidden);
            }
        }
    };
    $(window).resize(
function() {
        w 
= $(window).height();
        offset 
= obj.offset();
    });
    $(
#arrow).click(function() {
        offset 
= obj.offset();
    });
    
//绑定mouseover事件
    obj.bind(mouseoverfunction() {
        
var diff, arrow, scrollTop;
        scrollTop 
= $(window).scrollTop();
        diff 
= w  (offset.top  scrollTop);
        
if (on && diff < 145) {
            
var subTop = 145  diff;
            b.css({ 
displayblockleft: offset.left + defaults.l + pxtop: offset.top + defaults.t  subTop + px });
            
if (hasArrow) {
                arrow 
= b.children(div)[0];
                
var arrTop = 35 + subTop;
                $(arrow).css(
top, arrTop);
            }
        } 
else {
            b.css({ 
displayblockleft: offset.left + defaults.l + pxtop: offset.top + defaults.t + px });
            
if (hasArrow) {
                arrow 
= b.children(div)[0];
                $(arrow).css(
top35px);
            }
        }
        b.bind(
mouseoverfunction(event) {
            $(
this).show();
            selectSet(
false);
            
if (overClass) { p.addClass(overClass); }
            event.stopPropagation();  
//阻止事件冒泡
        });
        b.bind(
mouseoutfunction(event) {
            $(
this).hide();
            selectSet(
true);
            
if (overClass) { p.removeClass(overClass); }
            event.stopPropagation();  
//阻止事件冒泡
        });
        
if (overClass) { p.addClass(overClass); }
        selectSet(
false);
    });
    
//绑定mouseout事件
    obj.bind(mouseoutfunction() {
        b.css(
displaynone);
        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);
}

版权声明:本文为flowerszhong原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/flowerszhong/archive/2011/06/08/2075051.html