增加/修改某实体的套路

修改某实体的套路

要修改一个对象,首先查询出要修改那些字段。查询出来一般可用两列来显示,一列名称,一列值。
这两列可以左边右对齐,右边默认(左对齐),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

相关阅读


评论: