我有一个jqgrid应用程序。我在左侧面板上有过滤器(带有复选框),主面板中的网格应仅列出过滤的行。它实际上有效,但只有在单击列的名称并对列进行排序后才会有效。
创建过滤器的功能如下:
function filtraTablaElemRegFiltros(filtroZona, filtroEnt,filtroVal){
filtroORZona={groupOp:"OR",rules:[]};
filtroOREnt={groupOp:"OR",rules:[]};
filtroORVal={groupOp:"OR",rules:[]};
filtro = {groupOp:"AND",groups:[]};
var grid = $("#tabla");
var filtroZonaArray= new Array();
var filtroEntArray= new Array();
var filtroValArray= new Array();
todosElemReg= grid.jqGrid('getGridParam', 'data');
filtroZonaArray=filtroZona.split("-");
filtroEntArray=filtroEnt.split("-");
filtroValArray=filtroVal.split("-");
for(i=1;i<filtroZonaArray.length;i++){
filtroORZona.rules.push({"field":"nombre","op":"bw","data":filtroZonaArray[i]});
}
for(i=1;i<filtroEntArray.length;i++){
filtroOREnt.rules.push({"field":"entidadCod","op":"eq","data":filtroEntArray[i]});
}
for(i=1;i<filtroValArray.length;i++){
filtroORVal.rules.push({"field":"validado","op":"eq","data":filtroValArray[i]});
}
filtro.groups.push(filtroORZona);
filtro.groups.push(filtroOREnt);
filtro.groups.push(filtroORVal);
grid[0].p.search = filtro.groups.length > 0; //busca si filtro no está vacío
$.extend(grid[0].p.postData,{filters:JSON.stringify(filtro)});
grid.trigger("reloadGrid",[{page:1}]);
}
创建网格:
tableToGrid("#tabla",
{
caption:'Lista de elementos de registro',
datatype:'json',
mtype:'POST',
loadonce:true,
jsonReader:{repeatitems: false, id:"0"},
url:'json/ElemRegJQGrid.jsp',
editurl:'json/operacionesElemReg.jsp',
postData:{codigo_descarga:codigo_descarga,filtroZona:filtroZona,filtroEnt:filtroEnt,filtroVal:filtroVal},
colNames:[
'Codigo','Nombre','Latitud','Longitud','Altura','Fecha/hora toma','Comentario', 'Direccion','Numero', 'Serigrafia','Cota','Tipo Registro Codigo','Tipo de registro', 'Entidad codigo','Entidad','Validado'
],
colModel:[
{name:'codigo',index:'codigo',editable:false,key:true},
{name:'nombre',index:'nombre',editable:true},
{name:'latitud',index:'latitud',editable:false,editrules:{required:true},width:'100'},
{name:'longitud',index:'longitud',editable:false,editrules:{required:true},width:'100'},
{name:'altura',index:'altura',editable:false,formatoptions:{defaulvalue:0},width:'75'},
{name:'fecha',index:'fecha',editable:false,sorttype:'date',align:'center',width:'250',formatter:'datetime', formatoptions:{srcFormat:'Y-m-d H:i:s',newformat: 'd-m-Y'}, searchoptions:{dataInit:datePick, attr:{title:'Elija Fecha'}},editoptions:{dataInit:datePick}},
{name:'comentario',index:'comentario',editable:true},
{name:'direccion',index:'direccion',editable:true},
{name:'direccion_numero',index:'direccion_numero',formater:'integer',editable:true, width:'70', defaultvalue:0},
{name:'serigrafia',index:'serigrafia',editable:true, formater:'text',width:'120'},
{name:'cota',index:'cota',editable:true,formater:'integer', defaultvalue:0, width:'50'},
{name:'tipoelemregCod',index:'tipoelemregCod',hidden:true,stype:'select',searchoptions:{dataUrl:'json/tiposElemReg.jsp',searchhidden:true},editable:true,edittype:'select',editoptions:{dataUrl:'json/tiposElemReg.jsp'}},
{name:'tipoelemregNom',index:'tipoelemregNom',stype:'select',searchoptions:{dataUrl:'json/tiposElemReg.jsp',searchhidden:true},editable:true,edittype:'select',editoptions:{dataUrl:'json/tiposElemReg.jsp'}},
{name:'entidadCod',index:'entidadCod',hidden:true,stype:'select',searchoptions:{dataUrl:'json/entidades.jsp',searchhidden:true},editable:true,edittype:'select',editoptions:{dataUrl:'json/entidades.jsp'}},
{name:'entidadNom',index:'entidadNom',stype:'select',searchoptions:{dataUrl:'json/entidades.jsp',searchhidden:true},editable:true,edittype:'select',editoptions:{dataUrl:'json/entidades.jsp'}},
{name:'validado',index:'validado',editable:false, width:'50',cellattr:
function (rowId, val, rawObject, cm, rdata) {
var color = "";
switch (val){
case "VALIDO":
color="green";
break;
case "INVALIDO":
color="red";
break;
case "PENDIENTE":
color="yellow";
break;
}
return 'style="background-color:' + color +'" title="'+val+'"';
}
}
],
sortable:true,
height:'auto',
pager:jQuery('#navegacion'),
viewrecords:true,
rowNum:25,
rowList:[10,15,20,25,50,75,100,150,200,500,1000,2500],
multiselect:'true',
cellEdit: true,
cellurl:'json/operacionesElemRegCellEdit.jsp',
ondblClickRow:sacaMapaWPTUnico
});
loadComplete: filtraTablaElemRegFiltros(filtroZona,filtroEnt,filtroVal);
}
左侧面板html包括:
<div id="validacion">
<input type="checkbox" name="valSelect" id="VALIDO" onclick="filtrarContenido()" /><label for="VALIDO">Validado</label>
<input type="checkbox" name="valSelect" id="INVALIDO" onclick="filtrarContenido()" /><label for="INVALIDO">Invalidado</label>
<input type="checkbox" name="valSelect" id="PENDIENTE" onclick="filtrarContenido()" /><label for="PENDIENTE">Pendiente</label>
</div>
函数filtrarContenido()调用主面板url并在GET参数中发送复选框:
function filtrarContenido(){
var valorZona="";
var valorEnt="";
var valorVal="";
$("input:checkbox[name=zonaSelect]:checked").each(function() {
valorZona=valorZona+"-"+$(this).attr('id');
});
$("input:checkbox[name=entSelect]:checked").each(function() {
valorEnt=valorEnt+"-"+$(this).attr('id');
});
$("input:checkbox[name=valSelect]:checked").each(function() {
valorVal=valorVal+"-"+$(this).attr('id');
});
urlPrincipal=document.getElementById("principal").contentWindow.location.href;
posArgumentos=urlPrincipal.search('codigo_descarga');
if(posArgumentos!='-1') urlPrincipal=urlPrincipal.substring(0,posArgumentos-1);
urlNueva=urlPrincipal+'?codigo_descarga=0'+'&'+'filtroZona='+valorZona+'&'+'filtroEnt='+valorEnt+'&'+'filtroVal='+valorVal;
document.getElementById("principal").contentWindow.location.href=urlNueva;
}
任何人都可以帮助我吗?单击复选框后为什么不显示过滤后的数据?它实际上是过滤它们,但在点击排序列之前它不会显示它们。
感谢阅读!