jqGrid中的单元格数据条 – 可能与否？

我一般不喜欢使用Excel和Microsoft产品，但Excel 2007/2010有一些非常好的条件格式化function，遗憾的是，到目前为止我还没有在其他许多地方看到过。 我在商业报告中广泛使用的其中一个是数据栏。 http://blogs.msdn.com/b/excel/archive/2009/08/07/data-bar-improvements-in-excel-2010.aspx

在我看来，这些数据栏非常有助于理解数字之外的数据含义。 虽然200到2000个用户之间的差异只是人眼难以理解的数字，但是长10倍的条形更加直观。

我的问题：有没有办法在jqGrid中为列的每个值包含单元格条件数据条，镜像Excelfunction？ 这是我看到摆脱Excel工作表并在在线报告系统中实施报告的唯一方法。 一旦您习惯了数据栏，它们就是必不可少的，而且它们是我们仍然使用Excel进行报告的唯一原因。

如果我假设在jqGrid中没有这样的内置function，你认为自定义构建它会有很多工作吗？ 你有什么想法，最好的办法是什么？

Answer 1

这是您在问题中写的Excel的一个有趣特性。 我以前对此一无所知。

您需要的是实现自定义格式化程序function。 一般来说很容易。 您应该编写一个小函数，根据值（颜色条上的文本）显示单元格。 此外，您还应该定义Unformatting自定义function ，这在您的情况下非常容易。 可以在排序和其他jqGrid操作期间使用无格式函数，其中需要从网格单元获取值。

所以你的问题可以减少到在彩条上显示数字。

更新 ：我一次又一次地谈论你的问题，因为我发现使用颜色来形成数字可能真的很有帮助。 所以我花了一些时间并创建了相应的代码示例，产生了以下结果

并且可以看到住在这里 。

对代码的小评论。 我不得不创建一些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', 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; } 

和$(document).ready(function () {/*code*/});里面的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 '
'+cellvalue + '
'; }; 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 }); 

更新 ：演示的实际版本在这里 。

Answer 2

我认为这是可能的，但需要一些计划和一些假设。

假设：

如果您有一个宽度为100px的数字列，则做出预先确定的决定，以获得10个可能的数据条宽度。 （0,10px，20px，…… 100px）。 其中每一个都可以保存为图像，你可以拥有漂亮的渐变结束位:)

让我们称之为0.png，10.png，20.png，…. 100.png

现在这种方法将是这样的：

1. 让jQGrid做它的事情，渲染网格等。
2. 一旦完成挑选出你想要数据栏的列，就解雇一些jQuery
3. 对于每一列
4. 对于上面列中的每个单元格
5. 查看数值并通过乘以一个因子（它可能需要基于列中的最大值）来向下/向上缩放它，这样你得到0到100之间的10的倍数
6. 取这个缩放值，让我们说20并将20.png设置为此单元格的背景。
7. 冲洗并重复:)