它是關於你在你的問題寫了Excel的一個有趣的功能。我以前不知道這件事。
你需要的是實現一個custom formater函數。一般來說很容易。你應該編寫一個小函數來顯示基於值的單元格（顏色欄上的文本）。此外，你應該定義Unformatting custom function這將是非常容易的在你的情況。可以在排序和其他jqGrid操作期間使用unformating函數，其中需要從網格單元獲取值。
所以你的問題可以減少到在顏色欄上顯示數字。
已更新：我一次又一次地談論你的問題，因爲我發現使用顏色格式化數字可能會非常有幫助。所以我花了一些時間，創建了產生以下結果
，並可以現場here可以看到相應的代碼示例。
對代碼的小意見。我不得不創建其產生的任何現有的瀏覽器以外歌劇漸變欄是格柵被視爲
的CSS類被定義爲以下一些CSS類：
.cellDiv
{
left: 0px; top:5px; height:22px;
position:relative;padding:0;margin-right:-4px;border:0;
}
.cellTextRight
{
position:relative;
margin-right:4px;
text-align:right;
float:right;
}
.gradient1{
/* fallback (Opera) */
background: #008AEF;
/* Mozilla: https://developer.mozilla.org/en/CSS/-moz-linear-gradient */
background: -moz-linear-gradient(left, #008AEF, white);
/* Chrome, Safari: http://webkit.org/blog/175/introducing-css-gradients/ */
background: -webkit-gradient(linear, left top, right top, from(#008AEF), to(white));
/* MSIE http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#008AEF', EndColorStr='white', GradientType=1);
/*ie8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#008AEF', EndColorStr='white', GradientType=1)";
position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}
.gradient2{
background: #63C384;
background: -moz-linear-gradient(left, #63C384 0%, white 100%);
background: -webkit-gradient(linear, left top, right top, from(#63C384), to(white));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384', EndColorStr='white', GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384', EndColorStr='white', GradientType=1)";
position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}
和的jqGrid的$(document).ready(function() {/*code*/});內部代碼：
var grid = $("#list");
var gradientNumberFormat = function (cellvalue, gradientClass, minDataValue,
maxDataValue, minDisplayValue, maxDisplayValue) {
var dataAsNumber = parseFloat(cellvalue); /* parseInt(cellvalue, 10);*/
if (dataAsNumber > maxDataValue) {
dataAsNumber = maxDataValue;
}
if (dataAsNumber < minDataValue) {
dataAsNumber = minDataValue;
}
var prozentVal = minDisplayValue+(dataAsNumber-minDataValue)*(maxDisplayValue-
minDisplayValue)/(maxDataValue-minDataValue);
return '<div class="cellDiv"><div class="'+gradientClass+'" style="width:'+
prozentVal+'%;"></div><div class="cellTextRight">'+cellvalue +
'</div></div>';
};
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "10", invdate: "2007-10-01", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "11", invdate: "2007-10-02", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "12", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "13", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "14", invdate: "2007-10-05", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "15", invdate: "2007-09-06", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "16", invdate: "2007-10-04", name: "test", note: "note",
amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "17", invdate: "2007-10-03", name: "test2", note: "note2",
amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "18", invdate: "2007-09-01", name: "test3", note: "note3",
amount: "400.00", tax: "30.00", total: "430.00" }
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name:'id', index:'id', key:true, width:70, align:"right", sorttype:"int",
formatter: function (cellvalue) {
// the number 1 will be mapped to no color bar
// the number 18 will be mapped to the color bar with 100% filled
return gradientNumberFormat(cellvalue, "gradient1", 1, 18, 0, 100);
}
},
{ name:'invdate', index:'invdate', width:90, sorttype:"date" },
{ name:'name', index:'name', width:100 },
{ name:'amount', index:'amount', width:80, align:"right", sorttype:"float",
formatter: function (cellvalue) {
// the number 200 will be mapped to the 10% filled color bar
// the number 400 will be mapped to the 90% filled color bar
return gradientNumberFormat(cellvalue,"gradient2",200,400,10,90);
}
},
{ name:'tax', index:'tax', width:80, align:"right", sorttype:"float" },
{ name:'total', index:'total', width:80, align:"right", sorttype:"float" },
{ name:'note', index:'note', width:150, sortable:false }
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
height: "100%",
caption: "Numbers with gradient color"
});
grid.jqGrid('navGrid', '#pager',
{ add:false, edit:false, del:false, search:false, refresh:true });
修訂：演示的實際版本是here。
謝謝，這很有幫助。我仍然不確定格式化函數的作用是什麼來生成數據欄。 – 2010-11-09 11:39:14
@M。 Cypher：可能我會稍後爲你創建一個演示示例。 – Oleg 2010-11-09 19:19:53
@M。 Cypher：我對你很新。看看我更新的答案。 – Oleg 2010-11-13 16:24:44