layui表格,在最后一行第一个空,创建一个带索引和新增的按钮
时间: 2024-05-04 15:16:37 浏览: 161
LayUI table新增空白行
好的,针对您的问题,我可以提供以下的layui表格代码:
```html
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
//展示已知数据
var dataList = [
{id:1, name:'小明', age:20},
{id:2, name:'小红', age:18},
{id:3, name:'小亮', age:19},
{id:4, name:'小刚', age:22},
{id:5, name:'小丽', age:21},
{id:6, name:'小芳', age:20},
{id:7, name:'小李', age:23},
{id:8, name:'小张', age:25},
{id:9, name:'小王', age:26},
{id:10, name:'小胡', age:28},
{id:11, name:'小赵', age:27},
{id:12, name:'小钱', age:24},
{id:13, name:'小周', age:29},
{id:14, name:'小吴', age:30}
];
table.render({
elem: '#demo',
data: dataList, //这是展示的数据
cols: [
[
{ type: 'numbers', title: '序号' },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ fixed: 'right', title: '操作', toolbar: '#barDemo', width:150}
]
],
//生成最后一行的数据
done: function(res, curr, count){
var lastTr = $(".layui-table-body tr:last");
lastTr.find('td').eq(0).html(count + 1); //序号自动增加
var newRow = '<tr data-index="'+ (count + 1) +'" class="">'
+ '<td data-field="">' + (count + 1) + '</td>'
+ '<td data-field="name"> </td>'
+ '<td data-field="age"> </td>'
+ '<td data-field=""> <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</button></td>'
+ '</tr>';
lastTr.after(newRow);
}
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'add'){
//do something
layer.alert('新增功能待实现');
}
});
});
</script>
<!-- 定义操作的工具条 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
```
这段代码是一个基于layui开发的表格,它可以展示已知数据,并动态生成最后一行,其中包括一个新增按钮。对于最后一行新增的数据,还可以通过监听“行工具事件”实现编辑和删除功能。
注意:为了实现最后一行中序号的自动增加和操作按钮,本代码中使用了jQuery和LayUI的两种库文件。 在代码中需要注意以下几点:
- 这里的dataList是一个JSON数组,包含了要展示的数据。
- elem 指定了要渲染的table元素。
- cols 指定表头、列数据等属性。
- done函数用来完成动态生成最后一行的功能,通过遍历dom元素实现。
- 行工具监听事件,可以实现对新增数据的编辑和删除功能。
希望这个代码对你有帮助!
阅读全文