在
layui 中使用数据表格实现
父子页面的方式如下：
1.在父
页面中，定义一个数据表格并加载数据，使用
layui.table.render() 方法实现：
```javascript
layui.use('table', function(){
var table =
layui.table;
table.render({
elem: '#table',
url: 'data.json', //数据接口
page: true, //开启分页
cols: [[ //表头
{field: 'id', title: 'ID', width:80},
{field: 'name', title: '用户名', width:120},
{field: 'sex', title: '性别', width:80},
{field: 'city', title: '城市', width:150},
{field: 'sign', title: '签名', width:200},
{field: 'experience', title: '积分', width:80},
{field: 'score', title: '评分', width:80},
{field: 'classify', title: '职业', width:120},
{field: 'wealth', title: '财富', width:120}
]]
});
});
```
2.给数据表格的每一行添加一个事件监听，该事件监听在用户点击某一行时执行，使用
layui.table.on() 方法实现：
```javascript
table.on('row(table)', function(obj){
var rowData = obj.data;
var tr = obj.tr;
//获取当前行数据，并展示子
页面
showChildPage(rowData.id);
});
```
3.在父
页面中实现一个函数，用于展示子
页面，该函数将子
页面加载到一个模态框中并打开模态框，通过模态框展示子
页面内容：
```javascript
function showChildPage(userId){
layui.use(['layer', 'table'], function(){
var layer =
layui.layer;
var table =
layui.table;
layer.open({
type: 1,
title: '子
页面',
area: ['700px', '500px'],
content: $('#childPage'),
success: function(layero, index){
// 在模态框中加载数据表格和数据
table.render({
elem: '#childTable',
url: 'child_data.json',
where: {
userId: userId
},
page: true,
cols: [[
{field: 'id', title: 'ID', width:80},
{field: 'title', title: '标题', width:400},
{field: 'content', title: '内容', width:200}
]]
});
}
});
});
}
```
4.在父
页面中添加一个模态框用于展示子
页面内容，并在该模态框中添加一个数据表格用于展示子
页面数据：
```html
<!-- 定义模态框 -->
<div id="childPage" style="display:none;">
<table id="childTable" lay-filter="childTable"></table>
</div>
```
5.在子
页面中，需要根据传入的用户 ID 加载相应的数据。按照步骤 2 和 3，在子
页面中添加一条类似于以下的代码实现：
```javascript
//获取 URL 中的参数值
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var userId = getParameterByName('userId');
layui.use(['layer', 'table'], function(){
var table =
layui.table;
table.render({
elem: '#table',
url: 'data.json',
where: {
userId: userId
},
page: true,
cols: [[
{field: 'id', title: 'ID', width:80},
{field: 'title', title: '标题', width:400},
{field: 'content', title: '内容', width:200}
]]
});
});
```
以上就是使用
layui 实现
父子页面数据表格的方法。这种实现方式比较通用，在实际项目中也可以根据需要进行一些改进和调整。
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
