layui数据表格实现动态增加一行或删除一行

realnode.png vps-under-title.png 科学上网教程 | 机场推荐 | 云深不知处(机场)

实现代码及思路如下:

HTML代码

<div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 tableWidget">
    <table id="dataTableEditTable" lay-filter="dataTableEditTable"></table>
</div>

JS代码

var blankRowData = {
    'dataItemNo': '', 'dataItemName': '', 'dataItemDescription': '', 'dataType': '', 'isKey': '',
    'isNullable': '', 'isForeignKey': '', 'dataElement': '', 'dataDict': ''
};
var tableData = [];
if (layui.cache.identified == 'dataTableEdit') {
    table.render({
        elem: '#dataTableEditTable',
        id: "dataTableEditTable",
        cellMinWidth: 95,
        toolbar: "#toolbar",
        defaultToolbar: [],
        height: "full-160",
        text: {none: "暂无数据"},
        page: false,
        cols: [
            [
                {
                    type: "checkbox",
                    fixed: 'left',
                    width: 40
                },
                {
                    field: 'dataItemNo',
                    title: '数据项编号',
                    width: 150,
                    align: 'center'
                },
                {
                    field: 'dataItemName',
                    title: '数据项名称',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'dataItemDescription',
                    title: '数据项描述',
                    align: 'center'
                },
                {
                    field: 'dataType',
                    title: '数据类型',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'isKey',
                    title: '是否主键',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'isNullable',
                    title: '是否可为空',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'isForeignKey',
                    title: '是否外键',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'dataElement',
                    title: '数据元',
                    width: 100,
                    align: 'center'
                },
                {
                    field: 'dataDict',
                    title: '数据字典',
                    width: 100,
                    align: 'center'
                }
            ]
        ],
        data: tableData
    });
}


/*增加/删除一行点击事件*/
table.on("toolbar(dataTableEditTable)", function (e) {
    switch (e.event) {
        case "add":
            tableData.push(blankRowData);
            table.reload('dataTableEditTable', {
                data: tableData
            });
            break;
        case "del":
            tableData.splice(tableData.length -1 , 1);
            table.reload('dataTableEditTable', {
                data: tableData
            });
            break;
    }
});

实现思路

定义一个全局变量tableData保存表格数据,点击增加时,向tableData增加一条空白数据blankRowData,然后重新加载表格。

赞(7)
未经允许禁止转载:优米格 » layui数据表格实现动态增加一行或删除一行

评论 3

  1. #1

    不行

    wq2年前 (2021-11-02)回复
    • 这个是我在实际使用中验证过的

      巴巴主机2年前 (2021-11-04)回复
  2. #2

    nice 完美兄嘚!

    x-rush10个月前 (08-22)回复

合作&反馈&投稿

商务合作、问题反馈、投稿,欢迎联系

广告合作侵权联系

登录

找回密码

注册

Ads Blocker Image Powered by Code Help Pro

检测到广告已被屏蔽

尊敬的优米格用户,

您好,系统检测到您使用了广告屏蔽组件。本网站并不包含任何侵入性广告,如果本站能给您一点帮助,还请将本站加入拦截白名单,这是我们仅有的收入来源!

网站的持续运作和改进,需要您的慷概帮助,感谢您的支持。

此致,
优米格 团队