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

查看：17
本文介绍了jqGrid 中的单元格数据栏 - 可能与否?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一般不喜欢使用 Excel 和 Microsoft 产品，但 Excel 2007/2010 有一些非常好的条件格式功能，遗憾的是，到目前为止我还没有在许多其他地方看到过这些功能.我在业务报告中广泛使用的其中之一是数据栏.看到.

对代码的小注释.我必须创建一些 CSS 类，它们会在除 Opera 之外的任何当前浏览器中生成渐变条，其中网格被视为

CSS 类定义如下:

.cellDiv{左:0px；顶部:5px；高度:22px；位置:相对；填充:0；边距:-4px；边框:0；}.cellTextRight{位置:相对；边距右:4px；文本对齐:右；浮动:对；}.gradient1{/* 后备 (Opera) */背景:#008AEF；/* Mozilla: https://developer.mozilla.org/en/CSS/-moz-linear-gradient */背景:-moz-linear-gradient(左，#008AEF，白色)；/* Chrome, Safari: http://webkit.org/blog/175/introducing-css-gradients/*/背景:-webkit-gradient(线性，左上，右上，从(#008AEF)，到(白色))；/* MSIE http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx */过滤器:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#008AEF', EndColorStr='white', GradientType=1);/*ie8*/-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#008AEF', EndColorStr='white', GradientType=1)";位置:绝对；左:-2px；顶部:-5px；右:2px；高度:22px；向左飘浮;}.gradient2{背景:#63C384；背景:-moz-linear-gradient(左，#63C384 0%，白色 100%)；背景:-webkit-gradient(线性，左上，右上，从(#63C384)，到(白色))；过滤器: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384', EndColorStr='white', GradientType=1);-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#63C384', EndColorStr='white', GradientType=1)";位置:绝对；左:-2px；顶部:-5px；右:2px；高度:22px；向左飘浮;}

以及$(document).ready(function () {/*code*/});里面的jqGrid代码；:

var grid = $("#list");var gradientNumberFormat = function (cellvalue, gradientClass, minDataValue,最大数据值，最小显示值，最大显示值){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>';};变量我的数据 = [{ id: "1", invdate: "2007-10-01", name: "test", note: "note",金额:200.00"，税金:10.00"，总计:210.00"}，{ id:2"，invdate:2007-10-02"，名称:test2"，注意:note2"，金额:300.00"，税金:20.00"，总计:320.00"}，{ id:3"，invdate:2007-09-01"，名称:test3"，注意:note3"，金额:400.00"，税收:30.00"，总计:430.00"}，{ id: "4", invdate: "2007-10-04", name: "test", note: "note",金额:200.00"，税金:10.00"，总计:210.00"}，{ id:5"，invdate:2007-10-05"，名称:test2"，注意:note2"，金额:300.00"，税金:20.00"，总计:320.00"}，{ id:6"​​，invdate:2007-09-06"，名称:test3"，注意:note3"，金额:400.00"，税收:30.00"，总计:430.00"}，{ id: "7", invdate: "2007-10-04", name: "test", note: "note",金额:200.00"，税金:10.00"，总计:210.00"}，{ id:8"，invdate:2007-10-03"，名称:test2"，注意:note2"，金额:300.00"，税金:20.00"，总计:320.00"}，{ id:9"，invdate:2007-09-01"，名称:test3"，注意:note3"，金额:400.00"，税收:30.00"，总计:430.00"}，{ id: "10", invdate: "2007-10-01", name: "test", note: "note",金额:200.00"，税金:10.00"，总计:210.00"}，{ id:11"，invdate:2007-10-02"，名称:test2"，注意:note2"，金额:300.00"，税金:20.00"，总计:320.00"}，{ id:12"，invdate:2007-09-01"，名称:test3"，注意:note3"，金额:400.00"，税收:30.00"，总计:430.00"}，{ id: "13", invdate: "2007-10-04", name: "test", note: "note",金额:200.00"，税金:10.00"，总计:210.00"}，{ id:14"，invdate:2007-10-05"，名称:test2"，注意:note2"，金额:300.00"，税金:20.00"，总计:320.00"}，{ id:15"，invdate:2007-09-06"，名称:test3"，注意:note3"，金额:400.00"，税收:30.00"，总计:430.00"}，{ id: "16", invdate: "2007-10-04", name: "test", note: "note",金额:200.00"，税金:10.00"，总计:210.00"}，{ id:17"，invdate:2007-10-03"，名称:test2"，注意:note2"，金额:300.00"，税金:20.00"，总计:320.00"}，{ id:18"，invdate:2007-09-01"，名称:test3"，注意:note3"，金额:400.00"，税金:30.00"，总计:430.00"}];grid.jqGrid({数据:我的数据，数据类型:本地"，colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],col型号:[{ name:'id', index:'id', key:true, width:70, align:"right", sorttype:"int",格式化程序:函数(单元格值){//数字 1 将映射到无颜色条//数字 18 将映射到 100% 填充的颜色条return gradientNumberFormat(cellvalue, "gradient1", 1, 18, 0, 100);}},{名称:'invdate'，索引:'invdate'，宽度:90，排序类型:日期"}，{ 名称:'名称'，索引:'名称'，宽度:100 }，{ name:'amount', index:'amount', width:80, align:"right", sorttype:"float",格式化程序:函数(单元格值){//数字 200 将映射到 10% 填充的颜色条//数字 400 将映射到 90% 填充的颜色条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'，行数:10，行列表:[5, 10, 20, 50],排序名称:'id'，排序顺序:'desc'，观看记录:真实，高度:100%"，标题:渐变颜色的数字"});grid.jqGrid('navGrid', '#pager',{添加:假，假，删除:假，搜索:假，刷新:真})；

更新:演示的实际版本是 这里.

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. Link

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.

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.

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?

解决方案

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

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.

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

The CSS classes are defined as following:

.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;
}

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