[ layui 笔记] table 回调函数实现弹窗预览表格行数据 和 编辑表格行数据

一、查看表格行数据

当layui表格横向字段太多，滚动条查看非常不方便，客户要求每行只展示几条数据，然后给每行一个查看按钮，点击预览可查看所在行全部数据。

1、在 table.on() 监听表格查看按钮点击事件中获得所在行数据 obj

2、用 layer.open() 打开查看页面，content 是查看页面地址

3、在 success 回调函数中用 layer.getChildFrame（）读取查看页面的 body 标签，用 body.fine（）读取查看页面的 input 输入框的 id

 4、用 val（）方法给 input 输入框赋值即可展示表格数据

 先看查看页面效果：

 查看页面代码：

查看按钮监听代码：

table.on('tool(currentTableFilter)', function (obj) {
    var data = obj.data; // 获取当前行数据
    if (obj.event === 'detail') { //预览信息

                    var index = layer.open({
                        title: '预览信息',
                        type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'detail.html',
                        success: function (layero, index) { //回调函数
                            console.log("回调函数", data)
                            var body = layer.getChildFrame('body', index)
                            body.find('#id').val(data.id)
                            body.find('#name').val(data.name)
                            body.find('#sex').val(data.sex)
                            body.find('#ethnic').val(data.ethnic)
                            body.find('#nativePlace').val(data.nativePlace)
                        }
}

二、编辑表格行数据

查看实现之后就可以编辑了，我这里偷懒是直接在查看页面修改信息

1、监听确认修改按钮，得到data数据

2、向后台接口发起请求，请求代码不能直接用，需要自己写，可以参考后面的请求代码

 浏览器控制台检查是否能成功获取到修改的额数据

 监听修改按钮代码：

//监听编辑按钮
            form.on('submit(saveBtn)', function (data) {
                console.log("编辑信息数据", data)
                
                // 发起请求 可选参数：(urlStr, typeStr, asyncBoole, bodyObj, retFun, token, param)
                http.appRequst("url", "PUT", true, data.field, retAdd, http.token);
                function retAdd(res) {
                    if (res.code == 200) {
                        var index = layer.msg("修改成功", {
                            time: 1000 // 弹窗延迟 1秒
                        }, function () {
                            // 关闭弹出层
                            layer.close(index);
                            // 关闭添加页面
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        })
                    }
                }
                return false;
            });

发起请求代码参考：

$.ajax({
                url: '', //请求地址
                type: 'put', //请求类型，post/get/put/delete
                dataType: 'json',//请求的数据类型
                data: JSON.stringify({"name": "张三", "sex": "男"}), //请求的数据，并将请求的数据转成JSON格式
                contentType: 'application/json;charset=UTF-8', //
                headers: {Authorization: '这里写token'}, //请求头token（没有token可以不要这行）
                async: true, //同步还是异步， true异步，false同步
                success: function (res) { //请求成功回调函数
                    console.log("返回的结果",res);
                },
                error: function (res) { //请求失败回调函数
                    console.log("返回的结果",res);
                }
            });