Layui表单table渲染+条件查询

最新推荐文章于 2024-04-09 14:30:35 发布
最新推荐文章于 2024-04-09 14:30:35 发布
阅读量6.5k 收藏 26
点赞数 14
分类专栏： Layui 文章标签： layui javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67840539/article/details/131582282
版权

😇作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。

🎆学习格言：不读书的人,思想就会停止。——狄德罗

⛪️个人主页：进入博主主页

🗼专栏系列：点击进入专栏

🌼欢迎小伙伴们访问到博主的文章内容，在浏览阅读过程发现需要纠正的地方，烦请指出，愿能与诸君一同成长！

目录

文章内容如下

✏️前言

✏️一、引入layui的样式文件和JavaScript文件

✏️二、创建table表格以及button按钮

✏️三、创建table表格以及button按钮

✏️三、实现条件查询

✏️四、源码

✏️总结

文章内容如下

✏️前言

🌼使用Layui的table组件进行表格渲染有以下几个优点：

  1. 简单易用：Layui的table组件提供了简洁的API和丰富的配置选项，使得表格渲染变得简单易用。只需要设置好表格的数据源和列定义，就可以快速渲染出一个功能齐全的表格。

  2. 支持分页：Layui的table组件内置了分页功能，可以轻松地实现对大量数据的分页显示。通过设置合适的参数，可以控制每页显示的数据量、当前页码、总页数等。

  3. 支持排序和筛选：Layui的table组件支持对表格数据进行排序和筛选。可以通过点击表头进行列排序，也可以设置筛选条件对表格数据进行过滤。

  4. 支持自定义操作列：Layui的table组件允许在表格中添加自定义的操作列。可以在操作列中添加按钮、下拉菜单等交互元素，实现对表格数据的编辑、删除、导出等操作。

  5. 支持复杂表格布局：Layui的table组件支持通过设置合适的参数，实现复杂的表格布局。可以合并单元格、设置表头、设置表格宽度等，满足不同场景下的表格展示需求。

总的来说，Layui的table组件具有易用性、灵活性和扩展性，能够满足大部分表格渲染的需求。无论是简单的数据展示还是复杂的数据操作，都可以通过Layui的table组件来实现。

✏️一、引入layui的样式文件和JavaScript文件

🌼在layui框架中，可以使用table组件来渲染表格数据。下面是一个简单的示例代码，演示如何通过table组件来渲染表单数据：

首先，引入layui的样式文件和JavaScript文件

  <link href="//cdn.staticfile.org/layui/2.8.10/css/layui.css" rel="stylesheet">
  <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
  <script src="//unpkg.com/layui@2.8.10/dist/layui.js"></script>

✏️二、创建table表格以及button按钮

<input style="margin-left: 300px" type="text" id = "bookname"> 
<button onclick="buttonQuery()">点击查询</button>
<div class="layui-container">
  <table  class="layui-table" id="cityTable"></table>
</div>

✏️三、创建table表格以及button按钮

layui.use(['table','dropdown','jquery','layer'],function() {
      //调用 layui 封装的方法
      var table = layui.table;
      var dropdown = layui.dropdown;
      var $ = layui.jquery;
      var layer = layui.layer;
      // 渲染表格
      table.render({
        elem: '#cityTable',
        url: 'http://localhost:8080/bookcad_war_exploded/book/getQuery.do', // 表单数据的接口
        height: 470,
        page: true,
        cols: [[
          {field:'cid',title: 'ID'},
          {field:'name',  title: '名称'},
          {field:'sex',  title: '名称'},
          {field:'createDate',title: '名称'},
          {field:'deposit', title: '名称'},
          {toolbar: '#optionBar',  title: '操作'}
        ]]
      });
    })

🌼在上面的代码中，url是你的表单数据接口，可以根据实际情况进行修改。cols数组定义了表格的列，每个列由field和title字段组成，field表示数据字段名，title表示列标题。

这个就是渲染完之后的显示效果

✏️三、实现条件查询

🌼上面的数据渲染好了，接下来就是实现button按钮点击事件，实现条件查询，然后渲染到table表格

