过滤器仅在手动排序后在jqgrid中工作

时间:2014-02-21 11:47:23

标签: jqgrid filtering

我有一个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;

}

任何人都可以帮助我吗?单击复选框后为什么不显示过滤后的数据?它实际上是过滤它们,但在点击排序列之前它不会显示它们。

感谢阅读!

0 个答案:

没有答案