表格內部的單槓或進度條像功能

任何人都可以想到一種方法，在表格內的特定單元格內（IE行0，列2）具有水平條形圖/進度條。表格內部的單槓或進度條像功能

所以在效果的文字8088874將有一個背景色彩顯示在可視化的方式百分比。

我的設置是ATM ASP.NET 表是由datatables.net

來源

2011-12-05 EKS

你是否使用'Repeater'或'ListView'這樣的控件來生成表格的HTML？ –

沒有通過datatables.net完成 – EKS

如果你偶然使用HTML5，你應該看看'meter'標籤。現在對它的支持非常低，但值得學習。 –

創建一個你想要的高度的div。將其背景色設置爲所需的顏色，例如紅色。設置寬度爲的會是什麼一小部分，如果它是100％，如：

<div style="background-color:red;height:20px;width:100px"></div> 100% 
<div style="background-color:red;height:20px;width:75px"></div> 75% 
<div style="background-color:red;height:20px;width:50px"></div> 50% 
<div style="background-color:red;height:20px;width:25px"></div> 25% 
<div style="background-color:red;height:20px;width:1px"></div> 1%

顯然任何普通的CSS可以移動到一個樣式表&你可以調整走有它適合你的佈局。

來源

2011-12-05 16:34:02

一個簡單的即時通訊解決方案，我沒有想到它自己。謝謝 – EKS

供電的我不是太熟悉JQuery的，但我相信這是會爲你很容易地執行這樣的進度條功能。這不能在datatables.net表中使用嗎？

如果你被允許包括在這些表中簡單的HTML，你可以試試你的細胞中這樣的事情（從我自己的代碼修改複製）：

<div id="processingProgBar" style="width:200px; height:14px; position:relative;"> 
    <img src="imgs/dot_blue.png" id="processingDotBlue" style="position:absolute; height:14px; width:25px; top:0px; left:0px; border:0px; z-index:1;"> 
    <img src="imgs/dot_black.png" id="processingDotBlack" style="position:absolute; height:14px; width:175px; top:0px; left:25px; border:0px; z-index:2;"> 
    <div style="color:##ffffff; position:absolute; height:14px; width:200px; top:0px; left:0px; z-index:4; text-align:center;"> 
     <span id="processingProgBarT" class="normal" style="color:##ffffff;">5</span>/40 Images Processed 
    </div> 
</div>

這就建立了一個靜態的進度條可以由JS修改。每次取得進展時，都要更新「processingProgBarT」元素的innerHTML，然後更新「processingDotBlue」元素的寬度，然後更新「processingDotBlack」元素的寬度和左側。你會這樣做與這樣的腳本：

parent.document.getElementById('processingProgBarT').innerHTML = '6'; 
parent.document.getElementById('processingDotBlue').style.width = '30px'; 
parent.document.getElementById('processingDotBlack').style.width = '170px'; 
parent.document.getElementById('processingDotBlack').style.left = '30px';

該特定的代碼將更新我的示例中正在處理的第六個圖像的進度欄。

你可以很容易地寫入一個函數，但我沒有必要。您的應用程序似乎需要在頁面上顯示多個，但爲此，您可以在每個ID的末尾添加一個唯一標識符（即：「Row1」，「Row2」等），然後在您的函數中進行說明。

我希望這會有所幫助。

來源

2011-12-05 15:39:12 Nicholas

您可以輕鬆地用html創建進度條。您可能需要根據所需外觀使用絕對定位。

在我的博客的例子是爲SharePoint，但他們可以給你什麼可以做一個想法：

http://blog.pathtosharepoint.com/?s=progress

對於更高級的自定義，你可能也有興趣jQuery的迷你插件：

http://www.omnipotent.net/jquery.sparkline/

編輯：我應該提到，我用漸進增強來實現結果是：腳本讀取表格的內容並將其轉換爲圖表。這應該適用於DataTables。另外，這裏有我的博客兩個具體的鏈接：

http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/