jqGrid: usando vários methods para filtrar dados

Meu requisito é mostrar uma página com vários filtros para aplicar aos dados da grade.

Suponha que estamos falando de pedidos e um pedido tem os seguintes atributos

public class Order { public int OrderID public DateTime OrderDate public DateTime ShipmentDate public int OrderTotal public int OrderStatus } 

Dentro do object jqgrid eu estou mostrando todos os atributos, exceto o OrderStatus

O requisito é criar uma visão que tenha

  • o jqGrid na parte esquerda
  • um painel à direita

Dentro do painel direito, o usuário verá uma lista de checkboxs de seleção que representa todos os valores possíveis de OrderStatus e ele deseja pesquisar usando ambos os methods (por exemplo, selecionando a checkbox de seleção “Pedidos enviados” e filtrando a grade com valor maior que um valor)

Eu já configurei a filtragem avançada ( multiplesearch:true ) dentro do object jqGrid e sou capaz de criar filtros complexos combinando campos e operadores lógicos.

Alguma idéia de como posso enviar até mesmo os dados do painel direito quando o usuário pressiona o botão de pesquisa?

Atualização 1 :

Preâmbulo: Oleg amostra é fantástica, mas infelizmente não se encheckbox requisitos do meu cliente 🙁

@ Oleg: Eu não entendo porque você pensa que:

Se os dados estiverem fora da grade, você mostrará os detalhes do pedido no painel direito somente para a linha selecionada. Portanto, o usuário não terá uma visão geral tão boa dos dados.

talvez minha descrição não tenha sido tão clara, mas não mostrarei nenhum detalhe do pedido. Para esclarecer melhor minha exigência, modifiquei sua amostra para mostrar a UI final desejada, como na imagem a seguir: UI como o cliente quer

O cliente deseja filtrar os dados na grade usando dois methods ou os dois juntos:

  • Usando os resources de multiplesearch fornecidos pela própria grade (obrigado pela menção de contorno)
  • Usando o painel de pesquisa personalizado (aquele com as checkboxs de seleção à direita) fornecido

Do ponto de vista funcional, o requisito é muito fácil de expressar: Quando o usuário clica em uma checkbox de seleção ou faz uma pesquisa usando a pesquisa multiplesearch nativa, devo postar valores para o servidor, incluindo também o estado das checkboxs de seleção.

Para resumir, devo:

  • Adicione o estado das checkboxs de seleção quando uma postagem é feita por meio da pesquisa multiplesearch nativa
  • Adicione o estado atual de multiplesearch (se houver) quando o usuário clicar em uma checkbox de seleção

Existe uma maneira de fazer isso?

   

    Eu entendo este requisito muito bom. No caso próximo eu usei checkboxs de seleção dentro do jqGrid. A maior vantagem de ter a informação dentro do jqGrid não é apenas a possibilidade de busca fácil. Se os dados estiverem fora da grade, você mostrará os detalhes do pedido no painel direito somente para a linha selecionada . Portanto, o usuário não terá uma visão geral tão boa dos dados.

    Para poder colocar muitas checkboxs de seleção na tabela sem rolagem horizontal permanente, girei os headers das colunas com “checkbox de seleção com a técnica descrita em Texto vertical dentro de headers de tabela usando uma biblioteca SVG baseada em JavaScript . Essa rotação não parece perfeita no IE, mas em outro navegador funciona perfeito.

    Você pode manter os dados do campo OrderStatus em uma coluna oculta e decodificar o bitmask para booleano, o qual cria checkboxs de seleção no cliente ou no lado do servidor.

    Porque o uso quer usar o multiplesearch:true eu tenho que mencionar sobre um bug no jQuery.clone que segue para o bug no jqGrid multi-search em todas as versões dos navegadores do IE. Se você definir mais como um filtro de pesquisa, somente o primeiro será usado porque o campo de operação de todos os outros filtros será lido como undefined . É uma pena, mas o bug também não está corrigido no jQuery 1.4.3 que acabou de ser publicado. Para poder usar o multiplesearch:true você pode usar a sugestão de solução alternativa de Jiho Han no fórum trirand.com .

    Todos juntos você pode ver no exemplo de demonstração que produz a grade

    texto alternativo

    onde você pode procurar por vários campos

    texto alternativo

    O código correspondente:

     var myData = [ { orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" }, { orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" }, { orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" } ]; // decode 'orderStatus' column and add additional boolean data based on the bitmap mask for (var i=0, l=myData.length; i 

    onde rotateCheckboxColumnHeaders e o bugfix na pesquisa avançada definida assim

     // we use workaround from http://www.trirand.com/blog/?page_id=393/bugs/in-multiple-search-second-and-subsequent-ops-are-sent-as-undefined-in-ie6/ // to fix the bug in the jQuery.clone (see http://bugs.jquery.com/ticket/6793 and // dscussion on the http://api.jquery.com/clone/ jQuery.event.special.click = { setup: function() { if (jQuery(this).hasClass("ui-search")) { jQuery(this).bind("click", jQuery.event.special.click.handler); } return false; }, teardown: function() { jQuery(this).unbind("click", jQuery.event.special.click.handler); return false; }, handler: function(event) { jQuery(".ui-searchFilter td.ops select").attr("name", "op"); } }; var rotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = jQuery("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); jQuery("thead:first tr th").height(headerHeight); headerHeight = jQuery("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = jQuery("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!jQuery.browser.msie) { if (jQuery.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { jQuery("span", headDiv).css("left", 0); headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); } else { headDiv.css("left", 3); } headDiv.parent().css("zoom",1); } } } }; 

    Se você preferir manter as checkboxs de seleção fora da grade, poderá fazer a decodificação do OrderStatus máscara de OrderStatus dentro do manipulador de events onSelectRow .

    UPDATED : Eu realmente algo incompreendido suas necessidades no início. Veja o exemplo modificado . Agora parece texto alternativo

    e é mais perto do que você precisa.

    Apenas como acompanhamento estou incluindo aqui outro método que eu encontrei para obter o mesmo resultado.

    Este método supõe usar o parâmetro postData de jqGrid. Dentro do método eu defini várias funções que verificam o status atual das checkboxs de seleção e enviam um parâmetro para o servidor onde ele pode ser usado para filtragem.

    Esta é uma amostra

     postData: { pending: function () { if ($("#cb_pending").is(':checked')) { return true; } else { return false; } } } 

    A vantagem desta solução em relação à representada por Oleg é que é possível usar operadores lógicos mistos (AND / OR) no lado do servidor, enquanto que usar a seção de filtros como na resposta da Oleg não é possível.

    Codificação feliz!