彻底搞懂 Layui中的数据表格，更改请求参数等

Layui中的table

首先抄送一下官网的话
在这里插入图片描述
我们先来看一下案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Layui中的表格</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/layui.js"></script>
  </head>
  <body>
    <!--  -->
    <table id="test" lay-filter="test"></table>
  </body>
</html>
<script>
  layui.use('table', function () {
    var table = layui.table

    // 第一个实例
    table.render({
      elem: '#test', // 指定table模板  也就是上方的table DOM
      height: 400, // 指定Table模板的高度
      url: '/config/user.json', // 对应的数据接口，这边直接是请求的json文件
      page: true, // 开启分页 
      cols: [
        [
          //表头》》》指定的对应字段
          { field: 'id', title: 'ID', sort: true, fixed: 'left' },
          { field: 'username', title: '用户名' },
          { field: 'sex', title: '性别', sort: true },
          { field: 'city', title: '城市' },
          { field: 'sign', title: '签名' },
          { field: 'experience', title: '积分', sort: true },
          { field: 'score', title: '评分', sort: true },
          { field: 'classify', title: '职业' },
          { field: 'wealth', title: '财富', sort: true },
        ],
      ],
    })
  })
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

实现效果
在这里插入图片描述
其实按照我个人的理解的话其实就是像ajax请求后台列表数据，包括样式，layui这个框架就全部集成给你做了，你不需要再去手动写样式，当然你如果要添加自定义列还是要自己手动写一下，例如我们在表格最后方添加一个编辑和删除。

在这里插入图片描述
我们可以看到我在cols中最后的位置添加了templet，里面放置了一串模板字符串（如果有ie兼容需求的话，最好不要使用模板字符串），再有的话，我们可以看到在里面我用到了{{ }}这个东西，这个东西现在不是叫插值表达式，layui有对他的特定叫法 layui.laytpl。不过其实用处并不是很广范，我们在这里使用就可以了。
其实像指定表格自定义列的话，也不单单只有这一种指定方式，也还有像
在这里插入图片描述

第三种方式
在这里插入图片描述
我们来看一下这三种方式实现的效果
在这里插入图片描述
自定义格也还有像toobar去指定模板，那种方式也是可以实现的，有兴趣的同学可以根据官网自己去尝试一下

接下来我们就应该点击编辑 或搜索触发一系列事件了，那么我们怎么去获取对应这一行的数据呢？

layui给我们提供了一个方法，其实也就是监听table表格中的事件，那么如何去监听呢？

// 点击表格头部，内部一些 dom上绑定了lay-event=""属性的一些节点所操作的事件
// tool中的test其实就是表格table节点的 lay-filter="test"这个属性值
table.on('tool(test)',function(obj){
// 在里面我们可以根据lay-event的值去进行相应的判断
      if (layEvent === 'del') {
        console.log(123)
        //删除
        layer.confirm('真的删除行么', function (index) {
          obj.del() //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index)
          //向服务端发送删除指令
        })
      } else if (layEvent === 'edit') {
        // 编辑
        // 数据回显
        $('#username').val()
        // ...等等
      }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

我们现在可以看一下表格图，其实我们的分页是已经开启了的
在这里插入图片描述
每当我们去点击分页时，表格会自动像我们填写的地址发起请求
在这里插入图片描述
那么这样就好了吗？
肯定不行，我们如果把前端请求参数手动写死的话，如果后端查询的参数值不叫page？limit？叫pageNum，pageSize？怎么办呢？
其实layui也给了我们解决办法
我们只需要在配置项中添加一个request即可
在这里插入图片描述
这样的话其实我们就可以去自定义请求页码的名称了，改值的时候注意写pageName和limitName，这样才是代表page和limit。

像有时候我们也会碰到像条件搜索，那么我们如何解决这个问题呢？
在这里插入图片描述
官网给我们说的很清楚，只需要添加一个where即可，然后我们点击触发一定的表格重绘事件时，我们就可以根据这个where去发请求了。
那么我在这里添加了一个表格搜索框
在这里插入图片描述
使用toolbar去指定script/html模板
在这里插入图片描述
就会呈现这样一种效果
在这里插入图片描述
接下来我们就可以根据id也好class也好去获取他的val值，将他放置到我们的where请求对象中，这样就可以实现自定义请求参数。
在这里插入图片描述
其实像下面的table.reload这个也就是表格重绘了，因为我们发送了请求，那么我们就可以根据我们的条件去重新渲染表格了，

再有像其他的请求toke？请求方法，大家就可以参照文档了。

posted @ 2020-09-22 14:02  威武的大萝卜  阅读(6577)  评论(0)  编辑  收藏  举报