Prend en charge plusieurs types d'ensembles de données pour coopérer en tant que sources de données
JQGrid peut lier trois types de données: XML, JSON et tableaux. L'utilisation de différents types de données est principalement pour définir l'attribut DataType, ses valeurs sont «xml», «json», «local» (array)
$ ("# grid1"). jqgrid (........ dataType: "xml", .......);Le suivant répertorie les formats de divers types de données
Format XML:
<WOWS> <PAGE> </ PAGE> <TOTAL> </TOTAL> <DROSS> </ RECORDS> <ROW ID = "ROWID"> <CELL> VALEUR1 </CELL> ......... <CELL> VAUEN </CELD> </ROW> </WOWS>
format JSON
{"Page": "Page Number", "Rows": [{Name1: 'Value1', Name2: 'Value2', .... Namen: 'Valuen'}, .... {..}], "Total": le nombre d'enregistrements, "enregistrements": le nombre total d'enregistrements}
Format de tableau
var datas = [{name1: 'value1', name2: 'value2', ...... namen: 'valuen'}, .... {....}]; // ajouter des données à jqgrid pour (var i = 0; i <= mydata.length; i ++) {jQuery ("# grid1"). mydata [i]);}Ou définissez l'attribut de données
$ ("# grid1"). jqgrid (...... data: mydata, dataType: 'local', .......);La fonction des opérations statistiques
Réglez Footerrow sur True et liez l'événement GridComplete.
$ ("# grid1"). jqgrid (...... Footerrow: true, gridcomplete: completeMethod, .......); fonction accomplie sum_total = $ ("# grid1"). getCol ('total', false, 'sum'); $ ("# grid1"). footerData ('set', {name: 'total:', montant: sum_amount, tax: sum_tax, total: sum_total});};Lorsque les statistiques, utilisez la méthode GetCol. Le premier paramètre est la valeur de nom de ColMode, et le deuxième paramètre est défini sur False. Sinon, un tableau sera retourné au lieu d'une données. Le troisième est de définir la méthode des statistiques, y compris «somme», «avg» et «compter».
Trier
Cliquez simplement sur le titre de la colonne et triez la colonne dans l'ordre croissant ou descendant. Définissez si la colonne permet le tri, définissez-vous triable dans les propriétés de la colonne. Dans le même temps, pour différents types de données, le sortype correspondant doit être défini, y compris Int / Integer Integer, Float / Number / Currency Floating Point Type, Date, Date, Text Text et Fonction Définir les fonctions pour implémenter des règles de tri personnalisées.
$ ("# grid1"). jqgrid (........ ColModel: [...... {name: 'id', index: 'id', width: 60, myExport: true, moditable: true, sortType: "int", sortable: true}, ............], ......);Regroupement
var mydata = [{id: "1", invdate: "2010-05-24", nom: "test", note: "note", taxe: "10.00", total: "2111.00"} , {id: "2", invdate: "2010-05-25", nom: "test2", note: "note2", tax: "20.00", total: "320.00"}, {id: "3", invdate: "2007-09-01", nom: "test3", note: "note3", tax: "30.00", total: "430.00"}, {id: "4", invdate: "2007-10-04", nom: "test", note: "note", tax: "10.00", total: "210.00"}, {id: "5", invdate: "2007-10-05", nom: "test2", "note2", tax: "20.00" , total: "320.00"}, {id: "6", invdate: "2007-09-06", nom: "test3", note: "note3", tax: "30.00", total: "430.00"}, {id: "7", invdate: "2007-10-04", nom: "test", note: "note", tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: tax: Tax: Tax: Tax: Tax: Tax: Tax: Tax " "10.00", total: "210.00"}, {id: "8", invdate: "2007-10-03", name: "test2", note: "note2", montant: "300.00", tax: "21.00", total: "320.00"}, {id: "9", invdate: "2007-09-01", nom: "9" 9 " "test3", note: "note3", montant: "400.00", taxe: "30.00", total: "430.00"}, {id: "11", invdate: "2007-10-01", nom: "test", note: "note", montant: "200.00", taxes: "10,00", "210000 .00 "}, {id:" 12 ", invdate:" 2007-10-02 ", nom:" test2 ", note:" note2 ", montant:" 300.00 ", taxes:" 20.00 ", total:" 320.00 "}, {id:" 13 ", invdate:" 2007-09-01 ", name:" test3 ", note:" no. TE3 ", Montant:" 400.00 ", taxe:" 30.00 ", total:" 430.00 "}, {id:" 14 ", invdate:" 2007-10-04 ", nom:" test ", note:" note ", montant:" 200.00 ", tax:" 10.00 ", total:" 210.00 "}, {id:" 15 ", I, i 10" nvdate: "2007-10-05", nom: "test2", note: "note2", montant: "300.00", taxe: "20.00", total: "320.00"}, {id: "16", invdate: "2007-09-06", nom: "test3", note: "note3", montant: "400" .00 ", taxe:" 30.00 ", total:" 430.00 "}, {id:" 17 ", invdate:" 2007-10-04 ", nom:" test ", note:" note ", montant:" 200.00 ", taxe:" 10.00 ", total:" 210.00 "}, {id:" 18 ", invdate:" 2007-10- 03 ", nom:" test2 ", note:" note2 ", montant:" 300.00 ", taxe:" 20.00 ", total:" 320.00 "}, {id:" 19 ", invdate:" 2007-09-01 ", nom:" test3 ", note:" Remarque ", montant:" 400.00 ", tax:" 30.00 " , Total: "430.00"}, {id: "21", invdate: "2007-10-01", nom: "test", note: "note", montant: "200.00", taxe: "10.00", total: "210.00", nom: "test2" , note: "note2", montant: "300.00", taxe: "20.00", total: "320.00"}, {id: "23", invdate: "2007-09-01", nom: "test3", note: "note3", montant: "400.00", tax: "30.00", total: "430.00"} , {id: "24", invdate: "2007-10-04", nom: "test", note: "note", montant: "200.00", taxe: "10.00", total: "210.00"}, {id: "25", invdate: "2007-10-05", nom: "test2", note: "note2", am am " Ount: "300.00", taxe: "20.00", total: "320.00"}, {id: "26", invdate: "2007-09-06", nom: "test3", note: "note3", montant: "400.00", tax: "30.00", total: "430.00"}, {id: "27", invdat " E: "2007-10-04", nom: "test", note: "note", montant: "200.00", taxe: "10.00", total: "210.00"}, {id: "28", invdate: "2007-10-03", nom: "test2", note: "Remarque2", montant: "300.00", Ta " X: "20.00", total: "320.00"}, {id: "29", invdate: "2007-09-01", nom: "test3", note: "note3", montant: "400.00", taxes: "30.00", total: "430.00"}]; jQuery ("# list48"). "local", hauteur: 'auto', rownum: 30, rowlist: [10,20,30], colnames: ['inv no', 'date', 'client', 'montant', 'tax', 'total', 'notes'], colmodel: [{name: 'id', index: 'id', width: 60,: [{name: 'id', index: 'id', width: 60, SortType: "int"}, {name: 'invdate', index: 'invdate', width: 90, sortType: "date", formatter: "date"}, {name: 'name', index: 'name', width: 100, moditable: true}, {name: 'montant', index: 'montant', width: 80, allign: "Right", "float", width: 80, allign: "Right", "Float", "Width: 80, allign:" Right "," Float "," Width: 80, ALLIGN: " Formatter: "Number", modifiable: true}, {name: 'tax', index: 'tax', width: 80, align: "right", sortType: "float", moditable: true}, {name: 'total', index: 'total', width: 80, align: "droite", sorttype: "float"}, {nom: 'note', index: "note ', large: 150,}, {nom:' note ', index:" note', large: 150,}, {nom: 'note', index: ' sortable: false}], pager: "# plist48", ViewRecords: true, sortName: 'name', grounging: true, groungingView: {groupfield: ['name']}, légende: "Grouping Array Data"});Il y a aussi un tri plus compliqué, alors jetons un coup d'œil aux démos JQGrid!
filtre
Le filtrage JQGrid ne filtre pas le contenu dans la grille, mais filtrait en fait les données dans la base de données.
HTML:
<table id = "s2List"> </ table> <div id = "s2pager"> </div>
javascript:
jQuery ("# s3List"). jqgrid ('navgrid', '# s3Pager', {edit: false, add: false, del: false, search: false, false, rafhes: false}); jQuery ("# s3List"). jqgrid ('navbuttonadd', "# s3pager", {légende: "toggle", titre: "Toggle Search Toolbar", BUTUCICON: 'uiCon-Pin-s', onclickbutton: function () {mygrid [0] .toggleToolbar () }}); jQuery ("# S3List"). JQGrid ('NavbuttonAdd', "# S3Pager", {légende: "Clear", Title: "Clear Search", BUTUCICON: 'UI-ICON-REFRESH', OnClickButton: Function () {MyGrid [0] .ClearoLBar ()}}); jQuery ("# s3List"). jqgrid ('filtertoolbar');Ajouter, supprimer, modifier et vérifier la barre d'outils et la barre de pagination
JQGrid est livré avec une barre de pagination, où vous pouvez ajouter, modifier, supprimer et interroger les boutons.
Ajoutez une couche de plus à HTML, et cette couche stocke la barre de pagination:
<div id = "pager"> </ div> $ ("# grid1"). jqgrid (...... pager: "# pager", // cette propriété peut également définir la taille de page en option: [10, 20, 30], ......); // l'addition, ajouter, etc. ici correspondent à l'édition et à l'ajout de fesses. En définissant la valeur booléenne, il détermine s'il faut afficher jQuery ("# grid1"). Jqgrid ('navgrid', '#pager', {edit: true, ajouter: true, del: true, search: true, rafraîchissement: true}); // ou utiliser ce formulaire jQuery ("# grid1"). {hauteur: 280, reloadaftersUbmit: false}, // édition options {height: 280, reloadaftersUbmit: false}, // ajout d'options {reloadaftersUbmit: false}, // del options {} // search options);N'oubliez pas d'attribuer la valeur modifiable à TRUE pour les colonnes modifiables dans Colmodel avant l'édition.
Lire les données sur les pages
Depuis la pagination mentionnée ci-dessus, ce qui suit introduit une autre méthode de pagination, qui consiste à transformer les pages à travers des barres de défilement. Dans cette méthode de pagination, toutes les données de la base de données ne sont pas lues et remplies dans la grille à la fois, mais sont utilisées pour obtenir la page des données que vous naviguez actuellement via la barre de défilement, puis la partie des données est lue à partir de la base de données.
$ ("# grid1"). jqgrid (...... // seulement après le définir, il lira les données en fonction du défilement de défilement: 1, // définir la taille de la page Rownum: 10, ......);L'exemple suivant n'utilise que des données locales, ce qui n'obtient également pas l'effet de la défilement et de la transmission des pages.
JQuery ("# Scrolling"). JQGrid ({Scroll: 1, DataType: "Local", Data: MyData, Height: 100, Width: 600, Colnames: ['INDEX', 'NAM }, {name: 'note', index: 'note', width: 100}], rownum: 5, gridView: true, pager: '# pscrolling', sortName: 'item_id', ViewRecords: true, sortOrder: "ASC", tynom: "Chargement des données pendant le défilement"});Table de père et de fils
Les sous-tables peuvent être utilisées par les paramètres suivants
$ ("# grid1"). jqgrid (...... // activer la sous-Tableuse Subgry: true, subgridurl: '.........' ', // Définir les attributs de la sous-table sous-gridmodel: [{nom: [' name1 ',' name2 ', ......,' namen '], ....... [width1, width2, ......, widthn]}Les paramètres des sous-tables ici ne sont que les plus élémentaires. Pour plus d'informations sur les attributs, veuillez consulter http://www.trirand.com/jqgridwiki/doku.php?id=wiki:SubGrid
Obtenir / régler la valeur de la cellule
Pour obtenir la valeur d'une certaine cellule, GetCell (Rowid, ICOL) est appelé. ICOL peut être soit l'indice de position actuellement répertorié dans le Colmodel ou la valeur de nom. Remarque: Cette méthode ne peut pas être utilisée lors de la modification des lignes ou des cellules. À l'heure actuelle, la valeur renvoyée n'est pas la valeur modifiée, mais la valeur d'origine.
Définition de la valeur d'une certaine appels cellulaires setCell (Rowid, ColName, Data, Class, Properties). Rowid: ID de ligne actuel; Colname: nom de colonne ou index de position de colonne, à partir de 0; Données: modifiez le contenu de la cellule, et s'il est vide, il ne sera pas mis à jour; Classe: S'il s'agit de chaîne, il sera ajouté au CSS de la cellule à l'aide de la méthode AddClass, et s'il est un tableau, il sera directement ajouté à la propriété Style; Propriétés: définissez la propriété de cellule Colmodel.
Bien sûr, vous pouvez également obtenir / définir des lignes ou des colonnes. Ici, vous pouvez consulter plus de méthodes pour get / set / ajouter http://www.trirand.com/jqgridwiki/doku.php?
id = wiki: méthodes
Vérification des données
En définissant la propriété Editrules de Colmodel, vous pouvez vérifier les données d'entrée
jQuery ("# grid_id"). jqgrid ({... ColModel: [... {name: 'Price', ..., edittrules: {edithIdden: true, requis: true:}, moditable: true}, ...] ...});Vous trouverez ci-dessous les options de vérification disponibles
Définir les colonnes rayées
jQuery ("# ghcs"). jqgrid ('setGroupheaders', {// définir s'il faut activer l'effet Colspan usingColSpanStyle: false, Groupheaders: [{startColumnName: 'Colname', // le premier nom de colonne du groupe de chronique de fusion fusion colonne}, .....]}Éditeur
La colonne de modèle de JQGrid est livrée avec des éditeurs très basiques, y compris: `` Text '', zone de texte à ligne unique, `` TextArea '' Multi-Line Text Box, `` Sélectionnez la boîte déroulante, la boîte à cocher '' à cocher '', la boîte de mot de passe `` Mot de passe '', le bouton 'Button' ', le bouton d'image `` image' ', le fichier de fichier de fichier' et l'éditeur personnalisé.
Définir EditType à Colmodel
jQuery ("# grid_id"). jqgrid ({... ColModel: [... {name: 'Price', ..., éditable: true, editType: 'Text', éditoptions: {size: 10, maxLength: 15} ......}, ...] ...});L'EditOption est quelques paramètres pour l'éditeur, et la zone de texte peut définir la taille, MaxLength, etc.; La case peut définir la valeur;
Ditoptions: {valeur: "Oui: non"}
La boîte déroulante est sous cette forme
EditOptions: {Value: "Val1: Text1; Val2: Text2; Val3: Text3"}
Pour plus d'informations, veuillez consulter http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
La colonne de modèle appelle d'autres éditeurs
L'éditeur introduit ci-dessus utilise uniquement les éléments de forme de HTML, et celui introduit ci-dessous appelle le plug-in.
<script src = "js / my97datepicker / wdatepicker.js" type = "text / javascript"> </ script> <script type = "text / javascrip Gens
Ici, le plugin my97DatePicker est appelé l'éditeur de calendrier.
Si vous souhaitez placer plusieurs contrôles dans une colonne de modèle, vous pouvez utiliser les méthodes suivantes
jQuery ("# grid_id"). jqgrid ({... afterInsertrow: function (rowid, adata) {var contrôles = ""; // Control placé dans le modèle ...... $ ("# grid_id"). jqgrid ('setCell', rowid, 'tag', contrôle);} ...});Ceci est en fait réalisé en modifiant son HTML dans la cellule de la grille.
Déplacer l'imitation de sélection de cellules Excel
Après avoir réglé le mode d'édition de cellule, vous pouvez passer à la cellule dont vous avez besoin pour modifier les touches de navigation vers le haut, vers le bas, la gauche et la droite, appuyez sur Entrée pour entrer pour entrer dans l'état d'édition, appuyez sur la touche ESC pour ne pas enregistrer les modifications, appuyez sur Entrée pour enregistrer les modifications
jQuery ("# grid_id"). jqgrid ({... celDedit: true, cellSubmit: 'clientArray', // Définissez la valeur par défaut de l'emplacement de stockage de contenu de cellule 'Remote' ...});Ce qui précède est un résumé de l'utilisation de JQGrid qui vous a été présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!