Как развернуть столбцы в бесплатной jqgrid 4.15.4 - PullRequest
Новая
       54

Как развернуть столбцы в бесплатной jqgrid 4.15.4

0 голосов
/ 02 ноября 2018

Мне нужна одна помощь в бесплатной jqgrid. Здесь я хочу показать краткое резюме проекта с некоторым форматированием. В настоящее время я использовал setGroupHeaders , чтобы показать несколько столбцов в одной группе. Но тогда это выглядит не совсем удобно, поэтому я начал немного его менять.

О первом изображении: как оно выглядит в настоящее время.

Current grid

О втором изображении: как я хочу, чтобы сетка результатов выглядела? Requirement

Обновление: мне не ясно, следует ли мне рассматривать вторую (результативную) сетку как сводную или древовидную.

Обновление 2: я создал для этого скрипку, но, похоже, что-то мне не хватает здесь . Пример кода можно найти ниже: 

var data = [{
    "id": 1,            
    "deadline":"Deadline",
    "AgreedD":"Agredd Deadline",
    "labelD":"Date",
    "Agreed":"2018-02-11",


},{
 "id": 2,
  "deadline":"Deadline",
"EstimatedD":"Estimated Deadline",
"labelD":"Date",
"Estimated":"2018-02-15"
}
, {
    "id": 2,
   "deadline":"DaysLeft",
    "UAD":"25",
    "UED":"33"
},
 {
    "id": 3,
   "deadline":"Participants",
    "RequiredP":"120",
    "WRec":"88"
},
 {
    "id": 4,
   "deadline":"Utterences",
    "RequiredU":"6000",
    "RecordedU":"4800"
},{
    "id": 5,
   "deadline":"Throughput",
    "RequiredT":"400",
    "ActualT":"12"
},

];
/* convert the salesdate in  */
$("#list483").jqGrid("jqPivot",
data,
{
    frozenStaticCols: true,
    skipSortByX: true,
    useColSpanStyle: true,
    //defaultFormatting: false,
    **xDimension**: [
            {dataName:"deadline"},
        {dataName: "AgreedD" },
        {dataName: "EstimatedD" },
        {dataName: "WRec", sortorder: "desc" },
        {dataName: "UED", sortorder: "desc" },
        {dataName: "Estimated", sortorder: "desc" },

    ],
    **yDimension**: [

         { dataName: "Agreed", width: 100, label: "Agreed" },
         { dataName: "Estimated", width: 100, label: "Estimated" },
         {dataName:"RequiredP", width: 100, label: "RequiredP"},
         {dataName:"UAD", width: 100, label: "UAD"},
         {dataName:"RequiredU", width: 100, label: "RequiredU"},           
         { dataName: "salesYear", sorttype: "integer" },
         { dataName: "salesMonth", sorttype: "integer" }
],
    **aggregates**: [{
        //member: "Agreed",

        //template: "number",
        //template: "integer", //myIntTemplate,

    },
    {
        member: "totalnumberofsales",
        aggregator: "count",
        //template: "integer",
        label: "{0}"
    }]
},
// grid options
{
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true, width: 75 },
    shrinkToFit: false,
    useUnformattedDataForCellAttr: false,
    autoResizing: { compact: true },
    groupingView: {
        //groupField: ["x2"],
        groupColumnShow: [false],
        groupText: ["<span class='group-text'>{0}</span>"]
    },
    //width: 450,
    pager: true,
    rowNum: 20,
    //caption: "<b>statistics</b>",
    rowList: [5, 10, 20, 100, "10000:All"]
});    
//var p = $("#list483").jqGrid("getGridParam");
//console.log(JSON.stringify(p.pivotOptions.xIndex));
//console.log(JSON.stringify(p.pivotOptions.yIndex));

Итак, было бы очень полезно, если бы кто-нибудь смог привести меня к некоторым примерам.

1 Ответ

0 голосов
/ 06 ноября 2018

То, что вы описываете, не может быть легко достигнуто с помощью функции jqPivot, так как отображаемая структура данных не соответствует определенному правилу (некоторые записи содержат значения для одной ячейки, в то время как другие записи имеют значения для двух клетки).

Похоже, вам нужно отображать только одну запись с ее значениями, разделенными на две строки, без особой надобности функций, предоставляемых jqGrid, и в этом случае я бы рекомендовал не использовать плагин сетки, а просто создать DOM вручную.

Однако, если вы хотите использовать jqgrid, я рекомендую обработать данные перед их передачей в jqgrid и преобразовать их в структуру, более подходящую для виджета.

Вы можете достичь желаемого пользовательского интерфейса с такой конфигурацией сетки: 

var dataConverted = convertData(data); //Convert your custom data to the structure of colModel

$('#grid').jqGrid({
    //...
    datatype: "local",
    data: dataConverted,
    colModel: [
        {name: 'deadlineType', label: 'Deadline'},
        {name: 'deadlineValue', label: ''},
        {name: 'daysLeftType', label: 'Days left'},
        {name: 'daysLeftValue', label: ''},
        {name: 'participantsType', label: 'Participants'},
        {name: 'participantsValue', label: 'Total'},
        {name: 'qaPassed', label: 'QA passed'}
    ]
});

* незначительные изменения, необходимые для colspan, выравнивания, форматирования даты и т. Д.

enter image description here

Если столбцы являются динамическими, вы также можете сгенерировать colModel при обработке ваших данных.

Демо: https://jsfiddle.net/zohalexix/wy43L0tj/2/

...