Comment exporter un tableau Excel avec le framework layui
Avant-propos :
En raison de besoins professionnels, je dois utiliser la fonction d'exportation de tableaux Excel. La gestion en arrière-plan utilise le framework layui.
(Partage de vidéos d'apprentissage : Introduction à la programmation)
En regardant le forum communautaire du site officiel de layui, de nombreuses personnes ont dit que layui avait sa propre exportation fonction. Seules les données de la page en cours peuvent être exportées. De plus, une partie des données est interrogée via la table d'association entre les données, et les données exportées fournies par layui seront affichées (Objet), ce qui est très gênant.
Vous devez donc utiliser le plug-in, c'est très simple, téléchargez le fichier depuis l'URL ci-dessous.
Il s'agit d'un fichier qui doit être utilisé par le plug-in. Faites attention au chemin du fichier importé.
Voici une URL à télécharger. Elle contient également des tutoriels : https://github.com/wangerzi/layui-excel
. Laissez-moi vous montrer le contexte du projet : Par exemple, le numéro de commande est interrogé à partir de la table de commande associée
Allez directement au code :
jsp :
Il s'agit d'un bouton d'opération exporté :
<button type="button" lay-submit="" class="layui-btn layui-btn-warm" lay-filter="uploadImg"> <i class="layui-icon"></i>导出Excel</button> layui.use(['layer', 'form', 'table', 'laydate','jquery'], function () { var $ = layui.jquery, layer = layui.layer, form = layui.form, laydate = layui.laydate, table = layui.table; // 加载框 var loading; loading = layer.load(1, {shade: [0.3, '#fff']}); var tableIns = table.render({ elem: '#tableList', // cellMinWidth: 100, cols: [[ {field: 'sdId', width: 60, title: 'ID', sort: true} , {field: 'sdMoney', width: 87,title: '交易金额',templet:'#cashDepositTpl'} , {field: 'sdTime', minWidth: 87, title: '交易时间'} , {field: 'sdType', width: 300,title: '交易类型', templet: '#sdTypeTpl'} , {field: 'sdWater', minWidth: 120, title: '交易流水编号'} , {field: 'orderFormEntity', minWidth: 68,title: '订单号', templet: '#orderFormTpl'} ]], url:'${WEB_URL}terraceZL/getList', page: true, even: false, height: 'full-90', request: { pageName: 'page' //页码的参数名称,默认:page , limitName: 'limit' //每页数据量的参数名,默认:limit }, limit: 50, done: function (res, curr, count) { layer.close(loading); } }); form.on('submit(uploadImg)', function(data){ loading = layer.load(1, {shade: [0.3, '#fff']}); var $ = layui.jquery; var excel = layui.excel; $.ajax({ url: '${WEB_URL}sellDeal/getTreeList', dataType: 'json', data: { datas:JSON.stringify(data.field) }, success: function(res) { layer.close(loading); layer.msg(res.msg); // 假如返回的 res.data 是需要导出的列表数据 console.log(res.data);// // 1. 数组头部新增表头 res.data.unshift({sdId: 'ID',sdMoney: '交易金额',sdTime:'交易时间',type:'交易类型',sdWater:'交易流水编号',order:'订单号'}); // 3. 执行导出函数,系统会弹出弹框 excel.exportExcel({ sheet1: res.data }, '平台流水.xlsx', 'xlsx'); }, error:function(res){ layer.close(loading); layer.msg(res.msg); } }); }); }); Controller: @RequestMapping("/getList") @ResponseBody public Object getList(HttpServletRequest request, Model model) { model.addAttribute("WEB_URL", ServiceUrl.WEB_URL); model.addAttribute("WEB_NAME", ServiceUrl.WEB_NAME); Map<String, Object> paramsMap = JSONObject.parseObject(request.getParameter("datas"), Map.class); if (paramsMap == null) { paramsMap = new HashMap<String, Object>(); } Map<String, Object> map = new HashMap<String, Object>(); try { List<SellDealEntity> mList = new ArrayList<SellDealEntity>(); Integer count = sellDealService.getCountZL(paramsMap); List<SellDealExcelEntity> list = new ArrayList<>(); if (count > 0) { //查询所有数据 mList = sellDealService.getListExcel(paramsMap); for (SellDealEntity sellDealEntity : mList) { //自定义一个新实体类,定义好要导出来的字段,把遍历出来的数据存放到一个新的list,因为会出现关联表的数据 SellDealExcelEntity sellDeal = new SellDealExcelEntity(); sellDeal.setSdId(sellDealEntity.getSdId()); sellDeal.setShopName(sellDealEntity.getSellEntity().getShopName()); sellDeal.setSdTime(sellDealEntity.getSdTime()); //时间格式可能不对,备用 // DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); // String time = format.format(sellDealEntity.getSdTime()); //根据类型 set 对应的值 switchType(sellDealEntity,sellDeal); sellDeal.setSdWater(sellDealEntity.getSdWater()); //判断如果订单是null,就set " - " if (sellDealEntity.getOrderFormEntity()==null){ sellDeal.setOrder("-"); }else { sellDeal.setOrder(sellDealEntity.getOrderFormEntity().getOfOrder()); } list.add(sellDeal); } } map.put("code", 0); map.put("msg", "导出成功"); map.put("count", count); map.put("data", list); }catch (Exception e){ map.put("code", 1); map.put("msg", "导出失败,请稍后重试!"); } return JSON.toJSON(map); } private void switchType(SellDealEntity sellDealEntity,SellDealExcelEntity sellDeal) { switch (sellDealEntity.getSdType()) { case 0: sellDeal.setType("订单收益"); sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString()); break; case 1: sellDeal.setType("售后退款"); sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString()); break; case 2: sellDeal.setType("缴纳保证金"); sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString()); break; case 3: sellDeal.setType("保证金充值"); sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString()); break; case 4: sellDeal.setType("保证金扣除"); sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString()); break; case 5: sellDeal.setType("余额提现"); sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString()); break; case 6: sellDeal.setType("保证金提现"); sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString()); break; case 7: sellDeal.setType("保证金提现手续费"); sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString()); break; case 8: sellDeal.setType("余额提现手续费"); sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString()); break; case 9: sellDeal.setType("订单服务费"); sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString()); break; default: sellDeal.setType("暂无类型"); sellDeal.setSdMoney("0"); } }
Enfin, si cela vous dérange, lors de la définition d'une nouvelle entité, il est préférable de la définir comme un type de chaîne, ce qui est plus facile à gérer.
Recommandations associées : framework layui
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

1. Créez un nouveau fichier PPT et nommez-le [Conseils PPT] à titre d'exemple. 2. Double-cliquez sur [Conseils PPT] pour ouvrir le fichier PPT. 3. Insérez un tableau avec deux lignes et deux colonnes à titre d'exemple. 4. Double-cliquez sur la bordure du tableau et l'option [Conception] apparaîtra dans la barre d'outils supérieure. 5. Cliquez sur l'option [Ombrage] et cliquez sur [Image]. 6. Cliquez sur [Image] pour faire apparaître la boîte de dialogue des options de remplissage avec l'image comme arrière-plan. 7. Recherchez le bac que vous souhaitez insérer dans le répertoire et cliquez sur OK pour insérer l'image. 8. Cliquez avec le bouton droit sur la zone de tableau pour afficher la boîte de dialogue des paramètres. 9. Cliquez sur [Formater les cellules] et cochez [Carreler les images en ombrage]. 10. Définissez [Centre], [Miroir] et les autres fonctions dont vous avez besoin, puis cliquez sur OK. Remarque : Par défaut, les images doivent être remplies dans le tableau.

1. Ouvrez la feuille de calcul et recherchez le bouton [Démarrer]-[Formatage conditionnel]. 2. Cliquez sur Sélection de colonne et sélectionnez la colonne à laquelle la mise en forme conditionnelle sera ajoutée. 3. Cliquez sur le bouton [Formatage conditionnel] pour afficher le menu d'options. 4. Sélectionnez [Mettre en surbrillance les règles conditionnelles]-[Entre]. 5. Remplissez les règles : 20, 24, texte vert foncé avec une couleur de remplissage sombre. 6. Après confirmation, les données de la colonne sélectionnée seront colorées avec les chiffres, le texte et les zones de cellules correspondants en fonction des paramètres. 7. Des règles conditionnelles sans conflits peuvent être ajoutées à plusieurs reprises, mais pour les règles conflictuelles, WPS remplacera les règles conditionnelles précédemment établies par la dernière règle ajoutée. 8. Ajoutez à plusieurs reprises les colonnes de cellules après les règles [Entre] 20 à 24 et [Moins de] 20. 9. Si vous devez modifier les règles, vous pouvez simplement les effacer, puis les réinitialiser.

Étapes de configuration du saut de la page de connexion Layui : Ajouter un code de saut : ajoutez un jugement dans l'événement de clic sur le bouton de soumission du formulaire de connexion et accédez à la page spécifiée via window.location.href après une connexion réussie. Modifiez la configuration du formulaire : ajoutez un champ de saisie masqué à l'élément de formulaire de lay-filter="login", avec le nom "redirect" et la valeur étant l'adresse de la page cible.

layui fournit diverses méthodes pour obtenir des données de formulaire, notamment l'obtention directe de toutes les données de champ du formulaire, l'obtention de la valeur d'un seul élément de formulaire, l'utilisation de la méthode formAPI.getVal() pour obtenir la valeur de champ spécifiée, la sérialisation des données de formulaire et en l'utilisant comme paramètre de requête AJAX et en écoutant l'événement de soumission de formulaire, vous obtenez des données.

Parfois, nous rencontrons souvent des problèmes de comptage dans les tableaux Word. Généralement, lorsqu'ils rencontrent de tels problèmes, la plupart des étudiants copient le tableau Word dans Excel pour le calcul ; certains étudiants prennent silencieusement la calculatrice. Existe-t-il un moyen rapide de le calculer ? Bien sûr, la somme peut également être calculée dans Word. Alors, savez-vous comment faire ? Aujourd’hui, jetons un coup d’œil ensemble ! Sans plus attendre, les amis dans le besoin devraient rapidement le récupérer ! Détails de l'étape : 1. Tout d'abord, nous ouvrons le logiciel Word sur l'ordinateur et ouvrons le document qui doit être traité. (Comme le montre l'image) 2. Ensuite, nous plaçons le curseur sur la cellule où se trouve la valeur additionnée (comme le montre l'image), puis nous cliquons sur [Barre de menu) ;

Nous créons et éditons souvent des tableaux dans Excel, mais en tant que novice qui vient d'entrer en contact avec le logiciel, comment utiliser Excel pour créer des tableaux n'est pas aussi simple que pour nous. Ci-dessous, nous réaliserons quelques exercices sur certaines étapes de création de tables que les novices, c'est-à-dire les débutants, doivent maîtriser. Nous espérons que cela sera utile à ceux qui en ont besoin. Un exemple de formulaire pour les débutants est présenté ci-dessous : voyons comment le remplir ! 1. Il existe deux méthodes pour créer un nouveau document Excel. Vous pouvez cliquer avec le bouton droit de la souris sur un emplacement vide du fichier [Bureau] - [Nouveau] - [xls]. Vous pouvez également [Démarrer]-[Tous les programmes]-[Microsoft Office]-[Microsoft Excel 20**] 2. Double-cliquez sur notre nouvel ex

Une mise en page adaptative peut être obtenue en utilisant la fonction de mise en page réactive du framework layui. Les étapes comprennent : le référencement du framework layui. Définissez un conteneur de mise en page adaptatif et définissez la classe layui-container. Utilisez des points d'arrêt réactifs (xs/sm/md/lg) pour masquer des éléments sous des points d'arrêt spécifiques. Spécifiez la largeur de l'élément à l'aide du système de grille (layui-col-). Créez un espacement via le décalage (layui-offset-). Utilisez des utilitaires réactifs (layui-invisible/show/block/inline) pour contrôler la visibilité des éléments et leur apparence.

La différence entre layui et Vue se reflète principalement dans les fonctions et les préoccupations. Layui se concentre sur le développement rapide d'éléments d'interface utilisateur et fournit des composants préfabriqués pour simplifier la construction de pages ; Vue est un framework full-stack qui se concentre sur la liaison de données, le développement de composants et la gestion d'état, et est plus adapté à la création d'applications complexes. Layui est facile à apprendre et convient pour créer rapidement des pages ; Vue a une courbe d'apprentissage abrupte mais permet de créer des applications évolutives et faciles à entretenir. En fonction des besoins du projet et du niveau de compétence du développeur, le cadre approprié peut être sélectionné.
