表格点击按钮,在最后一行前面新增一行

这个我真的研究太久了,迟迟不知道如何写,element不能固定最后一行和第一行,但是刚开始又要求在最后一行之前新增,最后一行的id永远+1,保持在最后。

前面按钮的代码就不展示了,应该都会,直接上方法吧。

addDomain() {
  const length = this.workData.length  // 定义length为获取当前数据的长度
  this.workData[length - 1].number = length + 1  // 给数组最后一个数据的id加一
  this.workData.splice(length - 1, 0, { 
    number: length,
    name: '',
    scribe: '',
    key: Date.now()
  }) // 给数组最后一行之前加入新数据
}

好的,您想了解如何在layui表格最后一行添加一个新增按钮。您可以通过以下步骤来实现: 1. 首先,您需要在表格的配置项添加一个自定义操作列(toolbar)。 2. 在这个操作列,添加一个自定义按钮,并设置它的事件。 3. 在事件,您可以编写代码来弹出一个对话框,让用户填写的数据。 4. 当用户输入完数据后,您需要将这些数据提交到后台,并将返回的数据插入表格最后一行。 下面是一个示例代码,可以帮助您实现上述功能: ```js // 定义表格的配置项 var options = { // 定义操作列 toolbar: '#toolbar', // 设置数据 data: [{id: 1, name: '张三', age: 18}, {id: 2, name: '李四', age: 20}], // 定义表头 cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]] }; // 初始化表格 var table = layui.table.init('#table', options); // 监听新增按钮的点击事件 $('#add-btn').click(function() { // 弹出对话框,让用户输入数据 var dialog = layer.open({ title: '新增数据', content: '<div><input type="text" name="name" placeholder="姓名" /><br/><input type="text" name="age" placeholder="年龄" /></div>', btn: ['保存', '取消'], yes: function(index, layero) { // 获取用户输入的数据 var name = layero.find('input[name="name"]').val(); var age = layero.find('input[name="age"]').val(); // 将数据提交到后台,并插入表格最后一行 $.ajax({ url: '/add', data: {name: name, age: age}, success: function(result) { table.append(result); layer.close(dialog); } }); } }); }); ``` 这段代码,我们在表格的配置项定义了一个操作列(toolbar),并在其添加了一个自定义按钮(add-btn)。当用户点击这个按钮时,会弹出一个对话框,让用户输入新增数据。用户输入完数据后,我们通过ajax将数据提交到后台,并将返回的结果插入表格最后一行。 希望以上内容能帮助您解决问题,如果还有不清楚的地方,欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值