文章目录
- 1.功能效果
- 2.Layui代码
- 3.代码功能介绍
- 1.定义js渲染的表格&＃xff0c;给到哪个table去显示
- 2.重载数据的指向问题
- 上一篇博文我写了如何通过单次点击&＃xff0c;获取一个表格的信息&＃xff0c;这篇博文是一次点击&＃xff0c;加载多个表格信息
- 接口代码就不上传了&＃xff0c;感兴趣的可以看一下上一篇博文&＃xff1a;https://blog.csdn.net/chenmozhe22/article/details/96146017
- 此文章下面的接口包含2个&＃xff0c;问了快速使用&＃xff0c;我稍微该动了一点点&＃xff0c;方便区分
1.功能效果
打开页面之后&＃xff0c;默认加载所有数据
搜索完数据&＃xff0c;显示效果如下&＃xff1a;
把表格的属性height关闭掉&＃xff0c;显示效果如下&＃xff1a;
2.Layui代码
<!DOCTYPE html>
<html>
<head><meta charset&＃61;"utf-8"><title>layui</title><meta name&＃61;"renderer" content&＃61;"webkit"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge,chrome&＃61;1"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1, maximum-scale&＃61;1"><link rel&＃61;"stylesheet" href&＃61;"../../static/css/layui.css" media&＃61;"all"><!-- 注意&＃xff1a;如果你直接复制所有代码到本地&＃xff0c;上述css路径需要改成你本地的 -->
</head><body><!--搜索按钮--1-->
<div class&＃61;"demoTable">搜索ID&＃xff1a;<div class&＃61;"layui-inline"><input class&＃61;"layui-input" name&＃61;"id" id&＃61;"demoReload" autocomplete&＃61;"off"></div><button class&＃61;"layui-btn" data-type&＃61;"reload">搜索</button>
</div><!--表格一---->
<fieldset class &＃61; "layui-elem-field layui-field-title" style &＃61; "margin-top: 30px; color:#dddddd"><legend>客户基本信息表格</legend>
</fieldset>
<div><table class&＃61;"layui-hide" id&＃61;"LAY_table_user" lay-filter&＃61;"user"></table>
</div><!--表格二---->
<fieldset class &＃61; "layui-elem-field layui-field-title" style &＃61; "margin-top: 30px; color:#dddddd"><legend>客户基本信息表格2</legend>
</fieldset>
<div><table class&＃61;"layui-hide" id&＃61;"LAY_table_user2" lay-filter&＃61;"user"></table>
</div><script src&＃61;"../../static/layui.js" charset&＃61;"utf-8"></script>
<!-- 注意&＃xff1a;如果你直接复制所有代码到本地&＃xff0c;上述js路径需要改成你本地的 -->
<script>layui.use(&＃39;table&＃39;, function () {var table &＃61; layui.table;//方法级渲染table.render({elem: &＃39;#LAY_table_user&＃39;, url: &＃39;/user&＃39;, cols: [[{checkbox: true, fixed: true}, {field: &＃39;id&＃39;, title: &＃39;ID&＃39;, width: 80, sort: true, fixed: true}, {field: &＃39;username&＃39;, title: &＃39;用户名&＃39;, width: 80}, {field: &＃39;sex&＃39;, title: &＃39;性别&＃39;, width: 80, sort: true}, {field: &＃39;city&＃39;, title: &＃39;城市&＃39;, width: 80}, {field: &＃39;sign&＃39;, title: &＃39;签名&＃39;, width :80}, {field: &＃39;experience&＃39;, title: &＃39;积分&＃39;, sort: true, width: 80}, {field: &＃39;score&＃39;, title: &＃39;评分&＃39;, sort: true, width: 80}, {field: &＃39;classify&＃39;, title: &＃39;职业&＃39;, width: 80}, {field: &＃39;wealth&＃39;, title: &＃39;财富&＃39;, sort: true, width: 135}]], page: true{, response:{statusCode: 200}, parseData:function (res) {return {"code": res.status,"msg" : res.msg,"count":res.count,"data": res.data};},id: &＃39;testReload&＃39;});//渲染的表格二table.render({elem: &＃39;#LAY_table_user2&＃39;, url: &＃39;/user2&＃39;, cols: [[{checkbox: true, fixed: true}, {field: &＃39;id&＃39;, title: &＃39;ID&＃39;, width: 80, sort: true, fixed: true}, {field: &＃39;username&＃39;, title: &＃39;用户名&＃39;, width: 80}, {field: &＃39;sex&＃39;, title: &＃39;性别&＃39;, width: 80, sort: true}, {field: &＃39;city&＃39;, title: &＃39;城市&＃39;, width: 80}, {field: &＃39;sign&＃39;, title: &＃39;签名&＃39;, width :80}, {field: &＃39;experience&＃39;, title: &＃39;积分&＃39;, sort: true, width: 80}, {field: &＃39;score&＃39;, title: &＃39;评分&＃39;, sort: true, width: 80}, {field: &＃39;classify&＃39;, title: &＃39;职业&＃39;, width: 80}, {field: &＃39;wealth&＃39;, title: &＃39;财富&＃39;, sort: true, width: 135}]], page: true{, response:{statusCode: 200}, parseData:function (res) {return {"code": res.status,"msg" : res.msg,"count":res.count,"data": res.data};},id: &＃39;testReload2&＃39;});var $ &＃61; layui.$, active &＃61; {reload: function () {var demoReload &＃61; $(&＃39;#demoReload&＃39;);//执行重载table.reload(&＃39;testReload&＃39;, {page: {curr: 1 //重新从第 1 页开始}, where: {id: demoReload.val(),}});//重载表格2table.reload(&＃39;testReload2&＃39;, {page: {curr: 1 //重新从第 1 页开始}, where: {id: demoReload.val(),}});},};$(&＃39;.demoTable .layui-btn&＃39;).on(&＃39;click&＃39;, function () {var type &＃61; $(this).data(&＃39;type&＃39;);active[type] ? active[type].call(this) : &＃39;&＃39;;});});
</script></body>
</html>
3.代码功能介绍
此部分仅介绍与上一篇博文不太一样的地方&＃xff0c;一样的地方默认跳过&＃xff0c;不清楚的童鞋可以参考下上一篇博文
1.定义js渲染的表格&＃xff0c;给到哪个table去显示
<table class&＃61;"layui-hide" id&＃61;"LAY_table_user" lay-filter&＃61;"user"></table>
创建table表格实体的时候&＃xff0c;会使用id标注一下这个&＃xff0c;例如LAY_table_user。但是最终这个表格的信息需要使用js渲染&＃xff0c;在渲染表格的时候&＃xff0c;我们需要指向js渲染的数据给到哪个表格。所以如下的渲染方法&＃xff0c;elem指向的表格就是上面表格实体的id
//方法级渲染table.render({elem: &＃39;#LAY_table_user&＃39;
2.重载数据的指向问题
//执行重载table.reload(&＃39;testReload&＃39;, {page: {curr: 1 //重新从第 1 页开始}, where: {id: demoReload.val(),}});
testReload这个字段&＃xff0c;对应的是表格重载的时候定义的数据id。我的理解是&＃xff0c;在表格重载的时候需要有个id区分这个数据的id。等到有按钮点击搜索的时候&＃xff0c;数据会变更&＃xff0c;这个数据对应的信息都应该改变&＃xff0c;但是id是不变的。所以定义这个表格的数据id&＃xff0c;然后重载的时候直接替换这个数据id对应的数据即可。
table.render({,id: &＃39;testReload&＃39;
)}
京公网安备 11010802041100号