Question

我在Ignore case while grouping看到了此链接。所以我实现了它并且它工作得很好，但由于某些原因，它不适用于某些数据。

如果我按照制造和制造分组，那里，雪佛兰Tahoe显示3个单独的“Tahoe”行。如何允许多个分组才能工作？

源代码位于https://dealerapp-test.bookitout.com/testcase1.html，其中包含jqgridData的数据值，因为它不适合此处，因为超过30000个字符错误。在那个网页上，打开雪佛兰然后寻找“Tahoe”。

这里没有jqgridData值的短版本......

<!DOCTYPE html>  

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- This force IE to use the latest version of HTML, CSS and JavaScript instead of being forced to use 1 specific IE version only -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />  
<title>....</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.4/ui.jqgrid.css" />
<script type="text/javascript" src="scripts/jquery-v2.0.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="scripts/jqgrid-v4.5.4/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="scripts/jqgrid-v4.5.4/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var jqgridSpreadsheetId = 'MyInventoryJqgrid_Spreadsheet';
        var jqgridPagerId = 'MyInventoryJqgrid_Pager';
        var jqgridData = "<<Data not included>>";

        //jqgridSpreadsheetId.useJSON = true;

        //jqGrid Plugin...
        //http://www.trirand.com...
        $('#'+jqgridSpreadsheetId).jqGrid({
            //url: "jsonResult.json", //jqgridData, //'server.php?q=5',
            //datatype: "json",
            datatype: 'jsonstring', //'json',
            datastr: jqgridData,
            colNames: ['Id', 'Accepted-Id', 'Rejected-Message', 'Import Status', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory', 'Hidden-Inventory-Tracker-Location-Id', 'Inventory Tracker Location', 'Category'],  
            colModel:[
                {name: 'Id', index: 'Id', sortable: false, width: 0, align: 'left', hidden: true, },  
                {name: 'AcceptedId', index: 'AcceptedId', sortable: false, width: 0, align: 'left', hidden: true,},  
                {name: 'RejectedMessage', index: 'RejectedMessage', sorttype: 'text', width: 60, align: 'center', hidden: true, },  
                {name: 'ImportStatus', index: 'ImportStatus', sorttype: 'text', width: 60, align: 'center' },  
                {name: 'StockNumber', index: 'StockNumber', sorttype: 'text', align: 'center'},
                {name: 'Vin', index: 'Vin', sorttype: 'text', width: 190, align: 'center' },
                {name: 'Year', index: 'Year', sorttype: 'int', align: 'center' },
                {name: 'Make', index: 'Make', sorttype: 'text', align: 'center' },
                {name: 'Model', index: 'Model', sorttype: 'text', align: 'center' },
                {name: 'Trim', index: 'Trim', sorttype: 'text', align: 'center' },
                {name: 'Mileage', index: 'Mileage', sorttype: 'int', align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '0' } },
                {name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                {name: 'StockDate', index: 'StockDate', sorttype: 'date', align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
                {name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                {name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },  
                {name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } },
                {name: 'InventoryTrackerLocationId', sortable: false, width: 0, align: 'left', hidden: true,},  
                {name: 'InventoryTrackerLocation', index: 'InventoryTrackerLocation', sorttype: 'text', align: 'center' },
                {name: 'Category', index: 'Category', sorttype: 'text', align: 'center' }
            ],
            rowNum: 1000000000,  //-1, //10,  //06/13/2013 - It is reported that the use of "-1" broke jqGrid when loadonce:true is used.  Alternatively, use the max # of rows...
            rowList: [], //#[10,20,30],  //Disable page size dropdown...
            pager: '#'+jqgridPagerId,
            pgbuttons: false,  //Disable page control like next, back button...
            pgtext: null,  //Disable pager text line like "Page 0 of 10"...
            viewrecords: false,  //Disable current view record text like 'View 1-10 of 100'...
            sortname: 'Make ASC, Model',
            sortorder: 'ASC',
            viewrecords: true,
            sortorder: "desc",
            ignoreCase: true, //This make the local-search and sorting of values be case insensitive...
            caption: "Data Optimization",
            height: 400, 
            grouping: true, 
            groupingView: { 
                groupCollapse: true, 
                groupField: [ 'Make', 'Model' ],
                isInTheSameGroup: [ function(x, y) { return String(x).toLowerCase() == String(y).toLowerCase(); } ]  //Make it case insensitiive when grouping. (No more seperate column values of same word when groupped)...
            }
        });
    });
</script>  
</head>
<body>

    <div><table id="MyInventoryJqgrid_Spreadsheet"></table></div>
    <div id="MyInventoryJqgrid_Pager"></div>

</body>
</html>

Answer 1

您可以非常轻松地解决问题。属性isInTheSameGroup是类似于属性groupField的数组。因此，您可以指定不同的规则，以便在不同的分组级别进行分组。如果您想在两个分组级别上进行不区分大小写的分组，则应更改

groupingView: { 
    groupCollapse: true, 
    groupField: [ 'Make', 'Model' ],
    isInTheSameGroup: [
        function(x, y) { return String(x).toLowerCase() == String(y).toLowerCase(); }
    ]
}

到

groupingView: { 
    groupCollapse: true, 
    groupField: [ 'Make', 'Model' ],
    isInTheSameGroup: [
        function(x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); },
        function(x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); }
    ]
}

或

groupingView: { 
    groupCollapse: true, 
    groupField: [ 'Make', 'Model' ],
    isInTheSameGroup: [
        caseInsensitiveCompare,
        caseInsensitiveCompare
    ]
}

其中caseInsensitiveCompare定义为

var caseInsensitiveCompare = function (x, y) {
        return String(x).toLowerCase() === String(y).toLowerCase();
    };

顺便提一下the demo the answer我建议功能isInTheSameGroup最初使用两个级别分组，演示中的isInTheSameGroup是带有两个回调函数的数组：一个回调对于一个分组级别。

使用版本4.5.4对多列分组2列或更多列时出现区分大小写的问题

1 个答案: