Layui框架实战基础(增删改查)表格表单(二)

最新推荐文章于 2024-08-06 02:06:34 发布

CV工程师!!

最新推荐文章于 2024-08-06 02:06:34 发布

阅读量1.3k

点赞数 3

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/m0_65607651/article/details/131383734

版权

Layui 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

文章介绍了如何利用layui框架结合AJAX来实现表格中数据的新增和修改功能。点击表格的‘编辑’按钮时，通过调用接口获取详情数据回显到表单，而‘删除’则直接处理。表单的回显利用了layui的form.val方法，保存操作根据是否存在编辑ID来判断是新增还是更新数据。

摘要由CSDN通过智能技术生成

这个来记录新增和修改共用一个表单这都是最最最基础的但是刚接触的时候从0开始写也让我找不少文章还是跟大家伙开发其他框架一样写成动态变量什么都可以复用

1. 将新增表单当做基础修改回显都是在它基础上做的

//这是上个文章讲的 表格点击事件
        // 绑定点击事件
        table.on('tool(checkTable)', function (obj) {
            var data = obj.data;//获得当前行数据
            var layEvent = obj.event; 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (obj.event === 'updata') {
        //当点击的是修改时我这是调用接口传入该条数据的id拿到的详细数据 然后大家后台没有写这个接口的话 直接使用上面的data 直接拿整行数据也是一样 跟element ui 的scoped一样
                $.ajax({
                    type: "get",
                    url: getProjectDetail + '/' + data.id,
                    async: false,
                    headers: {
                        'dm-authorize-token': $.cookie("token"),
                    },
                    data: {
                        id: data.id,
                    },
                    success: function (e) {
                        if (e.code == 200) {
                            //这是点击添加按钮的那个方法 第一个参数是占位符来区分是添加还是删除 第二个是拿到的你点击那一行的数据
                            addBtn(true, e.data)
                        } else {
                            layer.msg(e.msg);
                        }
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                    }
                });
            } else if (obj.event === 'delete') {
                deleteRepresentEvent(data)
            }
        });

//正常点击添加是不传参数的 然后我们点击编辑按钮的话传递第一个参数
 这个就是来区分是新增还是编辑
// 新增编辑
function addBtn(type, data) {
    layer.closeAll("tips");
    var title = "新增标签";
    //点击编辑的数据的id 先定义为空
    editProjectId = ''
    if (type) {
        title = "编辑标签";
        //如果为编辑的话 将回显编辑的id赋值给变量
        editProjectId = data.id
    }
//通用的弹窗用来镶嵌表单
    layer.open({
        type: 1,
        area: ["680px", "410px"],
        title: title,
        content: $("#editProjectLayer"),
        resize: false,
//点击右上角x号触发
        cancel: function () {
            cancelProjectBtn()
        },
//成功之后触发
        success: function (layero, index_0) {
//    如果点击的为编辑的话 
            if (type) {
                // 数据回显
                form.val("form", {
                    "name": data.name,
                    "remark": data.remark,
                    "type": data.type
                })
                // 颜色回显
                colorpicker.render({
                    elem: '#colorInput',
                    color: data.color,
                    done: function (color) {
                        labelColor = color
                    }
                });
            } else { 
                //后面还可以执行其他操作 (就是正常点击添加之后 要是想让哪一个输入框为固定项 不可修改的那种 在这里面设置)
            }
        },
    });
}

在这里呢使用form的.val方法来回显前面的form是layui的form组件上面要是定义的话记得设置为全局变量不然访问不到后面这个form 是你页面表单的lay-filter=" "值里面字段是你输入框的 name 值!

<form class="layui-form" id="addGoodsForm" lay-filter="form">
	<div class="layui-form-item " style="width:calc(100% - 55px)">
						<label class="layui-form-label"><span class="star">*</span>标签名称:</label>
						<div class="layui-input-block">
							<input type="text" id="labelName" name="name" autocomplete="off" placeholder="请输入标签名称"
								class="layui-input nameIput" />
						</div>
					</div>
					<div class="layui-form-item " style="width:calc(100% - 55px)">
						<label class="layui-form-label" for="searchStatus"><span class="star">*</span>标签类型:</label>
						<select id="labelType" class="search-input" name="type" style="margin-left: 4px;">
							<option value="">请选择标签类型</option>
							<option value="1">优秀项目</option>
							<option value="2">十佳项目</option>
						</select>
					</div>
</form>

回显完就是最后的保存按钮功能了

// 保存
function saveProjectBtn() {
    var labelName = $("#labelName").val();
    var labelType = $("#labelType").val();
    var colorInput = labelColor;
    var remark = $("#remark").val();

    if (labelName == "" || labelName == null) {
        return layer.msg("标签名称不能为空");
    }
    if (labelType == "" || labelType == null) {
        return layer.msg("标签类型不能为空");
    }
    if (colorInput == "" || colorInput == null) {
        return layer.msg("标签颜色不能为空");
    }
    //动态变量 请求地址和msg信息
    var url = addProjectTag
    var msg = ('添加成功');
    var personTag = {
        name: labelName,
        type: labelType,
        color: colorInput,
        remark: remark,
    };
//判断是否存在编辑id 也就是手否为编辑状态 用分别不同的参数和请求接口
    if (editProjectId != "" && editProjectId != null) {
        url = updateProjectTag;
        msg = ('修改成功');
        var personTag = {
            name: labelName,
            type: labelType,
            color: colorInput,
            remark: remark,
            id: editProjectId
        };
    }
//最后就是正常发请求
    $.ajax({
        type: "post",
        url: url,
        async: false,
        headers: {
            'Content-Type': 'application/json',
            'dm-authorize-token': $.cookie("token"),
        },
        data: JSON.stringify(personTag),
        success: function (e) {
            console.log(e);
            if (e.code == 200) {
    //这是成功之后调用的方法 用来刷新表格和关闭弹框等等 一般用作取消按钮使用
                cancelProjectBtn();
                setTimeout(function () {
                    layer.msg(msg);
                }, 300)
            } else {
                layer.msg(e.msg);
            }
        },
        error: function (e) {
            layer.msg(e.msg);
        }
    });
}

// 取消
function cancelProjectBtn() {
    // 清空表单 （“addGoodsForm”是表单的id）
    $("#addGoodsForm")[0].reset();
    layui.form.render();
   
    // 清空编辑id
    editProjectId = "";
//关闭弹窗
    layer.closeAll()
//获取表格数据的方法 调用相当于刷新表格
    initCheckTable()
}