代码拉取完成,页面将自动刷新
这个功能我做过,主要是屏蔽网页默认的右键菜单,自定义一个右键菜单,然后根据菜单的功能新增或者删除所在行,然后重新reload表格即可
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
目前能想到的就是通过重载机制对渲染的数据做操作实现行数据的插入,但是要是能在组件层面通过api实现就更好,更方便了
layui.use(['table', 'dropdown'], function () {
let table = layui.table, dropdown = layui.dropdown;
let contextmenuData = [
{ title: '测试菜单功能1', id: 1, templet: '<img src="../img/樱瞳.png" style="width: 16px;"> {{d.title}} <span class="layui-badge-dot"></span>' },
{ title: '刷新', id: 'reload', templet: '<i class="layui-icon layui-icon-refresh"></i> {{d.title}}' },
{ type:'-'},
{
title: '关联人员',
id: 3,
child: [
{id: 311, title: '关联1'},
{id: 312, title: '关联2'}
]
},
{ type:'-'},
{ title: '查看', id: 111},
{ title: '删除', id: 555},
{ title: '关闭', id: 666}
]
let testTable = table.render({
elem: '#test',
id: 'test',
cols: [[
{ field: 'id', hide: true},
{ field: 'name', title: '姓名'},
{ field: 'age', title: '年龄'},
]],
done: function () {
let currId;
dropdown.render({
elem: '.layui-table-main .layui-table tr',
trigger: 'contextmenu',
isSpreadItem: true,
ready: function (menu, elem) {
currId = table.getData('test')[elem.attr('data-index')].id
},
click: function (that, elem) {
if(that.title === "删除") {
//请求后台删除当前数据
console.log("删除了一行, 当前行Id: " + currId)
testTable.reload();
}
},
data: contextmenuData
})
},
data: []
})
//模拟请求数据
setTimeout(function () {
testTable.reload({
data: [
{id: 1, name: '张三', age: 24},
{id: 3, name: '李四', age: 26}
]
})
}, 2000)
})
登录 后才可以发表评论