jqGrid复选框分组总结

Question

我想问问某人，当用户 check/uncheck 复选框时，是否有机会更改 header 中的摘要。我创建了计算总和并将其打印到标签中的函数（此时我跳过了解决组问题）。

我在某处找到了一些解决方案，如 discart header 并再次生成它，但它仅适用于主要 header，不适用于组 headers

这是我的示例代码

  $(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

这个需求我觉得很有意思，准备了一个demo。当然这个demo还需要做很多其他的检查和优化，但是实现需求是ha的一个方向。

有一些值得注意的设置和事件：我假设所有行都被选中，并且在分页、排序等时我们在 beforeProcessing 事件中重置选择（selectarrrow 参数）。

onSelectRow 事件有点复杂，但这是当前实现所必需的。

感谢您，我们有另一个方向可以在 Guriddo jqGrid 中添加新功能和改进。

这里is a demo

及代码下方：

    $(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
            }
        });
    });

Answer 2

感谢您的回答，您的演示正是我所需要的。我试图继续我发布的代码，此时我正处于同步状态，用户只为检查的记录获得总和。如果有人对此解决方案感兴趣，则只需替换下面的代码。 +关于复选框和更新网格中数据的另一件事，可以 check/uncheck 所有复选框的主复选框在求和计算方面有点问题，如果用户取消选中主复选框，则求和计算不会重置，然后您可以进行另一次求和与之前的计算一起计算。但这可以在代码中修复:)

谢谢你帮助托尼

                    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);


                }

jqGrid复选框分组总结

jqGrid checkbox grouping summary

jqgrid

jqgrid-asp.net