JqGrid json записывает строки данных по столбцам, транспонирует отображение ⇐ Jquery

[Anonymous]

Отслеживайте определенные платежи за аренду курорта, записанные с помощью следующих данных файла JSON, загружаемых как URL-адрес в jqGrid 5:

Код: Выделить всё

{"rows":[{"id":"tzct01","trsctNo":"001","oprtDte":"22/01/24","amntToPay":440,"pymntTerm":"21/01/24-31/01/24","dueDate":"24/01/24","notes":"period full advnce payment",
"rcpts":[{"rcptNo":"0280","rcptDte":"18/01/24","rcptAmnt":440,"descrpt":"plata în avans prda: 21/01/24-31/01/24"}]
},
{"id":"tzct02","trsctNo":"002","oprtDte":"06/02/24","amntToPay":1160,"pymntTerm":"01/02/24-29/02/24","dueDate":"20/02/24","notes":"plata integrl in avans perioada rfrita",
"rcpts":[{"rcptNo":"0284","rcptDte":"04/02/24","rcptAmnt":1160,"descrpt":"plata în avans prda: 01/02/24-29/02/24"}]
},
{"id":"tzct03","trsctNo": "003","oprtDte": "24/03/24","amntToPay":800,"pymntTerm":"01/03/24-20/03/24","dueDate":"10/03/24","notes":"plata partial priada rfrita",
"rcpts":[{"rcptNo":"0291","rcptDte":"05/03/24","rcptAmnt":100,"descrpt":"plata prtl.  în avans prda: 01/03/24-20/03/24"}]
},
{"id":"tzct04","trsctNo":"004","oprtDte":"14/04/24","amntToPay":440,"pymntTerm":"21/03/24-31/03/24","dueDate":"01/04/24","notes":"fara plati ...",
"rcpts":"No detailed data for tzct04"},
{"id":"tzct05","trsctNo":"005","oprtDte":"22/04/24","amntToPay":1200,"pymntTerm":"01/04/24-30/04/24","dueDate":"11/04/24","notes":"fara plati ...",
"rcpts":"No detailed data for tzct05"},
{"id":"tzct06","trsctNo":"006","oprtDte":"05/05/24","amntToPay":1240,"pymntTerm":"01/05/24-31/05/24","dueDate":"14/05/24","notes":"plata partial prioade anterioare",
"rcpts":[{"rcptNo":"0311","rcptDte":"02/05/24","rcptAmnt":500,"descrpt":"Detailed explanation for tzct06"}]
},
{"id":"tzct07","trsctNo":"007","oprtDte":"14/06/24","amntToPay":1000,"pymntTerm":"01/06/24-30/06/24","dueDate":"25/06/24","notes":"plata partial prioade anterioare",
"rcpts":[{"rcptNo":"0323","rcptDte":"10/06/24","rcptAmnt":1200,"descrpt":"Detailed explanation for tzct07_1"},
{"rcptNo":"0324","rcptDte":"25/06/24","rcptAmnt":1000,"descrpt":"Detailed explanation for tzct07_2"}]
},
...
{"id":"tzct10","trsctNo":"010","oprtDte":"29/09/24","amntToPay":1000,"pymntTerm":"01/09/24-30/09/24","dueDate":"27/09/24","notes":"plata partial prioade anterioare",
"rcpts":[{"rcptNo":"0349","rcptDte":"26/09/24","rcptAmnt":1000,"descrpt":"plata chirie pt sptmbr.'24"}]
},
{"id":"tzct11","trsctNo":"011","oprtDte":"26/10/24","amntToPay":1000,"pymntTerm":"01/10/24-31/10/24","dueDate":"27/10/24","notes":"plata partial prioade anterioare",
"rcpts":[{"rcptNo":"0352","rcptDte":"25/10/24","rcptAmnt":1000,"descrpt":"plata chirie pt oct.'24"}]
},
{"id":"tzct12","trsctNo":"012","oprtDte":"29/11/24","amntToPay":1000,"pymntTerm":"01/11/24-30/11/24","dueDate":"28/11/24","notes":"plata partial prioade anterioare",
"rcpts":[{"rcptNo":"0356","rcptDte":"25/11/24","rcptAmnt":1000,"descrpt":"plata chirie pt nov.'24"}]
}]
}

Как можно заметить, существует какая-то основная строка записи, начинающаяся с этого идентификатора: tzct01, которая имеет соответствующие детали подзаписи «rcpts».
И через следующий код jq/jqGrid

Код: Выделить всё

