Por que gridview: true é usado para e o que isso significa?

Eu estou trabalhando no JqGrid.

Eu quero saber o que significa se nós especificarmos gridview:true .

E em quais casos precisamos fornecer?

Eu recentemente estava trabalhando em um tal jqGrid e meu afterInsertRow não estava sendo chamado, uma vez que eu remeti a gridview:true agora a chamada é feita.

Este é um caso que eu mesmo experimentei, fiquei me perguntando se há outros casos também que devemos saber se gridview:true é usado.

Por favor, guie-me nisso.

Eu concordo que a opção gridview: true não é boa explicada na documentação. Em alguns casos (como no caso do TreeGrid), a opção será definida automaticamente. Então eu tento explicar o que isso significa e por que eu recomendo sempre usar a opção gridview: true e nunca usar afterInsertRow .

Muitas pessoas começam com algumas outras linguagens de computador como JavaScript e escrevem seu primeiro programa que é executado no navegador da web depois de terem algum estilo de escrita de programas. Eu tive o mesmo problema 3 anos antes. É importante entender o que o navegador da Web precisa fazer depois de fazer algumas alterações na página HTML . No uso do uso de jQuery é a coisa que você faz permanentemente.

Se você alterar algum elemento DOM na página, a posição em todos os outros elementos DOM existentes na página poderá ser alterada. Se você pensar em modelo flutuante (como com float: left ) ou em muitas outras configurações de CSS, entenderá que o navegador da Web não pode simplesmente mover a representação de bitmap da página existente e inserir o novo elemento inserido. Portanto, o navegador da web precisa recalcular a posição de todos os elementos existentes na página e mover alguns dos elementos em outro local . Mesmo se você alterar o estilo CSS de um elemento, ocorrerá o restream assim chamado. Eu recomendo que você leia o artigo e veja o vídeo sobre o assunto.

A idéia principal para melhorar o desempenho do navegador da web no caso descrito acima será reduzir o número de alterações na página. Então você precisa alterar 5 estilos de um elemento DOM que você deve fazer em uma operação. Você pode usar jQuery.css({...}) com todos os estilos alterados em vez de 5 chamadas separadas. Melhor ainda poderia ser definir uma class CSS e usar o método jQuery.addClass .

No caso do jqGrid, é necessário preencher

com todas as linhas e células da grade. Se você usar a opção gridview: true então o jqGrid coleta o conteúdo de todas as linhas como strings com fragments HTML. Mais tarde, jqGrid chame jQuery.append na linha que define internamente a propriedade innerHTML para definir todo o fragment HTML na página.

Por causa do mesmo motivo, você deve usar cellattr , rowattr ou personalizados que funcionam com fragments HTML representados pelas células ou linhas como strings . No final, as strings serão anexadas a outras strings e serão usadas na operação jQuery.append , como descrevi acima.

O uso da function de retorno de chamada afterInsertRow requer que cada linha da grade seja colocada na página antes de chamar o retorno de chamada afterInsertRow . Assim, torna impossível o uso da opção gridview: true e faz o trabalho da página lentamente.

Para ser exato eu devo mencionar que o desempenho decrescente que eu descrevi antes poderia ser visível apenas no caso de uma grade grande e será mais claro no caso de navegador web lento (como o Internet Explorer, especialmente versões antigas do IE).

De acordo com a documentação do jqGrid para gridview :

Nas versões anteriores do jqGrid, incluindo 3.4.X, a leitura de um dataset relativamente grande (número de linhas> = 100) causou problemas de velocidade. A razão para isso foi que, como cada célula foi inserida na grade, aplicamos cerca de 5 a 6 chamadas do jQuery para ela. Agora esse problema está resolvido; agora inserimos a linha de input de uma só vez com um acréscimo de jQuery. O resultado é impressionante – cerca de 3 a 5 vezes mais rápido. Qual será o resultado se inserirmos todos os dados de uma só vez? Sim, isso pode ser feito com a ajuda da opção gridview (defina como true). O resultado é uma grade que é 5 a 10 vezes mais rápida. Claro, quando esta opção está definida como verdadeira, temos algumas limitações. Se configurado como true, não podemos usar treeGrid, subGrid ou o evento afterInsertRow . Se você não usar essas três opções na grade, poderá definir essa opção como verdadeira e aproveitar a velocidade.

Portanto, ao usar essa opção, você pode obter uma boa melhoria de velocidade, com a ressalva de que ela não é compatível com treeGrid, subGrid ou afterInsertRow . Eu acredito que é a extensão das limitações. Se você encontrar mais alguma coisa, avise-nos para que a documentação possa ser atualizada.


Por que vale a pena, você pode ver casos específicos nos methods addXmlData e addJSONData que afterInsertRow é ignorado:

 if(ts.p.gridview === false ) { $("tbody:first",t).append(rowData.join('')); $(ts).triggerHandler("jqGridAfterInsertRow", [rid, rd, xmlr]); if(afterInsRow) {ts.p.afterInsertRow.call(ts,rid,rd,xmlr);} rowData=[]; } 

As limitações treeGrid e subGrid são mais sutis e não são explicitamente chamadas no código.