这个就是条件查询之后的渲染效果

 function buttonQuery(){
      layui.use(['table','dropdown','jquery','layer'],function() {
        //调用 layui 封装的方法
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.jquery;
        var layer = layui.layer;
          // 渲染表格
          table.render({
              elem: '#cityTable',
              height: 470,
              page: true,
              cols: [[
                  {field:'cid',title: 'ID'},
                  {field:'name',  title: '名称'},
                  {field:'sex',  title: '名称'},
                  {field:'createDate',title: '名称'},
                  {field:'deposit', title: '名称'},
                  {toolbar: '#optionBar',  title: '操作'}
              ]]
          });
        $.ajax({
          url:'http://localhost:8080/bookcad_war_exploded/book/getQuery.do' ,
          type:'post',
          data:{
            name:$("#bookname").val()
          },
          success: function(res) {
            console.log(res.data)
            // 重新加载表格数据
            table.reload('cityTable', {
              data: res.data
            });
          },
          error: function() {
            layer.msg('请求失败');
          }
        })
      })
    };

✏️四、源码

🌼这里附上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.staticfile.org/layui/2.8.10/css/layui.css" rel="stylesheet">
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.8.10/dist/layui.js"></script>
</head>
<body>
<input style="margin-left: 300px" type="text" id = "bookname"> <button onclick="buttonQuery()">点击查询</button>
<div class="layui-container">
  <table  class="layui-table" id="cityTable"></table>
</div>


</body>
  <script>
    layui.use(['table','dropdown','jquery','layer'],function() {
      //调用 layui 封装的方法
      var table = layui.table;
      var dropdown = layui.dropdown;
      var $ = layui.jquery;
      var layer = layui.layer;
      // 渲染表格
      table.render({
        elem: '#cityTable',
        url: 'http://localhost:8080/bookcad_war_exploded/book/getQuery.do', // 表单数据的接口
        height: 470,
        page: true,
        cols: [[
          {field:'cid',title: 'ID'},
          {field:'name',  title: '名称'},
          {field:'sex',  title: '名称'},
          {field:'createDate',title: '名称'},
          {field:'deposit', title: '名称'},
          {toolbar: '#optionBar',  title: '操作'}
        ]]
      });
    })

    function buttonQuery(){
      layui.use(['table','dropdown','jquery','layer'],function() {
        //调用 layui 封装的方法
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.jquery;
        var layer = layui.layer;
          // 渲染表格
          table.render({
              elem: '#cityTable',
              height: 470,
              page: true,
              cols: [[
                  {field:'cid',title: 'ID'},
                  {field:'name',  title: '名称'},
                  {field:'sex',  title: '名称'},
                  {field:'createDate',title: '名称'},
                  {field:'deposit', title: '名称'},
                  {toolbar: '#optionBar',  title: '操作'}
              ]]
          });
        $.ajax({
          url:'http://localhost:8080/bookcad_war_exploded/book/getQuery.do' ,
          type:'post',
          data:{
            name:$("#bookname").val()
          },
          success: function(res) {
            console.log(res.data)
            // 重新加载表格数据
            table.reload('cityTable', {
              data: res.data
            });
          },
          error: function() {
            layer.msg('请求失败');
          }
        })
      })
    }
  </script>

</html>

✏️总结

以上就是使用layui表单table组件渲染数据和条件查询的基本操作。你可以根据自己的需求进行进一步的定制和样式调整。如果大家觉得有什么不对的地方，请指出，望与诸君共同学习，共同进步！

