2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

建议表格模块增加自定义行插入行数据功能

已完成
创建于  
2022-12-23 16:35

说明

  • 版本:v2.7.6
  • 描述:能否添加自定义行新增行数据,比如在指定的行,行的上方或者下方添一行空的或者拷贝的数据

输入图片说明

评论 (6)

弓长张 创建了任务
弓长张 修改了描述
弓长张 修改了标题
弓长张 修改了标题
展开全部操作日志

这个功能我做过,主要是屏蔽网页默认的右键菜单,自定义一个右键菜单,然后根据菜单的功能新增或者删除所在行,然后重新reload表格即可

@hmy_666 可否给个代码片段或者demo,参考一下,万分感谢

目前能想到的就是通过重载机制对渲染的数据做操作实现行数据的插入,但是要是能在组件层面通过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)
    })

感谢大佬思路,目前已经实现通过操作数据的方式实现插入行

贤心 添加了
 
建议
标签
贤心 添加了
 
精华
标签
贤心 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(4)
6567348 hmy001 1686530916 10044285 twodoger 1663400211 92529 sentsin 1578917144
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891