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