解决colResizable插件overflow和flex模式单元格最小宽度问题

colResizable

这是一个非常实用的js工具，可以帮助table标签拖动列宽度，我使用的版本是：colResizable-1.6
官方文档和下载地址：colResizable

解决overflow和flex模式下单元格最小宽度

问题：因为单元格宽度自适应，导致第一列成了这样：

而且第一列还不能缩小。

解决办法：修改colResizable.js代码
原因：colResizable.js中对overflow和flex模式增加了单元格自适应的样式：JCLRFlex，现在我们只要去掉配置这个样式的地方即可。

修改代码：
1.注释掉createGrips函数中的部分代码，注释部分如下：

/*
 if(!t.f){
            t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
        }
        */

2.注释掉applyBounds函数中的部分代码，注释部分如下：

    //t.width(t.w = t.width()).removeClass(FLEX);   //prevent table width changes

和

    //t.addClass(FLEX);                     //allow table width changes

修改代码后，我们打开页面可以看到：

而且，列可以拖到很小：

ps:修改后的部分代码：

    /**
     * Function to create all the grips associated with the table given by parameters 
     * @param {jQuery ref} t - table object
     */
    var createGrips = function(t){  

        var th = t.find(">thead>tr:first>th,>thead>tr:first>td"); //table headers are obtained
        if(!th.length) th = t.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td");  //but headers can also be included in different ways
        th = th.filter(":visible");                 //filter invisible columns
        t.cg = t.find("col");                       //a table can also contain a colgroup with col elements     
        t.ln = th.length;                           //table length is stored    
        if(t.p && S && S[t.id])memento(t,th);       //if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
        th.each(function(i){                        //iterate through the table column headers          
            var c = $(this);                       //jquery wrap for the current column        
            var dc = t.dc.indexOf(i)!=-1;           //is this a disabled column?
            var g = $(t.gc.append('<div class="JCLRgrip"></div>')[0].lastChild); //add the visual node to be used as grip
            g.append(dc ? "": t.opt.gripInnerHtml).append('<div class="'+SIGNATURE+'"></div>');
            if(i == t.ln-1){                        //if the current grip is the las one 
                g.addClass("JCLRLastGrip");         //add a different css class to stlye it in a different way if needed
                if(t.f) g.html("");                 //if the table resizing mode is set to fixed, the last grip is removed since table with can not change
            }
            g.bind('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging 

            if (!dc){ 
                //if normal column bind the mousedown event to start dragging, if disabled then apply its css class
                g.removeClass('JCLRdisabledGrip').bind('touchstart mousedown', onGripMouseDown);      
            }else{
                g.addClass('JCLRdisabledGrip'); 
            }

            g.t = t; g.i = i; g.c = c;  c.w =c.width();     //some values are stored in the grip's node data as shortcut
            t.g.push(g); t.c.push(c);                       //the current grip and column are added to its table object
            c.width(c.w).removeAttr("width");               //the width of the column is converted into pixel-based measurements
            g.data(SIGNATURE, {i:i, t:t.attr(ID), last: i == t.ln-1});   //grip index and its table name are stored in the HTML                                                 
        });     
        t.cg.removeAttr("width");   //remove the width attribute from elements in the colgroup 

        t.find('td, th').not(th).not('table th, table td').each(function(){  
            $(this).removeAttr('width');   //the width attribute is removed from all table cells which are not nested in other tables and dont belong to the header
        });     
        /*if(!t.f){
            t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
        }*/
        syncGrips(t);               //the grips are positioned according to the current table layout            
        //there is a small problem, some cells in the table could contain dimension values interfering with the 
        //width value set by this plugin. Those values are removed

    };

 //...

    /**
    * This function updates all columns width according to its real width. It must be taken into account that the 
    * sum of all columns can exceed the table width in some cases (if fixed is set to false and table has some kind 
    * of max-width).
    * @param {jQuery ref} t - table object  
    */
    var applyBounds = function(t){
        var w = $.map(t.c, function(c){            //obtain real widths
            return c.width();
        });
        //t.width(t.w = t.width()).removeClass(FLEX);   //prevent table width changes
        $.each(t.c, function(i,c){
            c.width(w[i]).w = w[i];             //set column widths applying bounds (table's max-width)
        });
        //t.addClass(FLEX);                     //allow table width changes
    };