$(function()
{
$("#jqGrd").empty()
$('' +
'').appendTo('#jqGrd')
$.ajax({url:'json/pmnts_ops.json',dataType:'json',
success:function(data)
{
var rows = data.rows,
rowHdrs=['IB (Init.Blnc)','Oprt Dte','Amnt Pay','Stay Period','Due Date','Totl Amnt To Pay','Cashed In','Pymnt Date','Ending Sum (FB)','Notes'], numColsPerPag=3,crrntPag=1,totPges=Math.ceil(rows.length/numColsPerPag),lastCB=0,pagDtaCache={}

function loadPage(page)
{
if(pagDtaCache[page])
{
updateGrid(pagDtaCache[page])
return
}
var start = (page-1)*numColsPerPag, end = Math.min(start+numColsPerPag,rows.length),
pagedData = rowHdrs.map(function(header)
{
return {header:header}
})
for(i=start;i 0 ? row.rcpts[row.rcpts.length-1].rcptDte : ''
break
case 'Ending Sum (FB)':
var TotlAmntPay = pagedData[5]['rcrd'+i] || 0, pyd = pagedData[6]['rcrd'+i] || 0
cellData = TotlAmntPay - pyd
lastCB = cellData
break
case 'Notes':
cellData = row.notes || ''
break
}
pagedData[idx]['rcrd'+i] = cellData // trnspse rcrds hdrs; do not touch this!
})
}
pagDtaCache[page] = {data:pagedData,colModel:generateColModel(start,end,page)}
updateGrid(pagDtaCache[page])  // grid update with the new data
}

function generateColModel(start,end,page)
{
var colModel = [{name:'header',label:'CrrtNo',width:150,align:'left',sortable:false}]
for(i=start;i
Далее будут кратко описаны все характеристики и требования к этой витрине, показаны то, что уже сделано, а также пара требований, которые необходимо выполнить
Как видно из этого фрагмента кода (а также из рис. 1.1, рис. 1.2 и т. д.), данные json успешно отображаются вручную и программно, с транспонированными данными строк в виде столбцов и столбцов в виде строк..
Нужно отображать только 3 столбца одновременно (и, конечно, через эту нумерацию страниц... можно попасть и на другие страницы)
Следующий точно покажет, как будут выглядеть столбцы
(Обратите внимание, что некоторые из них физически присутствуют в файле данных json, а другие являются вычисляемыми полями)
Я упомяну, какие из них ограничивают физические данные, а какие являются вычисляемыми полями.
Здесь мы рассмотрим каждое строка столбца:
1.1 Первый столбец (ячейки заголовка)
1.'CrrntNo' — последовательная нумерация записей данных json (отслеживает все без исключения запись);
2.'IB'(Начальный баланс)
- Начальная сумма для всей суммы денежных операций; сначала (самая первая запись) эта
сумма равна 0; но начиная со второго, это значение считывает конечный баланс/окончание предыдущей записи; очень важно помнить об этом
3. «Дата операции/транзакции»
[list]
[*]Дата, когда это произошло транзакция была совершена;
[/list]
4. «Сумма платежа»
[list]
[*]Сумма к оплате строго на заданный период времени;
[/list]
5.'Остаться Период'
[list]
[*]Это период восстановления, за который придется заплатить;
[/list]
6. «Срок платежа»
[list]
[*]Дата платежа, до которой должна быть оплачена арендная плата (как минимум сумма к оплате);
7. «Общая сумма к оплате»
— вот Общая сумма к оплате, которая представляет собой «IB» + «Amnt Pay»
8. «Обналиченные»
— это общая сумма, выплаченная в течение текущего месяца; которая представляет собой сумму всех 'rcptAmnt'
связанных с этой конкретной записью
9. 'Pymnt Date'
- Дата платежа - Дата, в которую был произведен платеж (' Обналичивание') было произведено
10. «Конечная сумма (FB)»

— это конечный баланс (CB) или оставшаяся сумма платежа.  «Общая сумма к оплате» минус «Обналичивание»; этот CB будет указан как начальный баланс следующей записи, как уже упоминалось, когда говорилось о начальном балансе в первом пункте; очень важно это получить
11.'Примечания'
- краткое описание транзакции
Далее я точно опишу некоторые значения (как физические, так и вычисляемые), которые отображаются в jqGrid
1.2 Второй столбец (ячейки данных)
[list]
[*] 1 — только это заголовок (header ячейка)

[*]
[list]
0 — вычисляемое поле (нужно 0, если это самая первая строка, иначе станет «Конечная сумма (FB)» предыдущей строки)
[/list]

[*]
[list]"22/01/24" - физическая ячейка данных
[/list]

[*]
[list]
440 – физическая ячейка данных
[/list]

[*]
[list]
"21/01/24-31/01/24" - физическая ячейка данных


[*]

"24/01/24" - физическая ячейка данных
[/list]

[*]
[list]
440 – вычисляемое поле ('IB' + 'Amnt Pay')
[/list]

[*]
[list]
440 — вычисляемая ячейка данных (SUM('rcptAmnt') из соответствующие данные подсетки rcpts)
[/list]

[*]
[list]
" 01.18.24" - физическая ячейка данных (последнее поле "rcptDte" из данных подсетки "rcpts")
[/list]

[*]
[list]
0 - вычисляемая ячейка данных ('Totl «Сумма к оплате» — «обналичены»)
[/list]

[*]
[list]
'период полной advnc pymnt' - ячейка физических данных
[/list]

[/list]
1.3 Третья колонка ( Ячейки данных)
[list]
[*]
[list]
2 значения последовательности заголовков (только это заголовок)
[/list]

[*]
[list]
0 — вычисляемое поле (Конечная сумма (FB)' предыдущего. строка)
[/list]

[*]
[list]
"02.06.24" - физическая ячейка данных
[/list]

[*]
[list]
1160 - физическая ячейка данных
[/list]

[*]
[list]
"01/02/24-29/02/24" - физическая ячейка данных
[/list]

[*][list]
"20/02/24" - физическая ячейка данных
[/list]

[*]
[list]
1160 - вычисляемое поле ('IB' + 'Amnt Платить')
[/list]

[*]
[list]
1160 - вычисляемая ячейка данных ( SUM ('rcptAmnt') из соответствующих данных подсетки)
[/list]

[*]
[list]
"02.04.24" - физическая ячейка данных (последнее поле 'rcptDte' из данные подсетки «rcpts»)
[/list]

[*]
[list]
0 — вычисляется ячейка данных («Общая сумма к оплате» – «Обналиченные»)
[/list]

[*]
[list]'период полного наступления pymnt' — физическая ячейка данных
и так далее, и так далее далее..
[/list]

[/list]
Все вычисления практически такие же, как и тогда, когда все отображалось горизонтально.
В принципе, как и сейчас, все вычисления довольно хорошо читаются на всех страницах, но все же есть некоторые требования, которые представлены ниже
Требования:
[list]
[*]Очень важно, нужно программно использовать самую первую строку
'NrCrt 1 2 3' в качестве основного заголовка; который в первой строке абсолютно такой же,
но для других страниц верхний заголовок должен читаться по горизонтали
[code]               'NrCrt  4 5  6 '(second page)

'NrCrt  7 8  9 '(third page)

[/list]
и так далее
Чрезвычайно важно.. поэтому повторяю один будет просто вертикально (над столбцами) нумерация записей путем вертикального размещения номеров записей в качестве имен столбцов (также охватывающих страницы)
путем прикрепления следующих заголовков ячеек

Код: Выделить всё

                'NrCrt 1 2 3' (1st page)

'NrCrt 4 5 6' (2nd page)

'NrCrt 7 8 9' (3rd page)

'NrCrt 10 ' (4th page)

поэтому на всех страницах будет только примерно 12 строк
К сожалению, сейчас
На всех четырех страницах появляется надпись «NrCrt 1 2 3»!
3 . На странице всего три строки данных (которые становятся столбцами)
4. Каждый вертикальный столбец будет иметь данные подсетки квитанций ТАКЖЕ в виде столбцов.
Это должно отображаться как своего рода отношение от 1 до n
Как можно заметить на рис. 2.1, должен быть добавлен знак плюса между квадратными скобками в строке «Обналичивание» для каждого отдельного столбца, указывающий, что с этой записью связана одна или несколько последующих подзаписей о поступлениях (не менее 1). А также при наведении курсора мыши на знак +/- символ мыши превратится в маленький символ ладони
И если щелкнуть по этому знаку плюс (+), эта строка (фактически столбец) развернется, показывая все соответствующие детали данных о квитанциях. А при расширении этот знак (+) плюс меняет знак минус (-), который при нажатии сворачивает все данные подсетки вертикальных квитанций, возвращаясь к исходному отображению.
Все соответствующие квитанции считаются вложенными. -запись(и) для этой записи основной транзакции, как показано на рисунке 2.2.



Пожалуйста, ребята, также проверьте фотографии, где все выглядит именно так, как есть сейчас, а также как все должно быть стоять на основе всего этого упомянуто
Спасибо всем и, пожалуйста, помогите мне в этом вопросе

Подробнее здесь: https://stackoverflow.com/questions/793 ... ed-display