DoCow
  1. DoCow
  3. Como filtrar os dados do jqGrid NÃO usando a checkbox de pesquisa / filtro integrada

Como filtrar os dados do jqGrid NÃO usando a checkbox de pesquisa / filtro integrada

Eu quero que os usuários possam filtrar os dados da grade sem usar a checkbox de pesquisa intrínseca.

Eu criei dois campos de input para data (de e para) e agora preciso dizer à grade para adotar isso como seu filtro e, em seguida, para solicitar novos dados.

Forjar uma solicitação de servidor para dados de grade (ignorando a grade) e configurar os dados da grade para que os dados de resposta não funcionem – porque assim que o usuário tentar reordenar os resultados ou alterar a página, etc. a grade solicitará novos dados do servidor usando um filtro em branco.

Eu não consigo encontrar a API de grade para conseguir isso – alguém tem alguma idéia? Obrigado.

Seu problema pode ser muito fácil de resolver com relação postData parâmetro postData incluindo funções e trigger('reloadGrid') . Eu tento explicar a ideia mais detalhada.

Vamos usar o mtype: "GET" . A única coisa que a checkbox padrão de pesquisa / filtro faz depois de exibir a interface é acrescentar alguns parâmetros adicionais à URL, enviar para o servidor e recarregar os dados da grade. Se você tem sua própria interface para pesquisar / filtrar (alguns controles de seleção ou checkboxs de seleção, por exemplo), basta append seu URL e recarregar a grade com relação ao trigger('reloadGrid') . Para redefinir as informações na grade, você pode escolher qualquer forma que preferir. Por exemplo, você pode include nos controles de seleção que você tem uma opção como “sem filtragem”.

Para ser mais exato seu código deve se parecer com o código da resposta como recarregar o jqgrid no asp.net mvc quando eu mudo o dropdownlist : 

 var myGrid = jQuery("#list").jqGrid({ url: gridDataUrl, postData: { StateId: function() { return jQuery("#StateId option:selected").val(); }, CityId: function() { return jQuery("#CityId option:selected").val(); }, hospname: function() { return jQuery("#HospitalName").val(); } } // ... }); // var myReload = function() { myGrid.trigger('reloadGrid'); }; var keyupHandler = function (e,refreshFunction,obj) { var keyCode = e.keyCode || e.which; if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/|| keyCode === 35 /*end*/|| keyCode === 36 /*home*/|| keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) { if (typeof refreshFunction === "function") { refreshFunction(obj); } } }; // ... $("#StateId").change(myReload).keyup(function (e) { keyupHandler(e,myReload,this); }); $("#CityId").change(myReload).keyup(function (e) { keyupHandler(e,myReload,this); });

Se o usuário alterar a opção selecionada na checkbox de seleção com id=StateId ou outra checkbox de seleção com id=CityId (com mouse ou teclado), a function myReload será chamada, o que apenas forçará o recarregamento de dados em jqGrid. Durante a solicitação $.ajax correspondente, que o jqGrid faz para nós, o valor do parâmetro postData será encaminhado para $.ajax como parâmetro de data . Se algumas das propriedades dos data forem funções, essa function será chamada por $.ajax . Assim, os dados reais das checkboxs de seleção serão carregados e todos os dados serão anexados aos dados enviados ao servidor. Você só precisa implementar a leitura desses parâmetros na sua parte do servidor.

Assim, os dados do parâmetro postData serão anexados à url (os símbolos ‘?’ E ‘&’ serão adicionados automaticamente e todos os símbolos especiais, como espaços em branco, serão também codificados como de costume). As vantagens do uso de postData são:

  1. o uso de funções dentro do parâmetro postData permite que você carregue valores reais de todos os controles usados ​​até o momento de recarregar;
  2. Seu código fique com estrutura muito clara.
  3. Tudo funciona bem, não só com solicitações HTTP GET, mas com HTTP POST também;

Se você usar algumas inputs “sem filtragem” ou “todas” na checkbox de seleção StateId , poderá modificar a function que calcula o valor do parâmetro StateId que deve ser anexado à URL do servidor de 

 StateId: function() { return jQuery("#StateId option:selected").val(); }

para algo como seguir: 

 StateId: function() { var val = jQuery("#StateId option:selected").val(); return val === "all"? "": val; }

No lado do servidor, você não deve filtrar StateId se receber um valor vazio como parâmetro.

Opcionalmente, você pode usar myGrid.setCaption('A text'); para alterar um título de grade. Isso permite que o usuário veja mais claro, que os dados na grade são filtrados com alguns critérios.

Eu tinha os mesmos requisitos e (com a ajuda de Oleg) descobri isso:

insira a descrição da imagem aqui

Basicamente, o usuário começa a digitar na checkbox de texto “Employee name” e imediatamente os resultados são mostrados no jqGrid.

Detalhes de como eu implementei isso aqui:

jqGrid – Alterar filtro / pesquisa pop-up formulário – para ser plana na página – não é um diálogo

Observe que carrego especificamente todos os dados JSON para meu jqGrid antecipadamente e que, para grandes conjuntos de dados, há um atraso ao executar esse código em um dispositivo iPhone / Android enquanto você digita cada caractere.

Mas, para aplicativos da web para desktop, é uma ótima solução e torna o jqGrid muito mais amigável para o usuário.

Usando as ReloadGrid() e jquery , você pode criar suas próprias funções de filtragem personalizadas.

Intereting Posts