我一般不喜欢使用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.