Comment utiliser jQuery EasyUI pour implémenter les fonctions de masquage et d'affichage des colonnes

jQuery EasyUI est une puissante bibliothèque de composants d'interface utilisateur Web. Elle possède des fonctions riches et des fonctionnalités faciles à utiliser, qui peuvent aider les développeurs à créer rapidement de belles pages de sites Web. Dans cet article, nous présenterons comment utiliser jQuery EasyUI pour implémenter les fonctions de masquage et d'affichage de colonnes.

1. Pourquoi avez-vous besoin de la fonction de masquage et d'affichage des colonnes ?

Dans de nombreux sites Web, les tableaux sont le moyen le plus courant d'afficher des données, mais parfois nous ne souhaitons pas afficher toutes les colonnes. Par exemple, lorsqu'il y a une grande quantité de données, certaines colonnes peuvent sembler moins importantes, ou certaines colonnes peuvent exister mais il n'est pas nécessaire de les afficher dans le scénario actuel. A cette époque, la fonction de masquage et d’affichage des colonnes est particulièrement utile.

2. Sélection de la technologie d'implémentation

Dans cet article, nous choisissons d'utiliser le composant datagrid dans la bibliothèque de composants jQuery EasyUI pour implémenter la fonction de masquage et d'affichage des colonnes. Grâce aux riches éléments configurables et au puissant système d'événements du composant datagrid, nous pouvons facilement personnaliser le tableau.

3. Étapes de mise en œuvre

1. Introduisez les fichiers JavaScript et CSS nécessaires

Avant d'utiliser le composant datagrid, vous devez introduire les fichiers de base et les fichiers de style requis par EasyUI. La méthode d'introduction spécifique est la suivante :

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.0/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.8.0/jquery.easyui.min.js"></script>

2. Construisez la source de données

Pour faciliter la démonstration, la source de données que nous utilisons dans cet article est la suivante :

var data = [
  {"id":1,"name":"张三","age":20,"gender":"男"},
  {"id":2,"name":"李四","age":22,"gender":"男"},
  {"id":3,"name":"王五","age":23,"gender":"女"},
  {"id":4,"name":"赵六","age":21,"gender":"女"},
  {"id":5,"name":"钱七","age":25,"gender":"男"}
];

3. Construisez l'objet datagrid

Lors de la construction. l'objet datagrid, vous devez spécifier le nom de la colonne, la largeur de la colonne et le champ de liaison de données de la colonne, et devez également spécifier la source de données de la table.

$("#datagrid").datagrid({
  columns:[[
    {field:"id",title:"编号",width:100},
    {field:"name",title:"姓名",width:100},
    {field:"age",title:"年龄",width:100},
    {field:"gender",title:"性别",width:100}
  ]],
  data:data
});

4. Ajoutez la fonction de masquage et d'affichage de colonnes

Ensuite, nous devons ajouter la fonction de masquage et d'affichage de colonnes à la grille de données. Ici, nous utilisons le plug-in d'extension de menu de colonnes dans la bibliothèque de composants EasyUI pour réaliser cette fonction.

$.extend($.fn.datagrid.defaults,{
  columnMenu:{
    items:[{
      text:"显示/隐藏",
      iconCls:"icon-columns",
      handler:function(item){
        var opts = $(this).datagrid("options");
        if(item.checked){
          $(this).datagrid("hideColumn",item.value);
        }else{
          $(this).datagrid("showColumn",item.value);
        }
        $(this).datagrid("columnMoving");
        $(this).datagrid("fitColumns");
      },
      disabled:true
    }]
  },
  onHeaderContextMenu:function(e,field){
    e.preventDefault();
    var grid = $(this);
    if(!grid.datagrid("getColumnFields",true).length){
      return;
    }
    if(field){
      grid.datagrid("columnMenu").menu("show",{
        left:e.pageX,
        top:e.pageY
      });
      var menuItem = grid.datagrid("columnMenu").menu("getItem",field);
      if(menuItem){
        grid.datagrid("columnMenu").menu("setIcon",{
          target:menuItem.target,
          iconCls:grid.datagrid("isColumnHidden",field) ? "icon-unchecked" : "icon-checked"
        });
        grid.datagrid("columnMenu").menu("setItemState",{
          target:menuItem.target,
          disabled:false
        });
      }else{
        grid.datagrid("columnMenu").menu("setItemState",{
          target:grid.datagrid("columnMenu").menu("getItem",0).target,
          disabled:true
        });
      }
    }
  }
});

5. Affichage de l'effet

Enfin, jetons un coup d'œil à l'effet obtenu !

(Figure 1 : Tous les champs du tableau sont affichés)

(Figure 2 : Le champ « Genre » est masqué)

(Figure 3 : Le champ « Genre » est à nouveau affiché)

4. Résumé

Grâce à l'introduction des étapes ci-dessus, je pense que les lecteurs ont compris comment utiliser jQuery EasyUI pour masquer et afficher les colonnes d'un tableau. Cette technologie est très pratique dans le développement Web frontal et peut offrir aux utilisateurs une expérience d'affichage de données plus flexible et plus complète. Nous espérons que cet article sera utile aux lecteurs.

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!