jqgrid中grouptext的自定义格式化程序

时间：2011-08-04 11:56:43

标签： javascript jquery jqgrid

我是否可以使用custom formatter格式化jqgrid中的grouptext值。

var grouping=new Array("Environment", "System", "IIR","Userlimit","Kernel Parameters");的当前输出 enter image description here 假设我有这些组。

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

如果我按升序对其进行排序，则应显示System, Kernel, Userlimit, Environment, IIR，即使用某种自定义格式化程序从第1个字符中移除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'});

更新

或者有没有办法使用定位来放置每个分组的项目，如果排序不是一个选项

接受Oleg的回答后更新

第1页 Page1

第3页 Page3

1 个答案:

答案 0 :(得分：1)

在我看来，你没有使用grouptext

的自定义格式化程序的问题

您使用groupingView groupDataSorted: false，因此对您进行排序（在您的情况下为groupField: ['subCategory'] groupOrder: ['asc']）为您执行jqGrid。因此将使用标准排序行为。

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

因此，为了解决您的问题，您可以例如使用您需要的'subCategory'值的顺序定义一个数组：

cellValue

然后定义var orderOfSubCategory = [ "System", "system", "Kernel", "Kernel Parameters", "Userlimit", "Environment", "IIR", "Product" ]; 列如下：

'subCategory'

你应该不要忘记，jQuery.inArray返回项目的基于0的索引，如果在数组中找不到项目，则返回-1。因此，{ name: 'subCategory', index: 'subCategory', width: 1, sorttype: function (value) { return $.inArray(value, orderOfSubCategory); } } 数组中找不到的'subCategory'的值将放在第一个。请参阅here相应的演示。

关于您的代码的其他一些小评论。您使用orderOfSubCategory这是JavaScript中的错误做法，而不是您应该始终使用new Array(...)构造，这样做会更短并且工作更快。示例：[...]

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

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(); 的{​​{1}}属性，这些属性是不需要的，秒使用cellspacing="0" cellpadding="0"，table组合而不是empty()次调用。以下代码也是如此，但似乎我更好：

append()
相关问题
最新问题