增加/修改某实体的套路

修改某实体的套路

要修改一个对象，首先查询出要修改那些字段。查询出来一般可用两列来显示，一列名称，一列值。
这两列可以左边右对齐，右边默认(左对齐),css如下:

.editDiv div{
    margin:5px 0px;
    font-weight:500
}
.editDiv div span{
    display:inline-block;
}
.inputLine{
    width:160px;
    float:left;
    text-align:right;
    margin:0px 10px;
}

html如下:

<div style="overflow-y: auto;" id="mainTab" class="editDiv">
    <div style="margin:10px 0px;"></div>
    <div><span class="inputLine">名称:</span><span><input type="text" name="templateSign"/></span></div>
    <div><span class="inputLine">页码:</span><span><input type="text" name="paperNo" readonly /><!--如果要改页码,可删除后再上传--></span></div>
    <div><span class="inputLine">预估时间:</span><span><input type="text" name="useTime"/>分钟</span></div>
    <div><span class="inputLine">图片:</span>
          <span>
                <div><img id="sheetImg" src='' style='width:500px'/></div>
                <div><a href='javascript:void(0)' onclick="$('#imgFile').click()">重新上传</a></div>
                <input type='file' id='imgFile' name='imgFile' onchange='uploadImg(this)' style='display:none'/>
          </span>
    </div>
</div>

查询的js就不粘了，就是普通的ajax请求。这里的图片就修改img标签的src属性就好了。
图片的修改这说下，我的方法是上传了图片后就把这个img的src改成新的图片地址，当提交时，就把这个地址做为参数传到后台，来实现修改图片。uploadImg函数如下:

function uploadImg(fileObj){
    let sheetId=getQueryString("sheetId");
    var filename = $(fileObj).val();
    if (filename.length > 0) {
        var index1 = filename.lastIndexOf(".");
        var index2 = filename.length;
        var postf = filename.substring(index1 + 1, index2);//后缀名
        if (postf != 'gif'&&postf != 'jpg'&&postf != 'png'&&postf != 'jpeg') {
            layer.alert("支持上传图片文件格式为[gif,jpg,png,jpeg]");
            $(fileObj).val("");
            return;
        }

        //转圈的进度图
        var loadIndex = layer.load(2);
        jQuery.ajaxFileUpload({
            url: '/xx/uploadSheetImg', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'imgFile', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            data: {sheetId: sheetId},
            success: function (data)//服务器成功响应处理函数
            {
                $(fileObj).val("");
                layer.close(loadIndex);

                if (data.code == 1) {
                    let dataObj=data["data"];
                    $("#sheetImg").attr("src",dataObj["fileurl"]);
                } else {
                    layer.alert(data.msg, {icon: 2});
                }
            }
        });
    }
}

最后是提交，就是把所有属性值都再传上去。

提交按钮一般居中(除了左边名称)，但居中就须先设置一下宽度，这个宽度应与上面的span宽保持一致。代码如下:

<div class="titleDiv">
	<span class="inputLine" style="display:inline-block;"> </span>
	<span style="text-align:center;margin-left:160px;display:flex;justify-content:center;width:400px;"><input type="button" name="" value="保存" onclick="addPolyphone()"/>   <input style="margin-left:50px" type="button" name="" value="返回" onclick="history.go(-1)"/></span>
</div>

文/程忠浏览次数：0次 2020-03-05 20:52:50

增加/修改某实体的套路

相关阅读