半杯可可
关注
  • 14
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
layui表格table的使用 —— LayUI实战搭建后台管理系统
不积跬步无以至千里
02-14 2548
一、引入layui的样式文件和JS文件。 二、引入页面中需要的元素。 layui.use(["jquery", "laypage", "layer", "form", "laydate", 'table'], function () { var $ = layui.jquery, laypage = layui.laypage, layer...
Layui实现带查询条件的分页
12-29
本文实例为大家分享了Layui实现带查询条件的分页，供大家参考，具体内容如下 这个前端UI框架是真的让人又爱又恨呐！想了很久的方案才行的通 这是全部源码： {include file=../../../application/admin/view/public/head /} <div class=page-container> <form class=layui-form method=post id=pageListForm> <div class=layui-input-inline> <div class=layui-btn-gr
layUI实现列表查询功能
10-16
主要为大家详细介绍了layUI实现列表查询功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
LayUI数据表格的使用指南
最新发布
2301_82242204的博客
04-09 1790
学习视频：《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！多数Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Layui - 数据表格 table
weixin_42361858的博客
12-03 3799
官网文档：https://www.layui.com/doc/modules/table.html 模块： layui.use('table', function(){ var table = layui.table; }); 目录 简单表格 参数 开放方法 方法 - 事件监听 简单表格 <!-- 注意class、layui参数、方法 --> <!-- 方法渲染 --> <table class="layui-table" id="simple"&gt.
LayUI数据表格操作栏，根据数据条件改变显示的按钮。
Tenderness104的博客
11-14 3624
比如判断一个字段为空的时候就不能进行修改，将修改按钮去除。 , cols: [[ //操作栏 { fixed: 'right', toolbar: '#toolBtn', title: '操作', width: 150, align: 'center' } //fixed控制操作栏固定一个位置不动 ]] <script type="te...
layui中数据表格的详细使用用法 table.render
qq_53932517的博客
04-15 3157
因为返回的是list列表，所以要定义data的数据类型。在这里我们会发现一个问题，明明有3条数据却显示0条数据。
layui-table组件使用记录
梁白开的博客
10-09 424
layui插件中的table组件
layui框架学习（34：数据表格_基本用法）
gc_2299的博客
07-30 1776
学习并记录了数据表格模块table的最基本用法
layui数据表格渲染
个人记录
05-07 7887
今天第一次使用layui的数据表格，刚开始根本出不来数据，然后问了一下我室友（因为我室友前几天使用过并且也成功了），发现他是直接使用的layui数据表格自带的**“url”** 属性实现的数据绑定，然后自己也试了一下这个绑定方法，发现数据还是出不来 然后想着换一个思路，就将整个数据表格定义为方法 //通过定义为方法将参数(数据)传递给表格,并为表格动态添加数据 function U...
[js方法学习]关于layui table render\table reload
fronde2233的博客
08-03 5333
1 layui.table.reder 1.1 界面有一张表时 通常，当界面有一张表格时，需要对这张表格进行增删查改，在表格渲染时最常见的方法如下。 使用layui.table.render对表格属性渲染，如果数据需要向服务器请求，可以在render函数里添加url，地址为后台方法名。 如下： table.render({ elem: '#demo' //指定原始表格元素选择器（推荐id选择器） ，url：'/ControllerName/methodName'...
layui数据表格实现重载数据表格功能(搜索功能）
10-16
主要介绍了layui数据表格实现重载数据表格功能，以搜索功能为例进行讲解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用layui 渲染table数据表格的实例代码
10-18
然后，我们使用layui的`table`模块来渲染数据。这是通过调用`layui.use()`来加载`table`模块，然后在其回调函数中调用`table.render()`实现的： ```javascript layui.use('table', function(){ var table = layui....
layui清空,重置表单数据的实例
10-16
此外，layui还提供了自己的API来处理表单渲染，因此在清空表单后，为了保持表单的显示效果与实际数据同步，通常需要调用`layui.form.render()`来重新渲染表单： ```javascript layui.form.render(); ``` 在上述...
layui实现点击按钮给table添加一行
10-18
总结来说，Layui 动态表格的动态行添加需要理解其内部渲染机制，通过操作 `.layui-table-body` 中的表格结构，并配合使用 Layui 的 `table.resize()` 方法来确保正确显示。希望这个解决方案能帮助到正在使用 Layui ...
解决LayUI表单获取不到data的问题
10-18
今天小编就为大家分享一篇解决LayUI表单获取不到data的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui中table数据将0,1转换为文字的4种方式
07-08
layui中table数据标志位0或1，转换成文字的4中方式，layui中table数据标志位0或1，转换成文字的4中方式。
LayUi之数据表格的增删改查（内含完整源代码）
m0_74315688的博客
07-14 5625
关于使用layui进行增删改查的一整套流程清晰明了的编写出来啦！！感兴趣的话就点进来看看呢！！！
layui中表单提交后重新渲染table表格
06-01
在Layui中，可以通过以下步骤实现表单提交后重新渲染table表格： 1. 监听表单的提交事件，获取表单数据； 2. 发送 Ajax 请求，将表单数据提交给后端进行处理； 3. 在 Ajax 请求的回调函数中，根据后端返回的数据，重新渲染 table 表格。 以下是示例代码： ```javascript // 监听表单提交事件 form.on('submit(submitBtn)', function(data){ // 发送 Ajax 请求 $.ajax({ type: 'POST', url: 'submit.php', data: data.field, success: function(res){ // 重新渲染 table 表格 table.reload('testTable'); layer.msg('提交成功'); }, error: function(){ layer.msg('提交失败'); } }); return false; }); ``` 其中，`submitBtn` 是表单提交按钮的 lay-filter 值，`submit.php` 是后端接口地址，`testTable` 是 table 表格的 id。在 Ajax 请求成功后，我们调用 `table.reload()` 方法重新渲染表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半杯可可

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值