jqgrid中grouptext的自定义格式化程序 [英] custom formatter for grouptext in jqgrid
问题描述
有没有办法可以使用自定义格式化程序来格式化jqgrid中的 grouptext 值。
Is there a way I can use custom formatter to format the grouptext value in jqgrid.
当前输出var grouping = new Array（环境，系统，IIR，Userlimit，内核参数）;
假设我有这些组。
Current Output for var grouping=new Array("Environment", "System", "IIR","Userlimit","Kernel Parameters");
Suppose I have these groups.
var grouping=new Array("3Environment", "0System", "4IIR","2Userlimit","1Kernel Parameters");
如果按升序对其进行排序，则应显示 System，Kernel，Userlimit ，环境，IIR 即，使用某种自定义格式化程序从第1个字符中移除 01234 或类似于在某些已经决定的情况下对我的组进行排序订单。
If I sort it in ascending order it should display System, Kernel, Userlimit, Environment, IIR i.e., using some kind of custom formatter remove 01234 from 1st character or similar to sort my groups in some already decided order.
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'});
更新
或者有没有办法使用定位来放置每个分组项目，如果排序不是一个选项
Or is there a way to use positioning to place each grouped item, if sorting is not an option
在接受Oleg的回答后更新
Page1
Page1
Page3
Page3
推荐答案
在我看来，你对grouptext的自定义格式化程序没有问题
It seems to me that you have not the problem with the custom formatter of the grouptext
您使用 groupingView 拥有 groupDataSorted：false 以便对组进行排序（在您的情况下 groupField：['subCategory'] with groupOrder：['asc'] ）为你做jqGrid。因此将使用标准排序行为。
You use groupingView having groupDataSorted: false so the sorting of the group (in your case groupField: ['subCategory'] with groupOrder: ['asc']) do jqGrid for you. So the standard sorting behavior will be used.
jqGrid支持<$ href =http：的 sorttype 属性//www.trirand.com/jqgridwiki/doku.php?id=wiki%3acolmodel_options\"rel =nofollow> colModel ，用于定义列的排序方式。如果您需要自定义排序顺序，则应将 sorttype 属性定义为一个函数，该函数返回使用而不是列中单元格值的整数或字符串。 sorttype 函数的原型可能是函数（cellValue，rowData）因此可以定义不是将仅使用已排序列的单元格值，但整个包含行包含 _id _ 属性。在你的情况下，使用第一个 cellValue 参数就足够了。
jqGrid supports sorttype property of the colModel which define how the column should be sorted. If you need custom sorting order you should define sorttype property as a function which returns integer or string used instead of the cell value from the column. the prototype of the sorttype function could be function(cellValue,rowData) so it is possible to define the order which not only the cell value of the sorted column will be used but the whole contain of the row inclusive _id_ property. In you case the usage of the first cellValue parameter would be enough.
所以要解决你的问题，你可以为示例定义一个数组，其中包含您需要的'subCategory'值的顺序：
So to solve you problem you can for example define an array with the order of 'subCategory' values which you need:
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阵列。因此，在 orderOfSubCategory 数组中找不到的'subCategory'的值将放在第一个。请参阅此处相应的演示。
You should don't forget, that jQuery.inArray return 0-based index of the item or -1 if the item will be not found in the array. So the values of 'subCategory' which could be not found in the orderOfSubCategory array will be placed the first. See here the corresponding demo.
关于您的代码的一些其他小评论。你使用 new Array（...）这在JavaScript中是不好的做法而不是你应该总是使用 [...] 构造相同的构造更短并且工作迅速。示例： var grouping = [Environment，System，IIR，Userlimit，Kernel Parameters];
Some other small remarks about your code. You use new Array(...) which is bad practice in JavaScript instead of that you should use always [...] construct which do the same is shorter and work quickly. Example: var grouping = ["Environment", "System", "IIR","Userlimit","Kernel Parameters"];
另一个难以为我阅读的地方是：
Another place which is difficult for to read for me is:
$('#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 =0cellpadding =0 表的属性是不需要的，秒使用 empty（）， append（）组合而不是一个 html（）调用。以下代码也是这样，但似乎我更好：
Here you first use cellspacing="0" cellpadding="0" attributes of the table which are unneeded and seconds use empty(), append() combination instead of one html() call. The following code do the same, but it seems me better:
$('#compareContent').html(
'<div id="compareParentDiv" style="display: none" width="100%">' +
'<table id="list2"></table><div id="gridpager3"></div></div>');
这篇关于jqgrid中grouptext的自定义格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
