关于layui数据表格获取后台数据，进行单元格编辑修改数据

最新推荐文章于 2024-10-24 14:15:23 发布

qq_36137248

最新推荐文章于 2024-10-24 14:15:23 发布

阅读量6.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_36137248/article/details/99629893

layui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍使用layui框架实现表格数据的动态操作与更新，包括数据的获取、修改、删除及全选验证等功能，通过具体代码示例展示了如何在前端进行高效的数据管理。

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

<body>
<table id="demo" lay-filter="test">

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getChecklength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a  lay-event="edit" class="layui-btn layui-btn-xs">编辑</a>
        <a  lay-event="del" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
    </script>

    <script>
        layui.use('table', function () {
            var $=layui.jquery;
            var table = layui.table;
            //监听单元格编辑
            table.on('edit(test)', function (obj) {
                var value = obj.value //得到修改后的值,
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                console.log(obj);
               // layer.msg(title)
                $.ajax({
                    url:"http://localhost:8080/role/updateRole",
                    data:{id:data.id , field:field,updateValue:value},
                    type:"post",
                    dataType:"json",
                    success: function (result) { 
                        layer.msg('[ID: ' + data.id + '] ' + title + ' 字段更改为：' + value);
                        //location.reload();
                    }
                })
            });
        });

        layui.use(['table', 'form'], function () {
            var $=layui.jquery;
            var table = layui.table;
            var popForm = layui.form;
            vipTable = layui.vip_table
            table.render({
                elem: "#demo",
                toolbar: "#toolbarDemo",
                url: "http://localhost:8080/role/listRole",
                page: false,
                //limit: 10,
                title: '角色数据表',
                cols: [
                    [
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'id', title: '编号', fixed: 'left', sort: true },
                        { field: 'name', edit: 'text', title: '角色名' },
                        { field: 'remark', edit: 'text',name:'备注', title: '备注' },
                        { field: 'status', edit: 'text', title: '状态' },
                        { field: 'right', edit: 'text', title: '操作', toolbar: '#barDemo', align: 'center' }
                    ]
                ]
            });
            //头部工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getChecklength':
                        var data = checkStatus.data;
                        layer.msg("选中了" + data.length + "个");
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                };
            });
            //监听工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                $ = layui.jquery
                if (obj.event === 'del') {
                    layer.confirm('真的删除此行么？', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 1,
                        //skin:'layui-layer-rim',设置边框
                        title: "修改角色信息",
                        area: ['35%', '370px'],
                        content: $("#popUpdateTest").html(),
                        offset: '50px'//设置弹出层在距离顶部，100px 水平居中
                    });
                    setFormValue(data)
                }
            });
            //动态向表单赋值
            function setFormValue(data) {
                popForm.val("formTestFilter", {
                    "userName": data.name
                    , "password": data.remark
                    , "roleName": data.status
                    , "userDescription": data.name
                });
                popForm.render(null, 'formTestFilter')
            }

            element=layui.element;
            $(document).on('click','#updateRole',function(){
                layer.msg('hello');

            });
        });
    </script>
</table>

<!-- 需要弹出的修改和添加员工界面 -->
<div class="layui-row" id="popUpdateTest" style="display:none; margin-top: -300px;margin-bottom: 100px;">
    <div class="layui-col-md10">
        <form class="layui-form" lay-filter="formTestFilter" id="addAndUpdateEmployeeForm">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="password" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-inline">
                    <input type="text" name="roleName" class="layui-input">
                </div>
                <!-- <div class="layui-input-inline">
                <button type="button" οnclick="selectRole()" class="layui-btn layui-btn-normal">角色名称</button>
            </div> -->
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="userDescription" style="width: 83%"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" id="updateRole" class="layui-btn layui-btn-normal" >提交</button>
                </div>
            </div>
        </form>
        <script>

        </script>
    </div>
</div>
</body>

作为小白，第一次发布博客，不足的地方有很多，愿各位有心大佬批评指正