настраиваемый форматер для группового текста в jqgrid

Question

Можно ли использовать custom formatter для форматирования значения grouptext в jqgrid.

Токовый выход для var grouping=new Array("Environment", "System", "IIR","Userlimit","Kernel Parameters"); Предположим, у меня есть эти группы.

var grouping=new Array("3Environment", "0System", "4IIR","2Userlimit","1Kernel Parameters");

Если я сортирую его в порядке возрастания, он должен отобразить System, Kernel, Userlimit, Environment, IIR, т. Е. С помощью какого-либо специального средства форматирования удалить 01234 из 1-го символа или аналогично отсортировать мои группы в некотором уже определенном порядке .

jqGrid-код

$('#compareContent').empty();
        $('<div id="compareParentDiv" width="100%">'+
          '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
                '<div id="gridpager3"></div></div>')
        .appendTo('#compareContent');

        $("#compareParentDiv").hide();

        var gridDiff = $("#list2");
        gridDiff.jqGrid({
            datastr: compareData,
            datatype: "jsonstring",
            colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'],
            colModel: [
                { name: 'elementName', index: 'elementName', key: true, width: 120 },
                { name: 'subCategory', index: 'subCategory', width: 1 },
                { name: 'firstValue', index: 'firstValue', width: 310, jsonmap:'attribute.0.firstValue' },
                { name: 'secondValue', index: 'secondValue', width: 310,jsonmap:'attribute.0.secondValue' },
                { name: 'isEqual', index: 'isEqual', width: 1,hidden:true}
            ],
            pager: '#gridpager3',
            rowNum:60,
            scrollOffset:1,
            //viewrecords: true,
            jsonReader: {
                repeatitems: false,
                page: function(){return 1;},
                root: "response"
            },
            //rownumbers: true,

            height: '320',
            autowidth:true,
            grouping: true,

            groupingView: {
                groupField: ['subCategory'],
                groupOrder: ['desc'],
                groupDataSorted : false,
                groupColumnShow: [false],
                //groupCollapse: true,
                groupText: ['<b>{0}</b>']

            },

            loadComplete: function() {
                if (this.p.datatype !== 'local') {
                    setTimeout(function () {
                       gridDiff.trigger('reloadGrid');
                   }, 0);
                } else {
                    $("#compareParentDiv").show();
                }

                var i, names=this.p.groupingView.sortnames[0], l = names.length;
                 data = this.p.data, rows = this.rows, item;


                for (i=0;i<l;i++) {
                    if ($.inArray(names[i],grouping) >= 0) {

                        $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);

                        $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){
                            var len = data.length, iRow;
                            for (iRow=0;iRow<len;iRow++) {
                                item = data[iRow];
                                if (item.isEqual) {
                                    $(rows.namedItem(item._id_)).hide();
                                }
                            }
                        });

                    } else {
                        // hide the grouping row
                        $('#'+this.id+"ghead_"+i).hide();
                    }
                    //console.info($('#'+this.id+"ghead_"+i));
                }

                var i, names=this.p.groupingView.sortnames[0], l = names.length,
                data = this.p.data, rows = this.rows, item; 

                l = data.length;
                for (i=0;i<l;i++) {
                    item = data[i];
                    if (!item.isEqual) {
                        $(rows.namedItem(item._id_))
                            .css({
                                "background-color": "#FFE3EA",
                                "background-image": "none"
                            });
                    } else {
                        $(rows.namedItem(item._id_)).hide();
                    }
                }
            }
        });
        gridDiff.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: false });
        gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
            onClickButton:function(){
                gridDiff[0].toggleToolbar();
            } 
        });
        gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
            onClickButton:function(){
                gridDiff[0].clearToolbar();
            } 
        });
        gridDiff.jqGrid('filterToolbar',
                {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

Обновление

Или есть способ использовать позиционирование для размещения каждого сгруппированного элемента, если сортировка не возможна

Обновлено после принятия ответа от Олега

Page1

Page3

Answer 1

Мне кажется, что у вас нет проблем с пользовательским форматером группового текста

Вы используете groupingView с groupDataSorted: false, поэтому сортировка группы (в вашем случае groupField: ['subCategory'] с groupOrder: ['asc']) сделайте jqGrid для вас.Таким образом, будет использоваться стандартное поведение сортировки.

jqGrid поддерживает sorttype свойство colModel , которое определяет способ сортировки столбца.Если вам нужен пользовательский порядок сортировки, вы должны определить свойство sorttype как функцию, которая возвращает целое число или строку, используемую вместо значение ячейки из столбца.прототип функции sorttype может быть function(cellValue,rowData), поэтому можно определить порядок, в котором будет использоваться не только значение ячейки отсортированного столбца, но и все содержимое свойства строки включительно _id_.В вашем случае будет достаточно использовать первый cellValue параметр.

Таким образом, чтобы решить вашу проблему, вы можете, например, определить массив с порядком нужных вам значений «подкатегории»:

var orderOfSubCategory = [
    "System", "system", "Kernel", "Kernel Parameters", "Userlimit",
    "Environment", "IIR", "Product"
];

, а затем определите столбец 'subCategory' следующим образом:

{
    name: 'subCategory',
    index: 'subCategory',
    width: 1,
    sorttype: function (value) {
        return $.inArray(value, orderOfSubCategory);
    }
}

Не следует забывать, что jQuery.inArray возвращает основанный на 0 индекс элемента или-1, если элемент не будет найден в массиве.Таким образом, значения 'subCategory', которые не могут быть найдены в массиве orderOfSubCategory, будут помещены первыми.См. здесь соответствующее демо.

Некоторые другие небольшие замечания о вашем коде.Вы используете new Array(...), что является плохой практикой в ​​JavaScript, вместо того, чтобы использовать всегда конструкцию [...], которая делает то же самое, короче и работает быстрее.Пример: var grouping = ["Environment", "System", "IIR","Userlimit","Kernel Parameters"];

Еще одно место, которое мне трудно читать, это:

$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
  '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
        '<div id="gridpager3"></div></div>')
    .appendTo('#compareContent');
$("#compareParentDiv").hide();

Здесь вы впервые используете cellspacing="0" cellpadding="0" атрибуты table, которые не нужны, и секундыиспользуйте комбинацию empty(), append() вместо одного html() вызова.Следующий код делает то же самое, но мне кажется, лучше:

$('#compareContent').html(
    '<div id="compareParentDiv" style="display: none" width="100%">' +
    '<table id="list2"></table><div id="gridpager3"></div></div>');