在页面中定义一个layui表格容器,通过var定义一个data数组,数组里面创建假数据,通过layui表格将data里面的数据创建到页面上,并附带删除功能
时间: 2024-05-06 14:21:43 浏览: 88
好的,您的问题是如何在页面中定义一个layui表格容器,通过var定义一个data数组,并将数据创建到页面上,并附带删除功能。
首先,您需要在页面中引入 layui 的相关文件,包括 layui.css 和 layui.js,以及 layui 的相关模块,如layui.table,具体用法可以参考layui官网的文档。
接着,您可以使用如下代码定义一个layui表格容器,并定义一个data数组:
```
<div class="layui-container">
<table class="layui-hide" id="myTable" lay-filter="myTable"></table>
</div>
<script>
var data = [
{id: '1', name: '小明', age: 20},
{id: '2', name: '小红', age: 22},
{id: '3', name: '小张', age: 25},
{id: '4', name: '小李', age: 28}
];
</script>
```
其中,`layui-hide`类用于隐藏表格,`lay-filter`属性用于定义表格的过滤器,便于后面操作。
接下来,您可以使用layui.table模块的 render 方法创建表格,并将数据渲染到页面上:
```
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#myTable',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{fixed: 'right', title:'操作', toolbar:'#barDemo'}
]],
data: data
});
table.on('tool(myTable)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
});
});
</script>
```
其中,`table.render`方法用于创建表格,`elem`属性用于指定要渲染的容器,`cols`属性用于定义表头和对应的字段,`data`属性用于指定要渲染的数据。
同时,我们为表格添加了操作列,用于删除数据,需要在页面中定义对应的html代码:
```
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
```
最后,使用`table.on`方法监听表格事件,当用户点击删除按钮时,弹出确认框进行删除操作:
```
table.on('tool(myTable)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
});
```
这样,您就成功地在页面中定义了一个layui表格容器,并通过var定义一个data数组,数组里面创建假数据,通过layui表格将data里面的数据创建到页面上,并附带删除功能了。
阅读全文