JS工具方法 2 layui可编辑表格--代码复制后即可使用_js 获取 layui table 数据表格编辑操作-CSDN博客

本文介绍了一个基于layui框架的表格组件实现案例，通过JSON数据填充表格，并集成了单元格编辑、下拉选择器、切换开关等功能，同时展示了如何使用layui的各种交互特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资源下载地址：https://download.csdn.net/download/a486259/10514261 已失效

内含普通编辑表格，切换开关，下拉选择器，操作按钮组

效果图

1.样板json数据格式保存为 dataTable.json

{
  "code": 0,
  "msg": "",
  "count": 100,
  "data": [
    {
      "id": 10000,
      "username": "user-0",
      "sex": "女",
      "city": "昆明",
      "sign": "签名-0"
    },
    {
      "id": 10001,
      "username": "user-1",
      "sex": "男",
      "city": "楚雄",
      "sign": "签名-1"
    },
    {
      "id": 10002,
      "username": "user-2",
      "sex": "女",
      "city": "富源",
      "sign": "签名-2"
    },
    {
      "id": 10003,
      "username": "user-3",
      "sex": "女",
      "city": "富源",
      "sign": "签名-3"
    },
    {
      "id": 10004,
      "username": "user-4",
      "sex": "男",
      "city": "富源",
      "sign": "签名-4"
    },
    {
      "id": 10005,
      "username": "user-5",
      "sex": "女",
      "city": "长沙",
      "sign": "签名-5"
    },
    {
      "id": 10006,
      "username": "user-6",
      "sex": "女",
      "city": "桂林",
      "sign": "签名-6"
    },
    {
      "id": 10007,
      "username": "user-7",
      "sex": "男",
      "city": "长春",
      "sign": "签名-7"
    }
  ]
}

2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
        .layui-table-cell {
            overflow: visible !important;
        }
        /* 设置下拉框的高度与表格单元相同 */
        .layui-input, .layui-select, .layui-textarea{
            height: 30px !important;
        }
    </style>
</head>
<body>

<table class="layui-hide layui-form" id="tableDemo" lay-filter="tableDemo"></table>
<blockquote class="layui-elem-quote layui-quote-nm" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'table', 'element', 'form'], function () {
        var layer = layui.layer //弹层
            , table = layui.table //表格
            , form = layui.form;
        //监听地址选择操作
        form.on('select(selectDemo)', function (obj) {
            layer.tips(obj.elem.getAttribute('name') + '：'+obj.value + ' ' + obj.elem.getAttribute('dataId') , obj.othis);
        });
        //监听性别操作
        form.on('switch(sexDemo)', function (obj) {
            layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        });

        //执行一个 table 实例
        table.render({
            elem: '#tableDemo'
            , height: 332
            , url: 'dataTable.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'sign', title: '可编辑', edit: 'text',width: 80, sort: true}
                , {field: 'city', title: '城市', width: 80}
                , {field: 'sex', title: '性别', width: 85, templet: '#switchTpl', unresize: true}
                , {field: 'lock', title: '下拉框', width: 110, templet: '#selectTool', unresize: true}
                , {fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barDemo'}
            ]]
        });
        //监听单元格编辑
        table.on('edit(tableDemo)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });
        //监听工具条
        table.on('tool(tableDemo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });
    });
</script>

<script type="text/javascript">
    var cityArr = ['昆明', '长沙', '富源', '楚雄', '长春', '哈尔滨', '桂林'];
</script>
<script type="text/html" id="selectTool" desc="下拉选择器" intro="用到了layui模板（不能设置lay-ignore,否则监听不到事件）">
    <select name="city" dataId="{{d.id}}" lay-filter="selectDemo">
        {{# layui.each(cityArr, function(index, item){ }}
        <option {{ (d.city==item)?'selected' : '' }}>{{ item }}</option>
        {{# }); }}
    </select>
</script>

<script type="text/html" id="switchTpl" desc="切换开关" intro="layui表单空间">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch"
           lay-text="女|男" lay-filter="sexDemo" {{ (d.id==10003)?'checked' : '' }}>
</script>

</body>
</html>