写一个使用var 定义一个名为data数组,在data数组里面创建数据,通过layui表格里面clos形式把数据渲染到表格中,同时将一个用于新增功能添加到到表格最后一行,第二个格子内前面加上索引
时间: 2024-04-29 13:26:04 浏览: 88
好的,您的问题我已经收到了。根据您的要求,我可以为您编写如下代码:
```
<script>
layui.use(['table', 'form'], function() {
var table = layui.table;
var form = layui.form;
var data = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 30},
{id: 3, name: '王五', age: 25},
{id: 4, name: '赵六', age: 28},
];
table.render({
elem: '#demo',
cols: [[
{type: 'numbers'},
{field: 'name', title: '姓名', edit: 'text'},
{field: 'age', title: '年龄', edit: 'text'},
{fixed: 'right', title: '操作', toolbar: '#barDemo'}
]],
data: data
});
table.on('tool(test)', function(obj){
var layEvent = obj.event;
if(layEvent === 'add'){
var index = obj.tr.index();
var newRow = {id: data.length+1, name: '', age: ''};
data.splice(index+1, 0, newRow);
table.reload('demo', {
data: data,
page: {
curr: 1
}
});
}
});
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
```
以上代码中,我们首先使用 var 定义了一个名为 data 的数组,并在其中定义了一些数据。然后使用 layui 的表格组件将数据渲染到表格中,并在每行的最后一列添加了一个“新增”操作按钮。当用户点击了该按钮时,会在表格的最后一行添加一行新的数据,并且该行的第一个单元格显示当前数据的索引值。同时,我们为表格中的“新增”按钮、编辑按钮和删除按钮绑定了相应的事件,可以根据需要进行处理。
阅读全文