开发者社区> flowerszhong> 正文

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);
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringBoot2.0 基础案例(10):整合Mybatis框架,集成分页助手插件
一、Mybatis框架 1、mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。
1473 0
jQuery UI Datepicker中文显示
jqueryuifunction [javascript] view plaincopy jQuery UI Datepicker这个用于日期显示很方便而且提供了多种样式,可以从jQuery UI中选择喜欢的样式和jQuery UI组件随意下载js库,如果只是使用datepicker那么选择时之选UI Core和Widgets中的Datepicker,然后选择喜欢的主题,选择版本,下载即可。
981 0
SpringBoot2 配置多数据源,整合MybatisPlus增强插件
本文源码:GitHub·点这里 || GitEE·点这里 一、项目案例简介 1、多数据简介 实际的项目中,经常会用到不同的数据库以满足项目的实际需求。随着业务的并发量的不断增加,一个项目使用多个数据库:主从复制、读写分离、分布式数据库等方式,越来越常见。
2621 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
17729 0
使用 www_fdw 插件向PG/PPAS导入数据
www_fdw 插件支持通过http协议把文本数据导入到PG/PPAS中 RDS PG/PPAS 新版本已经支持通过 www_fdw 下面简单介绍下使用方式 启动http服务 导入数据前,我们需要在文件服务器上启动一个http服务,再把要导入的文本数据放在对应目录 创建 www_fdw 插
3186 0
+关注
flowerszhong
编程语言相关技术专家
149
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载