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

这个来记录新增和修改共用一个表单 这都是最最最基础的 但是刚接触的时候从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()
}