码上快乐

相关内容   简体   繁体

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

本文转载自  查看原文  2020-09-22 14:02  3771    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？请求方法，大家就可以参照文档了。


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 Layui：数据表格异步请求 Layui：数据表格表头参数 layui数据表格中展示图片 layui数据表格 Layui数据表格的接口数据请求方式为Get layui table数据表格reload where参数保留问题 layui数据表格及分页 Layui：数据表格的重载 Layui数据表格的使用 layui中的数据表格显示的是msg字段，而不是data字段
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM