Layui表单table渲染+条件查询

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

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

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

专栏系列：点击进入专栏

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

目录

文章内容如下

✏️前言

✏️一、引入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文件

---

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

 
点击查询

  

---

✏️三、创建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('请求失败');
          }
        })
      })
    };

---

✏️四、源码

这里附上源码

    
    
    
    
    


 点击查询

  




  

---

✏️总结

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