Comment utiliser Layui pour implémenter des fonctions de table modifiables

Comment utiliser Layui pour implémenter des fonctions de table modifiables

Layui est un framework d'interface utilisateur frontal classique et simple avec des composants riches et des fonctions puissantes. Au cours du processus de développement utilisant Layui, nous pouvons rencontrer le besoin d'implémenter des fonctions de table modifiables. Cet article explique comment utiliser le composant table et le composant formulaire de Layui pour implémenter des fonctions de table modifiables et fournit des exemples de code spécifiques.

1. Présentez la bibliothèque Layui

Tout d'abord, introduisez les fichiers pertinents de la bibliothèque Layui dans le projet. Vous pouvez choisir de télécharger le code source directement ou d'utiliser le lien CDN de Layui.

<!-- 引入Layui库 -->
<link rel="stylesheet" href="http://cdn.layui.com/layui/2.5.4/layui.css">
<script src="http://cdn.layui.com/layui/2.5.4/layui.js"></script>

2. Créez un tableau modifiable

Créez un élément de tableau en HTML et attribuez-lui un identifiant Ici, nous utilisons "demoTable" comme exemple.

<table class="layui-table" id="demoTable"></table>

3. Rendre le tableau

En JavaScript, restituez le tableau via la fonction table.render de Layui et définissez l'en-tête et les données du tableau.

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头
  var cols = [[
    {field: 'name', title: '姓名', edit: 'text'},
    {field: 'gender', title: '性别', edit: 'text'},
    {field: 'age', title: '年龄', edit: 'text'},
    {field: 'email', title: '邮箱', edit: 'text'},
    {field: 'phone', title: '电话', edit: 'text'}
  ]];
  
  //定义数据
  var data = [
    {name: '张三', gender: '男', age: '22', email: 'zhangsan@example.com', phone: '123456789'},
    {name: '李四', gender: '女', age: '25', email: 'lisi@example.com', phone: '987654321'},
    {name: '王五', gender: '男', age: '28', email: 'wangwu@example.com', phone: '456789123'},
  ];
  
  //渲染表格
  table.render({
    elem: '#demoTable',
    cols: cols,
    data: data,
    toolbar: 'default',
    editMode: 'single' //可编辑模式，支持：single单行、row整行、cell单元格
  });
});
</script>

Dans le code ci-dessus, nous rendons le tableau via la fonction table.render. Parmi eux, elem spécifie l'identifiant de l'élément du tableau, cols définit l'en-tête, data définit les données du tableau, toolbar est utilisé pour afficher la barre d'outils par défaut et editMode spécifie le mode modifiable comme édition sur une seule ligne.

4. Surveillance de l'édition de la cellule

Pour implémenter la fonction d'édition de la cellule, nous devons écouter l'événement d'édition de la cellule, obtenir la nouvelle valeur de l'événement et la traiter en conséquence. En JavaScript, cela peut être réalisé grâce à la fonction table.on de Layui.

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头和数据
  //...
  
  //渲染表格
  //...
  
  //监听单元格编辑
  table.on('edit(demoTable)', function(obj){
    var value = obj.value; //得到修改后的值
    var field = obj.field; //得到字段名
    var data = obj.data; //得到当前行数据
    
    //在这里进行相应的处理，比如发送请求保存到后端数据库等
    
    layer.msg('修改成功');
  });
});
</script>

Dans le code ci-dessus, nous écoutons l'événement d'édition de cellule de la table demoTable via la fonction table.on. La valeur modifiée, le nom du champ et les données de la ligne actuelle peuvent être obtenus via le paramètre obj. Ici, nous pouvons traiter les données, comme envoyer des demandes de sauvegarde dans la base de données principale, etc.

Grâce aux étapes ci-dessus, nous pouvons réaliser la fonction de tableau modifiable à l'aide de Layui. Lorsque l'utilisateur modifie les données du tableau, l'événement d'édition de cellule est déclenché et les données peuvent être traitées.

Résumé :

Layui est un framework d'interface utilisateur frontal simple et puissant qui fournit également une multitude de composants et de fonctions pour implémenter des fonctions de table modifiables. En utilisant le composant table et le composant formulaire de Layui, nous pouvons facilement implémenter des fonctions de table modifiables. Cet article décrit comment créer un tableau modifiable, restituer le tableau, écouter les événements de modification de cellule et fournit des exemples de code spécifiques. J'espère qu'il sera utile à tout le monde de réaliser la fonction de tableau modifiable.

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!