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);
}
相关文章
|
4月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
30 0
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
62 0
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
38 0
|
4月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
4月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
4月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
30 0
|
5月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
5月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
33 1
|
5月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
60 1
|
6月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
27 0