artDialog模态框底部css样式以及js表单校验_art.dialog.open style样式自定义-CSDN博客

开发环境：springboot+thymeleaf

在js中用模态框弹出编辑页面

<a href="javascript:void(0);" id="create" class="create ddBtn btnWhite"><i class="fa fa-plus"></i>新增</a>
<a href="javascript:void(0)" class="fontBlue" onclick="edit(this)">编辑</a>

$(function () {
    $("#create").click(function () {
        art.dialog.open("/activiti/listener/go-to-edit" ,{
            title: "新增",
            lock: true
        });
    });
});


function edit(obj){
    var id = $(obj).parent().parent().children().eq(0).text();
    art.dialog.open("/activiti/listener/go-to-edit?id=" +id ,{
        title: "编辑",
        lock: true
    });
}

页面html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      style="overflow-x:auto;overflow-y:auto;">
<head>
    <meta charset="UTF-8">
    <title>监听编辑</title>
    <div th:replace="~{commons/head::common-header}"></div>
    <div th:replace="~{commons/head::common-js}"></div>
    <style>
        .modelBottom {
            background-color: #F6F6F6;
            border-top: solid 1px #DADEE5;
            padding: 8px;
            width: 100%;
            text-align:right;
        }
    </style>
    <script th:src="@{/project/js/activiti/listener/listener_edit.js}"></script>
</head>
<body>
<div style="position: absolute;padding-bottom: 50px">
    <div style="padding: 30px; margin-left: 20px;"  id="listener_form_div">
        <form id="listener_form" th:action="@{'/activiti/listener/save-or-update-listener'}" method="post">
            <input class="hidden" th:value="${listenerVO.id}" name="id"/>
            <div class="formGroup">
                <div class="formLine">
                    <label for="categoryInput" >
                        <span class="fontRed">*</span>业务类别
                    </label>

                    <select id="categoryInput" name="category" class="commonInput w260">
                        <option value="">---请选择---</option>
                        <option th:each="dictCode : ${categoryCodeList}"
                                th:selected="${dictCode.code eq listenerVO.category}"
                                th:value="${dictCode.code}"
                                th:text="${dictCode.name}">
                        </option>
                    </select>
                    <!--<input id="categoryInput" th:value="${listenerVO?.category}" name="category" class="commonInput w260"/>-->
                </div>

                <div class="formLine"style="padding-top: 21px">
                    <label for="processInput" >
                        <span class="fontRed">*</span>流程
                    </label>
                    <select id="processInput" name="process" class="commonInput w260">
                        <option value="">---请选择---</option>
                        <option th:each="dictCode : ${processCodeList}"
                                th:selected="${dictCode.code eq listenerVO.process}"
                                th:value="${dictCode.code}"
                                th:text="${dictCode.name}">
                        </option>
                    </select>
                    <!--<input id="processInput" th:value="${listenerVO?.process}" name="process" class="commonInput w260"/>-->
                </div>

                <div class="formLine" style="padding-top: 21px">
                    <label for="eventInput" >
                        <span class="fontRed">*</span>事件
                    </label>

                    <input id="eventInput" th:value="${listenerVO?.event}" name="event" class="commonInput w260"/>
                </div>

                <div class="formLine" style="padding-top: 21px">
                    <label for="beanTypeSelect" >
                        <span class="fontRed">*</span>类获取方式
                    </label>

                    <select id="beanTypeSelect" name="beanType"
                            class=" commonInput w260">
                        <option value="">---请选择---</option>
                        <option th:value="CLASS" th:selected="${listenerVO?.beanType == 'CLASS'}">ClASS</option>
                        <option th:value="NAME" th:selected="${listenerVO?.beanType == 'NAME'}">NAME</option>
                    </select>
                </div>

                <div th:if="${listenerVO.beanType == 'CLASS' or listenerVO.id == null}" id="classDiv" >
                    <div class="formLine" style="padding-top: 21px">
                        <label for="listenerClassInput" >
                            监听类
                        </label>

                        <input id="listenerClassInput" th:value="${listenerVO?.listenerClass}" name="listenerClass" class="commonInput w260"/>
                    </div>
                </div>

                <div th:if="${listenerVO.beanType == 'NAME' or listenerVO.id == null}" id="nameDiv" >
                    <div class="formLine" style="padding-top: 21px">
                        <label for="listenerNameInput" >
                            Bean名称
                        </label>

                        <input id="listenerNameInput" th:value="${listenerVO?.listenerName}" name="listenerName" class="commonInput w260"/>
                    </div>
                </div>

                <div class="formLine" style="padding-top: 21px">
                    <label for="describeInput" >
                        描述
                    </label>

                    <input id="describeInput" th:value="${listenerVO?.describe}" name="describe" class="commonInput w260"/>
                </div>
            </div>
        </form>
    </div>
    <!--模态框底部-->
    <div class="modelBottom" style="position: absolute; right:0px; bottom: -21px;">
        <button id="cancel" class="ddBtn btnWhite" onclick="cancel()" >取消</button>
        <button id="save" class="ddBtn btnBlue" onclick="save()">保存</button>
    </div>
</div>
</body>
</html>

保存时的必要的表单校验js，js

function save() {
    //校验必填字段
    $("#listener_form").validate({
        rules:{
            category : "required",
            process : "required",
            event : "required",
            beanType : "required"
        },
        messages:{
            category : "<p style= 'position: absolute; top: 90px' ><span class='fa fa-warning' style='color: red;margin-left: 5px'></span><font color='#ff0000'>请输入业务类别</font></p>",
            process : "<p style= 'position: absolute; top: 165px'><span class='fa fa-warning' style='color: red;margin-left: 5px'></span><font color='#ff0000'>请输入流程</font></p>",
            event : "<p style= 'position: absolute; top: 240px'><span class='fa fa-warning' style='color: red;margin-left: 5px'></span><font color='#ff0000'>请输入事件</font></p>",
            beanType : "<p style= 'position: absolute; top: 315px'><span class='fa fa-warning' style='color: red;margin-left: 5px'></span><font color='#ff0000'>请选其中获取方式</font></p>"
        }
    })
    if(!$("#listener_form").valid()){ return ;} //表单校验

    $.pikaQajax({
        url:"/activiti/listener/save-or-update-listener",
        data:$("#listener_form").serialize(),
        type:"post",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        // contentType:"application/json",
        dataType:"json",
        success:function (data) {
            if (data.status === 200) {
                showMsg(data.msg);
            }else {
                showMsg("保存失败！" + data.msg);
            }
        },
        error:function (data) {
            showMsg("保存异常！" + data.msg)
        }
    })
}

function cancel() {
    art.dialog.close();
}

function showMsg(msg) {
    art.dialog({
        title: '提示',
        content: msg,
        lock: true,
        ok: function () {
            var win = art.dialog.open.origin;
            win.location.reload();
        },
        close: function () {
        }
    });
}

体会：

1.因为在使用弹出框的时候，虽然自带了确定的按钮，但是直接使用的话，编辑功能和新增功能在获得表单的序列化值时，是无法获取到值的，因为获得弹出框的方法是放在列表页面上，要保存数据的按钮在另外的页面，当要保存数据时，获取不到数据，此时后端返回的是新视图。

2.弹框的按钮利用绝对定位absolute 确定位置。

3.弹框不设置高度和宽度，可以让内容自动填充内容框，自动扩长。如果不想有滚动条，可以提高父页面的高度，就不会出现滚动条了。

参考：