méthode jquery jqgrid

JQuery jqGrid est un plug-in de table JavaScript puissant, flexible et personnalisable. Il est développé à l'aide du framework JQuery et peut aider les utilisateurs à créer et à gérer des tables de données complexes rapidement et facilement. Il fournit des fonctionnalités et des fonctions riches telles que la pagination, le tri, la recherche, l'édition, le défilement et l'exportation.

JQuery jqGrid est principalement utilisé pour l'affichage et l'édition de tableaux de données dans les applications Web. Il peut interagir avec diverses sources de données, telles que XML, JSON et les tableaux locaux. Les utilisateurs peuvent utiliser le plug-in JQuery jqGrid pour transformer des tables de données complexes en une interface conviviale, facilitant ainsi la gestion des données.

JQuery Qu'est-ce que jqGrid ?

JQuery jqGrid est un plug-in de table JavaScript basé sur le framework JQuery et un projet open source. Il prend en charge l'interaction avec plusieurs sources de données, peut gérer de grandes quantités de données et offre des options de configuration plus flexibles et personnalisées.

JQuery jqGrid Fonctionnalités :

1. Hautement personnalisable et flexible

JQuery jqGrid est simple à utiliser et flexible. Les utilisateurs peuvent ajuster l'apparence et les fonctionnalités du formulaire en fonction de leurs besoins et préférences.

2. Traitement de grandes quantités de données

JQuery jqGrid peut gérer de grandes quantités de données et prend en charge les opérations de pagination et de défilement. Cela améliore considérablement la convivialité et l’efficacité du formulaire.

3. Prend en charge plusieurs formats de données

JQuery jqGrid peut interagir avec plusieurs formats de données, notamment XML, JSON, les tableaux locaux, etc.

4. Prise en charge du tri et de la recherche

JQuery jqGrid fournit des fonctions de tri et de recherche, qui peuvent effectuer des opérations de tri basées sur les données des colonnes de table et effectuer des opérations complexes recherche. Cela permet aux utilisateurs de trouver plus facilement les données dont ils ont besoin.

5. Prise en charge des opérations d'édition et de ligne

JQuery jqGrid peut éditer et effectuer des opérations de ligne. Les utilisateurs peuvent modifier, supprimer, copier, coller et d'autres opérations dans le tableau, et prendre en charge le glisser-déplacer et le redimensionnement des lignes.

Comment utiliser JQuery jqGrid

Ce qui suit présente comment utiliser JQuery jqGrid :

1. Présentation du fichier de JQuery jqGrid#🎜 🎜## 🎜🎜#
Les fichiers CSS et JS de JQuery jqGrid doivent être introduits dans le fichier HTML. Par exemple :

<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="jqgrid/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>

Define table tag

2. Définissez l'élément conteneur de la balise table dans le fichier HTML, par exemple : #🎜🎜 #

   <div id="gridContainer"></div>

   #🎜 🎜#

Définir les propriétés de la table

Définir les propriétés de la table, y compris l'URL, le nom de la colonne, la largeur de la colonne et le format des données, etc. Par exemple :

3. var grid = $("#gridContainer");
   grid.jqGrid({
       url: "getData.php",  //请求后台的URL地址
       datatype: "json",   //数据格式
       colNames: ['ID', 'Name', 'Age'],  //列名
       colModel: [           //列的属性
           { name: 'id', index: 'id', width: 55, sorttype: "int" },
           { name: 'name', index: 'name', width: 90 },
           { name: 'age', index: 'age', width: 80, align: "right", sorttype: "float" }
       ],
       rowNum: 10,  //每页显示的记录数目
       rowList: [10, 20, 30],  //每页显示记录数目的选项
       pager: "#gridPager",  //表格分页的容器
       sortable: true,  //是否允许列排序
       multiselect: true,  //是否允许多选
       viewrecords: true,  //是否显示记录数
       width: 780,  //表格宽度
       height: 250  //表格高度
   });

Afficher le tableau

Afficher les données du tableau sur la page, par exemple :

4. grid.jqGrid('navGrid','#gridPager',{edit:false,add:false,del:false});

JQuery jqGrid Méthodes couramment utilisées :

jqGrid()

est utilisé pour initialiser la table, définir les propriétés et la configuration de la table.

navGrid()

Menu de navigation pour créer des tableaux, prenant en charge des opérations telles que l'ajout, la modification, la suppression et la recherche.

getRowData()

Obtenir les données de la ligne spécifiée.

setRowData()

Définissez les données de la ligne spécifiée.

addRowData()

Ajoutez une ligne de données au tableau.

delRowData()

Supprimez les données de la ligne spécifiée.

editRow()

Modifiez les données de la ligne spécifiée.

saveRow()

Enregistre les données de la ligne spécifiée.
8. Résumé :

JQuery jqGrid est un outil très puissant, flexible et personnalisable pour développer des tableaux de données dans des applications Web. Il fournit une variété de fonctions telles que la pagination, le tri, la recherche, l'édition, le défilement et l'exportation pour interagir avec diverses sources de données. Il est simple à utiliser, flexible, capable de gérer de grandes quantités de données et hautement personnalisable. En comprenant les différentes méthodes de JQuery jqGrid, nous pouvons mieux gérer et afficher un grand nombre de tableaux de données, rendant les données plus faciles à gérer, à rechercher et à analyser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!