Javascript jqgrid中grouptext的自定义格式设置程序

是否有一种方法可以使用

custom formatter

在jqgrid中格式化

grouptext

值

var分组的当前输出=新数组（“环境”、“系统”、“IIR”、“用户限制”、“内核参数”）
假设我有这些小组

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

如果我按升序排序，它应该显示
系统、内核、用户限制、环境、IIR
，也就是说，使用某种自定义格式设置程序从第一个字符中删除
01234
，或类似于按一些已确定的顺序对我的组进行排序

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

$（'#compareContent'）.empty（）；
$(''+
''+
'')
.appendTo（“#compareContent”）；
$（“#compareParentDiv”）.hide（）；
var gridDiff=$（“#列表2”）；
gridDiff.jqGrid({
datastr:compareData，
数据类型：“jsonstring”，
colNames:['KeyName'，'SubCategory'，starheader，header1，'isEqual']，
colModel：[
{name:'elementName'，index:'elementName'，key:true，width:120}，
{name:'subCategory'，index:'subCategory'，宽度：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'，宽度：1，隐藏：true}
],
寻呼机：“#gridpager3”，
rowNum:60，
滚动偏移量：1，
//viewrecords：是的，
jsonReader：{
重复项：false，
page:function（）{return 1；}，
词根：“响应”
},
//行数：对，
高度：'320'，
自动宽度：正确，
分组：对，
分组视图：{
groupField:[“子类别”]，
groupOrder:['desc']，
groupDataSorted:false，
groupColumnShow:[错误]，
//群体崩溃：是的，
groupText:['{0}']
},
loadComplete:function（）{
如果（此.p.datatype！=='local'）{
setTimeout（函数（）{
gridDiff.trigger（'reloadGrid'）；
}, 0);
}否则{
$（“#compareParentDiv”）.show（）；
}
变量i，name=this.p.groupingView.sortnames[0]，l=names.length；
data=this.p.data，rows=this.rows，item；
对于（i=0；i=0）{
$（this.jqGrid（'groupingToggle'，this.id+“ghead_”+i）；
$（rows.namedItem（this.id+“ghead_u1;”+i））.find（“span.ui图标”）。单击（function（）{
var len=data.length，iRow；
对于（iRow=0；iRow，在我看来，grouptext的自定义格式化程序没有问题

您可以使用
groupingView
将
groupDataSorted:false
作为组的排序（在您的案例中
groupField:['subCategory']
与
groupOrder:['asc']
）一起执行jqGrid。因此将使用标准排序行为

jqGrid支持的
sorttype
属性定义列的排序方式。如果需要自定义排序顺序，则应将
sorttype
属性定义为一个函数，该函数返回使用的整数或字符串，而不是列中的单元格值。
sorttype
函数的原型可以是
函数（cellValue，rowData）
，因此可以定义不仅使用已排序列的单元格值，而且包括
\u id\u
属性的行的整个包含的顺序。在您的情况下，使用第一个
cellValue
参数就足够了

因此，为了解决您的问题，您可以定义一个数组，该数组具有您需要的“子类别”值的顺序：

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

然后定义
“子类别”
列，如下所示：

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

不要忘记，如果在数组中找不到该项，则返回该项的基于0的索引或-1。因此，在
orderOfSubCategory
数组中找不到的“subCategory”值将放在第一位。请参阅相应的演示

关于您的代码的其他一些小评论。您使用
新数组（…）
，这在JavaScript中是一种不好的做法，而不应该总是使用
[…]
构造，它做同样的事情比较短而且工作很快。例如：
var-grouping=[“环境”、“系统”、“IIR”、“用户限制”、“内核参数”]；

另一个让我难以阅读的地方是：

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

非常好的解释和方法。感谢OlegI，我有一个问题，在我从您的答案中添加排序后，
IIR
进入下一页，因为
Environment
和其他超过
rowNum:60，
我希望当用户第一次看到网格时，他能够看到所有分组，如果不是所有分组，那么直到所有网格的高度分组应该显示高度：
height:'320'，

。我还需要分页，因为

Environment

可以有100多个值。有没有可能有这样的解决方案？我添加了一个屏幕shot@AbhishekSimon：如果您将服务器生成的第一页中的数据放入所有组中至少一项，并使用服务器端分页您的新要求可以实现。如果您不想进行服务器端分页，我认为使用

rowNum:1000

是唯一的方法。我们不能在这里对组进行某种定位吗`var I，names=this.p.groupingView.sortnames[0]，l=names.length；for（I=0；I=0）{$（this）.jqGrid（'groupingToggle'，this.id+“ghead_”+i）}否则{//隐藏分组行

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