Suporta vários tipos de conjuntos de dados para cooperar como fontes de dados
O JQGrid pode vincular três tipos de dados: XML, JSON e Matrizes. Usando diferentes tipos de dados é principalmente para definir o atributo Datatype, seus valores são 'XML', 'JSON', 'Local' (Array)
$ ("#grid1"). JQGrid (........ Datatype: "XML", .......);Os seguintes lista os formatos de vários tipos de dados
Formato XML:
<rows> <age> </age> <talt> </total> </registros> </lorps> <row id = "rowid"> <clell> value1 </cell> ......... <cell> valuen </cell> </row> </rows>
JSON FORMAT
{"Page": "Número da página", "linhas": [{name1: 'value1', name2: 'value2', .... namen: 'valuen'}, .... {..}], "total": contagem de registros, "registros": contagem total de registros}
Formato de matriz
var dados = [{name1: 'value1', name2: 'value2', ...... namen: 'valuen'}, .... {....}]; // Adicione dados a jqGrid para (var i = 0; i <= mydata.length; i ++) {jQuery ("#grid1). mydata [i]);}Ou defina o atributo de dados
$ ("#grid1").A função das operações estatísticas
Defina Footerrow como True e Bind GridComplete Event.
#("#grid1"). sum_total = $ ("#grid1").Quando estatísticas, use o método getCol. O primeiro parâmetro é o valor do nome de Colmode e o segundo parâmetro é definido como false. Caso contrário, uma matriz será devolvida em vez de dados. O terceiro é definir o método de estatística, incluindo 'soma', 'avg' e 'count'.
Organizar
Basta clicar no título da coluna e classificar a coluna em ordem ascendente ou decrescente. Defina se a coluna permite a classificação, configure classificável nas propriedades da coluna. Ao mesmo tempo, para diferentes tipos de dados, o SortType correspondente precisa ser definido, incluindo INT/Integer inteiro, float/número/moeda do tipo de ponto flutuante, data de data, texto e função Definir funções para implementar regras de classificação personalizadas.
$ ("#grid1").Agrupamento
var myData = [{id: "1", invdate: "2010-05-24", nome: "teste", nota: "Note", Tax: "10.00", Total: "2111.00"} ,, {id: "2", Invdate: "2010-05-25", nome: "test2", note: "Note2", Tax: "20.00", Total: "320.00"}, {id: "3", Invdate: "2007-09-01", Nome: "Test3", note: "note3", Tax, "307-09" "," Test3 ", note:" note3 "," 30-09-09 "," Test3 ", note:" note3 ", "430.00"}, {id: "4", Invdate: "2007-10-04", nome: "teste", note: "Nota", Tax: "10.00", Total: "210.00"}, {id: "5", InvDate: "2007-10-05", Nome: "Test2", NOTA: "2", {NOTA "2 ", {NOTA", {NOTA "2 ", INVDATE:" 2007-10-05 "," Test2 ", NOTA:" ,total:"320.00"},{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax: "10.00",total:"210.00"},{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},{id:"9",invdate:"2007-09-01",name: "Test3", Nota: "Note3", Valor: "400.00", Tax: "30.00", Total: "430.00"}, {id: "11", Invdate: "2007-10-01", nome: "teste", nota: "Nota", valor: "200.00", "10.00", "Total", "21 .00 "}, {id:" 12 ", Invdate:" 2007-10-02 ", nome:" test2 ", note:" Note2 ", valor:" 300.00 ", Tax:" 20.00 ", Total:" 320.00 "}, {Id:" 13, "InvDate:" 2007-09-01 ",,}, {" 13, 13, "2007-09-01", Te3 ", valor:" 400.00 ", Tax:" 30.00 ", Total:" 430.00 "}, {id:" 14 ", Invdate:" 2007-10-04 ", nome:" teste ", nota:" Nota "," 200.00 "," 10.00 ", Total:" 210.00 "}, {{{Id: 200,00", "10.00", total: "210.00"}, {{{{{{{{) ':' ', “10.00', ', total:” 210.00 ”, {” {' {{'' ', “10.00”, eu nvdate: "2007-10-05", nome: "test2", nota: "Note2", valor: "300,00", imposto: "20.00", total: "320.00"}, {id: "16 16, invasçar:" 2007-09-06 "," Test3 ", note:" note3 "," 2007-09-06 "," Test3 ", note:" note3 ",", "2007-09-06", "Test3", note: "" "," .00",tax:"30.00",total:"430.00"},{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"18",invdate:"2007-10- 03 ", Nome:" Test2 ", Nota:" Note2 ", Valor:" 300.00 ", Tax:" 20.00 ", Total:" 320.00 "}, {Id:" 19 ", Invdate:" 2007-09-01 ", Nome:" Test3 ", Note:" Note3 ", valor:" 400.00 "," 30.30: "Test3", Note: "Note3", "400.00.00", "30". ,total:"430.00"},{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"22",invdate:"2007-10-02",name:"test2" , Nota: "Note2", Valor: "300.00", Tax: "20.00", Total: "320,00"}, {Id: "23", Invdate: "2007-09-01", nome: "Test3", note: "Note3", valor: "400.00", Tax: "30.00", total "," 400 ". ,, {id: "24", Invdate: "2007-10-04", nome: "teste", nota: "Nota", valor: "200,00", tax: "10.00", total: "210.00"}, {id: "25", invdate: "2007-10-05", nome: "test2", note: "", ",", ", note:", Invdate: "2007-10-05", nome: "test2", note: "", ",", ", no note:", o invasor: "2007-10-05", nome: "test2", note: "" OLC: "300.00", Tax: "20.00", Total: "320.00"}, {id: "26", Invdate: "2007-09-06", nome: "Test3", Nota: "Note3", valor: "400.00", "Tax:" 30.00 ", Total:" 430.00 " E: "2007-10-04", nome: "teste", nota: "Nota", valor: "200,00", imposto: "10.00", total: "210.00"}, {id: "28", invdate: "2007-10-03", nome: "test2", note: " X: "20.00", Total: "320.00"}, {id: "29", Invdate: "2007-09-01", nome: "test3", note: "Note3", valor: "400.00:#Tax:" 30.00 ", Total:" 430.00 "}];" JQuery ("#48". "Local", Altura: 'Auto', ROWNUM: 30, Lista de Row: [10,20,30], Colnames: ['Inv no', 'Date', 'Client', 'Montation', 'Tax', 'Total', 'Notes'], Colmodel: [{Nome: 'Id', Index: Id ', Width: 60, Sorttype: "int"}, {name: 'InvDate', index: 'InvDate', Width: 90, Sorttype: "Date", Formatter: "Date"}, {Nome: 'Nome', Índice: 'Nome', Width: 100, Editable: True}, {{Nome: 'Setent', Index: 'ALM', Width: ' formatter:"number", editable:true},{name:'tax',index:'tax', width:80, align:"right", sorttype:"float", editable:true}, {name:'total',index:'total',width:80, align:"right", sorttype:"float"}, {name:'note',index:'note',width:150, classificável: false}], pager: "#PLIST48", ViewRecords: true, SortName: 'Name', Grouping: True, GroupingView: {Groupfield: ['nome']}, legenda: "agrupando dados da matriz"});Também há classificação mais complicada, então vamos dar uma olhada nas demos jqgrid!
filtro
A filtragem JQGrid não está filtrando o conteúdo da grade, mas na verdade filtrando os dados no banco de dados.
html:
<tabela id = "s2List"> </ table> <div id = "s2Pager"> </div>
JavaScript:
jQuery ("#s3List"). jQuery ("#s3List"). }}); jQuery ("#s3List"). jQuery ("#S3List"). JQGrid ('filtroToolbar');Adicione, exclua, modifique e verifique a barra de ferramentas e a barra de paginação
O JQGrid vem com uma barra de paginação, onde você pode adicionar, modificar, excluir e consultar botões.
Adicione mais uma camada ao HTML, e esta camada armazena a barra de paginação:
<div id = "pager"> </div> $ ("#grid1"). Ao definir o valor booleano, ele determina se deve exibir jQuery ("#grid1"). 280, ReloadaFterSubMit: false}, // Editar opções {Hight: 280, Reloadaftersubmit: false}, // Adicionar opções {ReloadaftersubMit: false}, // op options {} // opções de pesquisa);Lembre -se de atribuir o valor editável a TRUE para colunas editáveis em Colmodel antes da edição.
Leia dados sobre as páginas
Desde a paginação mencionada acima, o seguinte introduz outro método de paginação, que é virar as páginas através de barras de rolagem. Nesse método de paginação, todos os dados no banco de dados não são lidos e preenchidos na grade de uma só vez, mas são usados para obter qual página de dados você está navegando atualmente pela barra de rolagem e, em seguida, essa parte dos dados é lida no banco de dados.
$ ("#grid1").O exemplo a seguir usa apenas dados locais, que também atingem o efeito de rolagem e girar páginas.
jQuery ("#rolagem"). }, {name: 'note', index: 'Note', largura: 100}], rownum: 5, gridview: true, pager: '#pscrolling', sortName: 'item_id', viewRecords: true, sortorder: "ASC", legenda: "carregando dados enquanto rolando"});Mesa de pai e filho
Subtáveis podem ser usados pelas seguintes configurações
$ ("#grid1").As configurações de subtíveis aqui são apenas as mais básicas. Para obter mais informações sobre atributos, consulte http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
Obtenha/defina o valor da célula
Para obter o valor de uma determinada célula, GetCell (Rowid, ICOL) é chamado. O ICOL pode ser o índice de posição atualmente listado no Colmodel ou no valor do nome. Nota: Este método não pode ser usado ao editar linhas ou células. No momento, o valor retornado não é o valor alterado, mas o valor original.
Definir o valor de uma determinada célula chama SetCell (Rowid, Colname, Data, Class, Propriedades). RowID: ID da linha atual; COLNAME: Nome da coluna ou índice de posição da coluna, começando de 0; Dados: altere o conteúdo da célula e, se estiver vazio, não será atualizado; Classe: Se for string, será adicionado ao CSS da célula usando o método AddClass e, se for a matriz, será adicionado diretamente à propriedade Style; Propriedades: defina a propriedade Cell Colmodel.
Obviamente, você também pode obter/definir linhas ou colunas. Aqui você pode verificar mais métodos para obter/set/add http://www.trirand.com/jqgridwiki/doku.php?
id = wiki: métodos
Verificação de dados
Ao definir a propriedade Editrules da Colmodel, você pode verificar os dados de entrada
jQuery ("#grid_id").Abaixo estão as opções de verificação disponíveis
Defina colunas listradas
jQuery ("#ghcs"). coluna de mesclagem}, .....]}Editor
A coluna de modelo do JQGrid vem com alguns editores muito básicos, incluindo: caixa de texto de linha única 'Text', caixa de texto 'textarea', 'selecione' caixa suspensa, caixa de seleção 'caixa de seleção', caixa de senha 'senha', 'botão', 'botão', 'botão', 'botão de imagem', 'arquivo de arquivo' caixa de upload e 'editor personalizado'.
Defina Edittype em Colmodel
jQuery ("#grid_id").A edição é algumas configurações para o editor, e a caixa de texto pode definir tamanho, comprimento maxle, etc.; A caixa de seleção pode definir valor;
Ditoções: {value: "Sim: não"}
A caixa suspensa está nesta forma
Editoções: {Value: "Val1: Text1; Val2: Text2; Val3: Text3"}
Para mais informações, consulte http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
A coluna de modelos chama outros editores
O editor introduzido acima usa apenas os elementos do formulário do HTML, e o introduzido abaixo é chamando o plug-in.
<script src = "js/my97datepicker/wdatepicker.js" type = "text/javascript"> </script> <script type = "text/javascript"> function initatepicker (cl) {$ (cl) .click (function () {Wdatepicker ();});} .... jQuery ("#grid_id").Aqui, o plug -in My97DatePicker é chamado de editor de calendário.
Se você deseja colocar vários controles em uma coluna de modelo, você pode usar os seguintes métodos
jQuery ("#grid_id").Isso é realmente alcançado editando seu HTML na célula da grade.
Mover a imitação de seleção de células Excel
Depois de definir o modo de edição de células, você pode pular para a célula necessária para editar as teclas de navegação para cima, para baixo, esquerda e direita, pressione Enter para entrar para entrar no estado de edição, pressione a tecla ESC para não salvar as alterações, pressione Enter para salvar as alterações
jQuery ("#grid_id").O exposto acima é um resumo do uso do JQGrid apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!