用w/jQuery設置表格單元格寬度

我有一張動態繪製的表格。類別標籤以黃色顯示，項目標籤以綠色顯示。

enter image description here

所在的表所在的區域是有限的，所以我需要截斷內使用jQuery插件細胞長標籤。該插件允許使用寬度的數字值或「自動」，但我想添加一些登錄來確定數值應該是什麼。

表格寬度爲700px。我也可以使用jQuery來計算存在多少種類的列。我也可以確定什麼是綠色區域中最寬的標籤。這是我的代碼：

// widest item label (GREEN) 
var w = 0; 
$(".tData tr td:nth-child(1)").each(function(){ 
    if($(this).width() > w){ 
     w = $(this).width(); 
    } 
}); 

// count category columns (YELLOW) 
var colCount = 0; 
$(".tData tr:first th:gt(0)").each(function() { 
    if ($(this).attr("colspan")) { 
     colCount += +$(this).attr("colspan"); 
    } else { 
     colCount++; 
    } 
}); 

var tableWidth = 700, 
    minWidthCat = 30, 
    maxWidthCat = 100, 
    minWidthItem = 100 
    maxWidthItem = 300; 

widthCat = minWidthCat; 
widthItem = minWidthItem; 

catWmin = Math.floor((tWidth - minWidthCard)/colCount); 
catWmax = Math.floor((tWidth - maxWidthCard)/colCount); 

// NEED HELP HERE!!! 
if() { 

} 

// truncate categories 
$(".tData tr:first th:gt(0)").truncate({ 
    width: widthCat 
}); 

// truncate items 
$(".tData tr td:nth-child(1)").truncate({ 
    width: widthItem 
});

需要最有意義的邏輯幫助。如果我不必截斷，我寧願不設置類別列的寬度，但它們必須是所有相同的寬度。

來源

2011-08-30 santa

你想第一列的最長長度_contents_考慮？我應該如何理解這一點？否則，如果你正在尋找行寬，就像從該列中獲取任何行並獲取其寬度一樣簡單 - 這就是表格顯示的方式。 –

不，我可以得到第一列中最長刺的寬度。我認爲，如果我知道它是什麼，它會幫助我確定是否將截斷添加到它。 – santa

然後，你可以簡單地說，設置一些寬度爲列，說

700/columnCount + 1

然後換一個跨度內每個單元格的內容和設置

overflow:none;

所以，內容會得到無論如何都要剪輯。（除非你也想柱後調整，這將幫助不大）

你有沒有使用jqGrid

來源

2011-08-30 19:09:12

我有溢出，但我仍然希望所有類別列的寬度相同，無論它是什麼。它不應該小於minWidthCat值。不，我沒有看過jqGrid。它看起來不錯，但比我在這個項目中需要的複雜得多。 – santa

@santa：這並不複雜。即使是像這樣的小任務。花了不到一個小時才第一次安裝。 –

用w/jQuery設置表格單元格寬度

回答

相關問題