zoukankan      html  css  js  c++  java
  • jquery 表格插件 (奇偶行不同色,鼠标滑过变色,点击变色,双击动作,改变列宽) 半原创

          参考tablegrid和resize两个插件,写到现在的插件,希望多多交流,直接上代码
          第一次写插件,大家多多拍砖,我家房子就有望了~~~
      1/*
      22009-7-3修改
      3作者:Allen
      4版权没有,随便使用
      5参考自tablegrid和tableresizer
      6功能
      7    1,奇偶行不同色,鼠标滑过颜色效果,点击高亮
      8    2,列宽可拖动
      9    3,双击事件,在每行第一列取a的href值
     10*/

     11(function($) {
     12
     13$.fn.tablegrid = function(options){
     14    $.fn.tablegrid.defaults = {
     15        oddColor   : '#C4E1FF',
     16        evenColor  : '#F2F9FD',
     17        overColor  : '#C7C7E2',
     18        selColor   : '#336666',
     19        useClick   : true,
     20        useDblClick:false,
     21        col_border : "solid 1px #B9B4A1"
     22    }
    ;
     23    var opts = $.extend({}, $.fn.tablegrid.defaults, options);
     24    
     25    //拖动列宽
     26    var resize_columns = function(root)
     27    {                   
     28        var tbl = root.children("table");    //找到table
     29        var tr  = tbl.find("tr:first");   //找到第一行
     30        var header,newwidth;
     31        var resize = false;
     32        
     33        root.width(tbl.width()); //table的宽度
     34        tr.children("th").css("border-right",opts.col_border);  //给第一行的th加上一个css
     35        var left_pos = root.offset().left;
     36    
     37        endresize = function()
     38        {
     39            if(resize == true && header != null)
     40            {
     41                document.onselectstart=new Function ("return true");
     42                resize = false;
     43                root.children("table").css("cursor","");
     44            }
       
     45        }
    ;
     46        
     47        tbl.mousemove(function(e)
     48        {
     49            var left = (e.clientX - left_pos);
     50    
     51            if(resize)
     52            {
     53                var width = left - (header.offset().left - left_pos)
     54                    - parseInt(header.css("padding-left"))
     55                    - parseInt(header.css("padding-right"));
     56    
     57                if(width > 1)
     58                {
     59                    var current_width = header.width();
     60                    if(width > current_width)
     61                    {
     62                        var total = root.width() + ((width - header.width()));
     63                        root.width(total);
     64                        header.width(width);
     65                    }

     66                    else
     67                    {
     68                        header.width(width);
     69                        if(header.width() == width)
     70                        {
     71                            var total = root.width() + ((width - current_width));
     72                            root.width(total);
     73                        }

     74                    }

     75                    newwidth = width;
     76                }

     77            }

     78            else
     79            {
     80                if(e.target.nodeName == "TH")
     81                {
     82                    var tgt = $(e.target);
     83                    var dosize = (left-(tgt.offset().left-left_pos) 
     84                        > tgt.width()-4);
     85                    $(this).css("cursor",dosize?"col-resize":"");
     86                }

     87            }
                       
     88        }
    );
     89        
     90        tbl.mouseup(function(e) 
     91        {
     92            endresize();
     93        }
    );
     94                
     95        tbl.bind("mouseleave",function(e)
     96        {
     97            endresize();
     98            return false
     99        }
    );
    100        
    101        tr.mousedown(function(e) 
    102        {
    103            if(e.target.nodeName == "TH" 
    104                && $(this).css("cursor"==  "col-resize")
    105            {
    106                header = $(e.target);                    
    107                resize = true;
    108                document.onselectstart=new Function ("return false");
    109            }
        
    110            return false;
    111        }
    );
    112        
    113        tr.bind('mouseleave',function(e)
    114        {
    115            if(!resize)
    116                root.children("table").css("cursor","");
    117        }
    );
    118    }
    ;
    119    
    120    return this.each(function() {
    121        var root = $(this).wrap("<div class='roottbl' />").parent();
    122        resize_columns(root);
    123        
    124        //奇偶行上色
    125        $(this).find('tr:odd > td').css('backgroundColor', opts.oddColor);
    126        $(this).find('tr:even > td').css('backgroundColor', opts.evenColor);        
    127        
    128        $(this).find('tr').each(function(){
    129            //--------------------------------------this为tr------------------------------------------
    130            this.origColor = $(this).find('td').css('backgroundColor');    //未点击时的颜色
    131            this.clicked = false;   //初始状态,设置bool变量clicked,以click事件触发此变量的true or false
    132            if (opts.useClick) {
    133                $(this).click(function(){  //此处的this是tr
    134                    if (this.clicked) {
    135                        $(this).find('td').css('backgroundColor'this.origColor);
    136                        this.clicked = false;
    137                    }
     else {
    138                        $(this).find('td').css('backgroundColor', opts.selColor);
    139                        this.clicked = true;
    140                    }

    141                    //$(this).find('td > input[@type=checkbox]').attr('checked', this.clicked);
    142                }
    );
    143            }

    144            //鼠标滑过及滑出事件
    145            $(this).mouseover(function(){
    146                $(this).find('td').css('backgroundColor', opts.overColor);
    147            }
    );
    148            $(this).mouseout(function(){
    149                if (this.clicked) {
    150                    $(this).find('td').css('backgroundColor', opts.selColor);
    151                }
     else {
    152                    $(this).find('td').css('backgroundColor'this.origColor);
    153                }

    154            }
    );
    155            
    156            //双击事件
    157            if (opts.useDblClick)
    158            {
    159                var urls=$(this).children("td:first-child").find("a").attr("href");
    160                $(this).dblclick(function(){
    161                    window.open (urls,'详细情况','height=540,width=1020,top=10,left=10,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no')
    162                }
    );
    163            }

    164            //--------------------------------------this为tr------------------------------------------
    165        }
    );
    166    }
    );
    167}
    ;
    168}
    )(jQuery);

    说明文档我就不放了,放出来是为了交流和希望有高手指点改进
    看懂了的话自然就会用
    DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
    哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
    http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm
  • 相关阅读:
    Javac配置环境变量01
    jmeter压测学习-发soap请求测试webservice
    Faker 安装与介绍
    docker使用nginx部署spring项目
    Linux查看端口占用情况
    Cesium 中两种添加 model 方法的区别
    Cesium 动态更换模型贴图方法
    Node.js API 学习笔记
    一步步建立 Vue + Cesium 初始化项目
    python3 解析 base64 数据
  • 原文地址:https://www.cnblogs.com/bestfc/p/1527618.html
Copyright © 2011-2022 走看看