layui使用edit属性修改行内容

最新推荐文章于 2025-05-26 16:38:55 发布

Mitin_

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量3.1k

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/Mitin_/article/details/129735811

版权

该文介绍如何使用layui框架为表格添加编辑功能，包括给表头添加edit属性，触发单元格编辑，以及使用Ajax进行数据更新。同时，文章提到了搜索功能的实现，排序设置，以及在使用layui时应注意的错误避免，如table.on方法的位置和layui.use模块引入。

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

查阅文档：

一、给表头添加edit属性

二、使用触发单元格编辑

准备对应的参数，传到对应的url就可以了.

详见以下的 table.on('edit(test)', function (obj) {})方法

<!DOCTYPE html>
<html class="x-admin-sm">

<include file="Common:header" />

<body>
   // ......
</body>

<script>
    //搜索功能
    $('#sreach').click(function () {
        var appType = $('.layui-this').data('apptype');
        var appType = $('#appType').val();

        var serialNumber = $('#serialNumber').val();
        var phone = $('#phone').val();
        var testing = $('#testing').val();
        var status = $('#status').val();
        var type = $('#type').val();
        var count = $('#count').val();

        if (appType != '') {
            var url = '************';
        } else {
            var url = '***********';
        }

        layui.use(['table'], function () {
            var table = layui.table //表格
            //执行一个 table 实例
            table.render({
                elem: '#demo',
                url: url, //数据接口
                // ......
                cols: [
                    [ //表头
                        //                {type: 'checkbox', fixed: 'left'} dealwithOpinion
                        {
                            field: 'phone',
                            title: '手机号',
                            width: 110,
                        }, {
                            field: 'type',
                            title: '类型',
                            width: 60
                        }, {
                            field: 'time',
                            title: '提交时间',
                            width: 120
                        }, {
                            field: 'dealwithOpinion',
                            title: '备注内容',
                            width: 120,
                            edit: 'text',
                        }
                    ]
                ],
                initSort: {
                    field: 'time' //排序字段，对应 cols 设定的各字段名
                        ,
                    type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
            });
        });
    })

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'form'], function () {
        var laydate = layui.laydate, //日期
            laypage = layui.laypage, //分页
            layer = layui.layer, //弹层
            table = layui.table, //表格
            carousel = layui.carousel, //轮播
            upload = layui.upload, //上传
            element = layui.element, //元素操作
            slider = layui.slider, //滑块
            form = layui.form

        laydate.render({
            elem: '#registertime_start' //指定元素
                ,
            type: 'datetime'
        });
        laydate.render({
            elem: '#time' //指定元素
                ,
            type: 'datetime'
        });

        var appType = $('.layui-this').data('apptype');
        var appType = $('#appType').val();

        var serialNumber = $('#serialNumber').val();
        var phone = $('#phone').val();
        var testing = $('#testing').val();
        var status = $('#status').val();


        if (appType != '') {
            var url = '******';
        } else {
            var url = '******';
        }

        //执行一个 table 实例
        table.render({
            elem: '#demo',
            url: url, //数据接口
            // ......
                ,
            toolbar: 'true' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                //                ,totalRow: true //开启合计行
                ,
            cols: [
                [ //表头
                    //                {type: 'checkbox', fixed: 'left'}
                    {
                        field: 'phone',
                        title: '手机号',
                        width: 110,
                    }, {
                        field: 'type',
                        title: '类型',
                        width: 60
                    }, {
                        field: 'time',
                        title: '提交时间',
                        width: 120
                    }, {
                        field: 'dealwithOpinion',
                        title: '备注内容',
                        width: 120,
                        edit: 'text',
                    }
                ]
            ],
            initSort: {
                field: 'time', //排序字段，对应 cols 设定的各字段名
                type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo', //分页容器的id
            count: 100, //总页数
            skin: '#1E9FFF', //自定义选中色值
            //,skip: true //开启跳页

            jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {
                        offset: 'b'
                    });
                }
            }
        });
        // ***********************************
        // *******单击修改表格中的数据********
        // ***********************************
        table.on('edit(test)', function (obj) {
            var value = obj.value, //得到修改后的值
                data = obj.data, //得到所在行所有键值
                field = obj.field; //得到字段
            //ajax 请求
            $.ajax({
                type: "POST",
                url: "**************",
                data: {
                    'id': data.fb_id,
                    'value': value,
                    'field': field,
                    'doData': data,
                },
                success: function (ret) {
                    ret = JSON.parse(ret)
                    if (ret.code == 1) {
                        layer.msg(ret.msg, {
                            icon: 6,
                            time: 2000
                        }, function () {
                            // location = location;
                        });
                    } else {
                        layer.msg(ret.msg, {
                            icon: 2,
                            time: 3000
                        }, function () {
                            location = location;
                            //do something
                        });
                    }
                },
                error: function (response) {

                }
            });
        });

    });
</script>

</html>

三、注意点：

1，不要将table.on这个写错地方了，楼主刚开始写到layui.use外面去了，导致报错table不存在

2，不要在layui.use中引入这个table