我一般不喜欢使用Excel和Microsoft产品,但Excel 2007/2010有一些非常好的条件格式化功能,遗憾的是,到目前为止我还没有在其他许多地方看到过.我在商业报告中广泛使用的其中一个是数据栏.
http://blogs.msdn.com/b/excel/archive/2009/08/07/data-bar-improvements-in-excel-2010.aspx
http://blogs.msdn.com/b/excel/archive/2009/08/07/data-bar-improvements-in-excel-2010.aspx
在我看来,这些数据栏非常有助于理解数字之外的数据含义.虽然200到2000个用户之间的差异只是人眼难以理解的数字,但是长10倍的条形更加直观.
我的问题：有没有办法在jqGrid中为列的每个值包含单元格条件数据条,镜像Excel功能？这是我看到摆脱Excel工作表并在在线报告系统中实施报告的唯一方法.一旦您习惯了数据栏,它们就是必不可少的,而且它们是我们仍然使用Excel进行报告的唯一原因.
解决方法
这是您在问题中写的Excel的一个有趣特性.我以前对此一无所知.
您需要的是实现custom formater功能.一般来说很容易.您应该编写一个小函数,根据值(颜色条上的文本)显示单元格.此外,您还应该定义Unformatting custom function,这在您的情况下将非常容易.在排序和其他jqGrid操作期间可以使用无格式函数,其中需要从网格单元获取值.
所以你的问题可以减少到在彩条上显示数字.
更新：我一次又一次地谈论你的问题,因为我发现使用颜色来形成数字可能真的很有帮助.所以我花了一些时间并创建了相应的代码示例,产生了以下结果
并且可以在现场观看here.
对代码的小评论.我必须创建一些CSS类,它们可以在任何当前浏览器中生成渐变条,除了Opera,网格被视为
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',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,from(#63C384),to(white));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384',GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384',GradientType=1)";
position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}
和$(document).ready(function(){/ * code * /})中的jqGrid代码;：
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",{ id: "5",invdate: "2007-10-05",{ id: "6",invdate: "2007-09-06",{ id: "7",{ id: "8",invdate: "2007-10-03",{ id: "9",{ id: "10",{ id: "11",{ id: "12",{ id: "13",{ id: "14",{ id: "15",{ id: "16",{ id: "17",{ id: "18",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,100);
}
},{ name:'invdate',index:'invdate',width:90,sorttype:"date" },{ name:'name',index:'name',width:100 },{ name:'amount',index:'amount',width:80,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',sorttype:"float" },{ name:'total',index:'total',{ name:'note',index:'note',width:150,sortable:false }
],pager: '#pager',rowNum: 10,rowList: [5,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.
