сводка группировки флажков jqGrid

Question

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

Где-то я нашел какое-то решение, например, сбросить заголовок и сгенерировать его снова, но это было только для основного заголовка, а не для заголовков групп

Вот мой пример кода

  $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'data2.json',
                mtype: "GET",
                datatype: "json",
                colModel: [
                    { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
 					{ label: 'Customer ID', name: 'CustomerID', width: 150 },
                    { label: 'Order Date', name: 'OrderDate', width: 150 },
                    {
                        label: 'Freight',
                        name: 'Freight',
                        width: 150,
                        formatter: 'number',
                        summaryTpl: "Total Units {0}", // set the summary template to show the group summary
                        summaryType: "sum" // set the formula to calculate the summary type
                    },
                    { label: 'Ship Name', name: 'ShipName', width: 150 }
                ],
                loadonce: true,
                width: 900,
                height: 500,
                rowNum: 20,
                rowList: [20, 30, 50],
                sortname: 'OrderDate',
                pager: "#jqGridPager",
                viewrecords: true,
                multiselect: true,
                grouping: true,
                userDataOnFooter: true, 
                onSelectRow: function (rowId) { handleSelectedRow(rowId); },
                groupingView: {
                    groupField: ["CustomerID"],
                    groupColumnShow: [true],
                    groupText: ["<b>{0}</b>"],
                    groupOrder: ["asc"],
                    groupSummary: [true],
                    groupSummaryPos: ['header'],
                    groupCollapse: false

                },

                gridComplete: function () {
                    currids = $(this).jqGrid('getDataIDs');
                }
            });
        });
        var totalAmt=0;
        function handleSelectedRow(id) {
           
            var jqgcell = jQuery('#jqGrid').getCell(id, 'OrderID');
            var amount = jQuery('#jqGrid').getCell(id, 'Freight');
            var cbIsChecked = jQuery("#jqg_jqGrid_" + jqgcell).prop('checked');
           
            if (cbIsChecked == true) {
                if (amount != null) {
                    totalAmt = parseInt(totalAmt) + parseInt(amount);
                }
            } else {
                if (amount != null) {
                    totalAmt = parseInt(totalAmt) - parseInt(amount);
                }
            }
            $("#price").html(totalAmt);
            

        }

Answer 1

спасибо за ваш ответ, и ваша демонстрация - именно то, что мне нужно. Я попытался продолжить с кодом, который я опубликовал, и на данный момент я нахожусь в фазе, когда пользователь получает общую сумму только для проверенных записей. Если кого-то интересует это решение, просто замените приведенный ниже код. + Еще одна вещь о флажках и обновляет данные в сетке, основной флажок, который может проверять / снимать все флажки, немного глючит с расчетом суммы, если пользователь снимет флажок, то расчет суммы не сбрасывается, и тогда вы можете сделать другие суммы, которые считается с предыдущими расчетами. Но это можно исправить в коде :)

спасибо за помощь, Тони

                    var totalAmt = 0;
                function handleSelectedRow(id) {

                    var jqgcell = jQuery('#list').getCell(id, 'id');
                    var amount = jQuery('#list').getCell(id, 'amount');
                    var cbIsChecked = jQuery("#jqg_list_" + jqgcell).prop('checked');
                    var getID = jQuery("#jqg_list_" + jqgcell).closest('tr').attr('id');

                    if (cbIsChecked == true) {
                        if (amount != null) {
                            totalAmt = parseInt(totalAmt) + parseInt(amount);

                        }
                    } else {
                        if (amount != null) {
                            totalAmt = parseInt(totalAmt) - parseInt(amount);
                        }
                    }

                    grid.jqGrid('footerData', 'set', { name: 'TOTAL', tax: totalAmt });
                    $("#price").html(totalAmt);


                }

Answer 2

Мне это требование очень интересно, и я подготовил демо. Конечно, эта демонстрация требует множества других проверок и оптимизаций, но это путь к реализации требования.

Есть некоторые важные настройки и события: я предполагаю, что выбраны все строки, и при разбиении по страницам, сортировке и т.д. c мы сбрасываем выделение (параметр selectarrrow) в событии beforeProcessing.

Событие onSelectRow немного сложно, но оно требуется с момента текущей реализации.

Спасибо вам, у нас есть другие направления добавления новых функций и улучшений в Guriddo jqGrid.

Здесь - это демо

и ниже код:

    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: 'data.json',
            mtype: "GET",
            datatype: "json",
            colModel: [
                { label: 'OrderID', name: 'OrderID', key: true, width: 155 },
                { label: 'Customer ID', name: 'CustomerID', width: 70 },
                { label: 'Order Date', name: 'OrderDate', width: 150 },
                { 
                    label: 'Freight', 
                    name: 'Freight', 
                    width: 150,
                    formatter: 'number',
                    summaryTpl : "<b>{0}</b>",
                    summaryType: "sum"
                },
                { label: 'Employee ID', name: 'EmployeeID', width: 150 }
            ],
            loadonce:true,
            viewrecords: true,
            rowList: [20,30,50],
            width: 780,
            height: 250,
            rowNum: 20,
            multiselect : true,
            sortname: 'OrderDate',
            pager: "#jqGridPager",
            grouping: true,
            beforeProcessing: function(data) {
                // reset the seleted rows after any seoring paging and ets.
                this.p.selarrrow =[];
                // put the new rows as selected 
                for(var i=0;i<this.p.rowNum;i++) {
                    if(data.rows[i]) {
                        this.p.selarrrow.push(data.rows[i].OrderID);
                    }
                }
                return true;
            },
            preserveSelection : true,
            onSelectRow : function( rowid, status, event ) {
                var row = this.rows.namedItem( rowid );
                // determine the row index of selected row
                var index = row.rowIndex;
                // determine the level of grouping
                var groups = this.p.groupingView.groupField.length;
                // groups have specified id 
                var groupsid = this.p.id+'ghead_';
                var indexdata = [], sums=[], i;
                index--;
                // loop in reverse order to find the group headers
                while(index > 0 || (groups-1) >= 0 ) {
                    var searchid = groupsid +(groups-1);
                    // if the current id is a current group
                    if( this.rows[index] && this.rows[index].id.indexOf(searchid) !== -1) {

                        groups--;
                        // save the index of the parent group
                        indexdata[groups] = this.rows[index].rowIndex;
                        // put the sum of the Freigth (note that this is index 4)
                        sums[groups] = $(this.rows[row.rowIndex].cells[4]).text();
                    }
                    index--;
                }
                for(i=0;i<indexdata.length; i++) {
                    // fet the sum of the group
                    var suma = $(this.rows[indexdata[i]].cells[3]).text();
                    // if selected increase
                    if(status) {
                        suma = parseFloat(suma) + parseFloat(sums[i]);
                    } else {
                        suma = parseFloat(suma) - parseFloat(sums[i]) ;
                    }
                    // set the new calcculated value
                    $(this.rows[indexdata[i]].cells[3]).html( '<b>'+suma.toFixed(2)+'</b>' );
                }
            },
            groupingView: {
                groupField: ["CustomerID", "EmployeeID"],
                groupColumnShow: [true, true],
                groupText: [
                    "CustomerID: <b>{0}</b>",
                    "EmployeeID: <b>{0}</b>"
                ],
                groupOrder: ["asc", "asc"],
                groupSummary: [true, false],
                groupSummaryPos: ['header', 'header'],
                groupCollapse: false
            }
        });
    });