jqGrid中的单元内数据条-可能与否? [英] In-cell data bars in jqGrid - possible or not?

问题描述

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

I generally don't like using Excel and Microsoft products in general, but Excel 2007/2010 has some very nice conditional formatting features which, sadly, I haven't seen in many other places so far. One of these which I use extensively in business reports is data bars. http://blogs.msdn.com/b/excel/archive/2009/08/07/data-bar-improvements-in-excel-2010.aspx

我认为，这些数据条对于理解数字以外的数据的意义非常有帮助.虽然200和2000个用户之间的差异只是人眼难以理解的数字，但长10倍的条形则更加直观.

In my opinion, these data bars are extremely helpful in understanding the meaning of data beyond the numbers. While the difference between 200 and 2000 users is just a hard-to-grasp digit to the human eye, a bar which is 10 times longer is much more intuitive.

我的问题:有没有办法为jqGrid中的列的每个值包括单元内条件数据栏，以反映Excel功能?这将是我看到摆脱Excel工作表并在在线报告系统中实施报告的唯一方法.数据栏一经使用，便是必不可少的，这是我们仍将Excel用于报告的唯一原因.

My question: Is there any way to include in-cell conditional data bars for every value of a column in jqGrid, mirroring the Excel functionality? This would be the only way I see to get rid of our Excel sheets and implement the reports in an online reporting system. Data bars are simply indispensable once you get used to them, and they are the only reason we still use Excel for reports.

如果按照我的假设，jqGrid中没有像这样的内置功能，那么您认为自定义它会花费很多工作吗?您是否有什么最好的方法来解决这个问题?

If, as I assume, there is no built-in functionality like this in jqGrid, do you think it would be a lot of work to custom-build it? Do you have any ideas what the best way would be to approach this?

推荐答案

这是Excel中一个有趣的功能，您在问题中对此进行了编写.我以前对此一无所知.

It is an interesting feature of Excel about which you wrote in your question. I haven't known about this before.

您需要实现一个自定义格式化程序功能.总的来说很容易.您应该编写一个小的函数，该函数根据值(彩条上方的文本)显示包含的单元格.此外，您还应该定义取消格式化自定义函数在您的情况下非常容易.可以在需要从网格单元获取值的排序和其他jqGrid操作期间使用取消格式化功能.

What you need is to implement a custom formater function. In general is is very easy. You should write a small function which display the cell contain based on the value (text over the color bar). Moreover you should define also Unformatting custom function which will be very easy in your case. The unformating function could be used during sorting and other jqGrid operation where one need get the value from the grid cell.

因此，您的问题可以减少为在颜色栏上显示数字.

So your problem could be reduced to displaying the number over the color bar.

更新:我一遍又一遍地谈论您的问题，因为我发现使用颜色来格式化数字确实很有帮助.因此，我花了一些时间并创建了相应的代码示例，该示例产生了以下结果

UPDATED: I though again and again about your question because I find that the usage of colors for formating of numbers could be really helpful. So I spend some time and created the corresponding code example which produce following results

，并且可以在此处实时看到.

and can be seen live here.

对代码的注释小.我必须创建一些CSS类，以在除Opera被视为网格的所有当前浏览器中产生渐变条

Small comments to the code. I had to create some CSS classes which produce gradient bar in any current browsers excepting Opera where the grid are seen as

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代码:

and the jqGrid code inside of $(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 });

已更新:该演示的实际版本为这里.

UPDATED: The actualized version of the demo is here.

这篇关于jqGrid中的单元内数据条-可能与否?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！