jquery – jqGrid中的in-cell数据栏 – 可能与否?

前端之家收集整理的这篇文章主要介绍了jquery – jqGrid中的in-cell数据栏 – 可能与否?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一般不喜欢使用Excel和Microsoft产品,但Excel 2007/2010有一些非常好的条件格式化功能,遗憾的是,到目前为止我还没有在其他许多地方看到过.我在商业报告中广泛使用的其中一个是数据栏.
http://blogs.msdn.com/b/excel/archive/2009/08/07/data-bar-improvements-in-excel-2010.aspx

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

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

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

解决方法

这是您在问题中写的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.

原文链接:https://www.f2er.com/jquery/241555.html

猜你在找的jQuery相关文章