js

js动态添加元素并给元素添加事件

$('#specification_div').delegate($('input[type="radio"]'),'change',function() {});

 

js动态上传文件 如图：

1

<script type="text/javascript" charset="utf-8" th:src="@{/ajaxfileupload.js}"></script>

2

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">模式：</label>
            <input id="dynamicAddBtnId" class="btn btn-secondary radius" style="margin-left: 35px;width: 90px" value="添加" />
            <div class="formControls col-xs-8 col-sm-9">
                <table class="table table-border table-bg" width="300px" style="margin-left: 150px;margin-top: 10px;">
                    <thead>
                    <tr >
                        <th>文件</th>
                        <th>标题</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">
                    </tbody>
                </table>
            </div>
        </div>

3

    let index = 0;
    let $tbody = $('#tbodyId');
    $('#dynamicAddBtnId').click(function(){
        let html =
                '<tr>' +
                    '<td>' +
                        '<input id="file_' + index + '" type="file" />' +
                        '<input id="file_id'+ index +'" name="rdHomeVo[' + index + '].file" type="hidden" />' +
                    '</td>' +
                    '<td>' +
                        '<input name="rdHomeVo[' + index + '].title" type="text" class="input-text" maxlength="200" />' +
                    '</td>' +
                    '<td>' +
                    '    <a href="javascript:;" class="remove">[删除]</a>' +
                    '</td>' +
                '</tr>';
        $tbody.append(html);
        index++;
    });

    // 删除案例图片
    $tbody.on("click", "a.remove", function() {
        $(this).closest("tr").remove();
    });

    $('#tbodyId').on('change',':file',function(){
        fileUpload($(this).attr('id'));
    });

    function fileUpload(id){
        let filename = $("#" + id).val();
        if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filename)){
            alert("You must select a valid image file!");
            return false;
        }
        //创建formdata对象
        let formData = new FormData();
        //给formData对象添加<input>标签,注意与input标签的ID一致
        formData.append('file', $('#' + id)[0].files[0]);
        $.ajax({
            url : '/upload/images',//这里写你的url
            type : 'POST',
            data : formData,
            contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
            processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
            dataType: 'json',//这里是返回类型，一般是json,text等
            clearForm: true,//提交后是否清空表单数据
            statusCode: {
                200 : function(data){
                    console.log(data.responseText);
                    let attr = id.split("_");
                    $("#" + attr[0] + "_id"+ attr[1]).val(data.responseText);
                },
                404 : function(data){
                    errorMessage(data.responseText);
                },
                500 : function(){
                    errorMessage('系统错误!');
                }
            }
        });
    }

4 对应java controller

@Data
public class RdHomeVo {
    private String file;
    private String title;
}

@Data
public class RdHomeSystem {

    ......

    @Transient
    private List<RdHomeVo> rdHomeVo;
}

    @PostMapping(value = "/addSubmit")
    @ResponseBody
    public ModelMap addSubmit(RdHomeSystem rdHomeSystem) {
        ModelMap modelMap = new ModelMap();

        return modelMap;
    }

多级联动

<select onchange="selectChange(this,'')">
...
</select>

 

    function selectChange(obj, elementId) {
        $.ajax({
            url: "/admin/productCategory/child",
            type: "post",
            data: {"id": obj.value},
            datatype: "json",
            success: function (data) {
                let element = $("#" + elementId);
                element.empty();
                for (let i = 0; i < data.length; i++) {
                    element.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
                }
            }
        });
    }

 

全选或全不选

<td>
    <label>
        <input type="checkbox" th:value="${model?.id}" name="allCheck" onclick="selectAll(this.value)" />
    </label>
</td>

<td>
    <label>
        <input type="checkbox" th:value="${model?.id}" name="batchId"/>
    </label>
</td>

   
//全选或全不选
function selectAll(value){
    let flag = $("input[name='allCheck']").is(':checked');
    if(flag){
        $("input[name='batchId']").prop("checked","checked");
    }else{
        $("input[name='batchId']").removeProp("checked");
    }
}

 

JavaScript 存储对象（例：分页保存复选框选中）

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。