jqgrid Toolbar如何使用搜索工具栏搜索/排序自定义格式化的列



编辑:我找到了,答案在下面

我试着看了其他问题,但还是不知道如何解决我的问题。

我用json数据加载jqGrid。下面是一个json文件的例子:

{"statut" : "Inactive","name" : [{"LinkType":"user", "LinkText":"DINGO", "LinkSrc":"9443"}], "bands":""},
{"statut" : "Active","name" : [{"LinkType":"user", "LinkText":"BONNIE", "LinkSrc":"8591"}],"bands" : [{"LinkType":"band", "LinkText":"PARADE","LinkSrc":"PARADE"},{"LinkType":"band", "LinkText":"GLORIA KILLS", "LinkSrc":"gloria kills"}]}
...

在jqGrid上,设置如下:

$("#table").jqGrid({
datatype: 'json',
url : 'json.php',
regional: 'fr',
filtering: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
ignoreCase: true,
height: '100%',
loadonce: true,
gridview: true,
colModel: [
{name: 'statut', label : 'Statut', width:100, align: 'center', stype:'select', searchoptions:{value:':All;Inactive:Inactive;Active:Active'}},
{name: 'name', label : 'Name', formatter: MyLinkFormater, unformat: MyLinkUnformater},
{name: 'bands', label : 'Bands', formatter: MyLinkFormater, unformat: MyLinkUnformater}
],
pager: '#pager',
rowList:[10,20,30,40,50,100,200,300,400,500,1000,5000],
});
jQuery("#table").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

函数如下:

function MyLinkFormater(cellvalue, options, rowObject) {
var i, res = "", linkInfo, preLink;

if (cellvalue == null || !$.isArray(cellvalue)) {
return " "; // empty cell in case or error
}

for (i = 0; i < cellvalue.length; i++) {
linkInfo = cellvalue[i];

if(linkInfo.LinkType == 'band') {
preLink = '?page=showBand&band=';
}
if(linkInfo.LinkType == 'user') {
preLink = '?page=showUser&e=1&id=';
}
res += (res.length > 0 ? ", " : "") +
'<a href="' + preLink + linkInfo.LinkSrc + '" >' + linkInfo.LinkText + '</a>';
}

return res;
}
function MyLinkUnformater(cellvalue, options, cell) {
return $('a', cell).text();
}

一切工作正常,除了搜索/排序名称或乐队列。我不知道该怎么办。我是否必须使用beforeSearch,如果是,我应该怎么做?

欢迎任何帮助,这快把我逼疯了。

好了,我终于知道了。

搜索问题

使用这个问题,我添加了我的函数来过滤格式化器

function setFilterFormatters(formatters)
{
function columnUsesCustomFormatter(column_name)
{
for (var col in formatters)
{
if (col == column_name)
return true;
}
return false;
}

var accessor_regex = /jQuery.jgrid.getAccessor(this,'(.+)')/;

var oldFrom = $.jgrid.from;
$.jgrid.from = function(source, initialQuery) {
var result = oldFrom(source, initialQuery);
result._getStr = function(s) {
var column_formatter = 'String';

var column_match = s.match(accessor_regex, '$1');
if (column_match && columnUsesCustomFormatter(column_match[1]))
{
column_formatter = formatters[column_match[1]];
}

var phrase=[];
if(this._trim) {
phrase.push("jQuery.trim(");
}
phrase.push(column_formatter+"("+s+")");
if(this._trim) {
phrase.push(")");
}
if(!this._usecase) {
phrase.push(".toLowerCase()");
}
return phrase.join("");
}

return result;
};
}
setFilterFormatters({'name':'my_formatter','bands':'my_formatter'});

my_formatter函数

function my_formatter(cellValue) 
{ 
var i, res = "", linkInfo;
if(cellValue==null || !$.isArray(cellValue)) {
res += ' ';
} else {
for (i = 0; i < cellValue.length; i++) {
linkInfo = cellValue[i];
res +=  linkInfo.LinkText + ' ';
}
}
return $.map(cellValue,function(element) { return res; }).join(', ');

}

排序问题

为了解决排序问题,我使用了这个答案,并将设置排序类型添加到只返回文本信息的相关列,即:

{name: 'name', label : 'Name', index: 'name', formatter: MyLinkFormater, unformat:MyLinkUnformater, sorttype:function(cell, obj){ 
return cell + '_' +obj.name[0].LinkText; 
}},

最新更新