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:
postData
permite que você carregue valores reais de todos os controles usados até o momento de recarregar; 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:
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.