Строки данных в ячейке в jqGrid - возможно или нет?

Question

Я вообще не люблю использовать продукты 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 нет встроенной функциональности, подобной этой,Вы думаете, что будет много работы по его изготовлению?У вас есть идеи, как лучше всего подойти к этому?

Answer 1

Это интересная особенность Excel, о которой вы написали в своем вопросе.Я не знал об этом раньше.

Вам нужно реализовать функцию custom formater .В целом это очень просто.Вы должны написать небольшую функцию, которая отображает ячейку, основанную на значении (текст над цветовой шкалой).Кроме того, вы должны также определить Неформатированная пользовательская функция , которая будет очень простой в вашем случае.Неформатирующую функцию можно использовать во время сортировки и других операций jqGrid, когда нужно получить значение из ячейки сетки.

Таким образом, ваша проблема может быть сведена к отображению числа на цветной полосе.

ОБНОВЛЕНО : Я снова и снова размышляю над вашим вопросом, поскольку считаю, что использование цветов для форматирования чисел может быть действительно полезным.Поэтому я потратил некоторое время и создал соответствующий пример кода, который дает следующие результаты

и его можно увидеть вживую здесь .

Smallкомментарии к коду.Мне пришлось создать несколько классов 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;
}

и код 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 '<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 });

ОБНОВЛЕНО : актуализированная версия демо-версии здесь .

Answer 2

Я думаю, что это возможно, но с небольшим планированием и несколькими предположениями.

Предположения:

Если у вас есть числовой столбец с шириной, скажем, 100 пикселей, то примите заранее определенное решение, чтобы иметь 10 возможных значений ширины панели данных. (0, 10px, 20px, .... 100px). Каждое из них может быть сохранено в виде изображений. Вы также можете иметь свой красивый бит градиента:)

Позволяет называть их 0.png, 10.png, 20.png, .... 100.png

Теперь подход будет выглядеть примерно так:

1. Пусть jQGrid сделает свое дело, отобразит сетку и т. Д.
2. Запустите jQuery, как только он закончится, выделите столбцы, в которые вы хотите поместить строки данных
3. Для каждого столбца
4. Для каждой ячейки в вышеприведенном столбце
5. посмотрите на числовое значение и уменьшите / увеличьте его, умножив на коэффициент (возможно, оно должно быть основано на наибольшем значении в столбце), так что вы получите кратное 10 от 0 до 100
6. Возьмите это масштабированное значение, скажем, 20 и установите 20.png в качестве фона для этой ячейки.
7. Прополоскать и повторить:)