Spring Boot+MiniUI CRUD操作

柯發表於2020-11-19
Spring BootUI

後臺及資料庫請看另一篇文章https://blog.csdn.net/Tom_kobe/article/details/109741374
專案結構
在這裡插入圖片描述

1.建立index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--jQuery js-->
    <script src="../static/jquery.min.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="../static/demo.css" rel="stylesheet" type="text/css" />
    <link href="../static/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <script src="../static/miniui/miniui.js" type="text/javascript"></script>
    <script src="../static/boot.js" type="text/javascript"></script>
    <script src="../static/ColumnsMenu.js" type="text/javascript"></script>
</head>
<body>
<div class="mini-toolbar">
    <a class="mini-button" iconCls="icon-add" onclick="addRow()">增加</a>
    <a class="mini-button" iconCls="icon-edit" onclick="editRow()">修改</a>
    <a class="mini-button" iconCls="icon-remove" onclick="removeRow()">刪除</a>
    <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">儲存</a>
    <span class="separator"></span>
    <input id="idFilter" property="filter" class="mini-textbox" style="width: 150px;;"
           onvaluechanged="onFilterChanged" emptyText="過濾名字關鍵字" />
</div>
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
     url="http://localhost:8080/springboot/student/list"
     allowResize="true" pageSize="20"
     allowCellEdit="true" allowCellSelect="true" multiSelect="true"
     editNextOnEnterKey="true"  editNextRowCell="true">
    <div property="columns">
        <div field="id" width="120" headerAlign="center" allowSort="true">id</div>

        <div field="name" width="120" headerAlign="center" allowSort="true">學生姓名
            <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
        </div>
        <div field="address" width="120" headerAlign="center" allowSort="true">地址
            <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
        </div>
        <div field="age" width="100" allowSort="true" >年齡</div>
        <div field="birthday" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">建立日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.load();
    //刪除選中行
    function removeRow(){
        var rows=grid.getSelecteds();

        if(rows.length>0){
            mini.confirm("確定刪除記錄？","警告",function(action){//confirm返回Boolean,mini.confirm()返回警告框，必須加回撥函式
                if(action=="ok"){
                    romve(rows);
                }
            })
        }else{
            mini.alert("請選中一條記錄");
        }
    };

    function romve(rows){
        var id = rows[0].id;
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/springboot/student/del?id="+id,
            dataType: "json",
            success: function(data){
                if (data.code == 200){
                    grid.removeRows(rows);
                } else{
                    mini.alert("刪除失敗");
                }
            }
        });
    }

    //彈出子頁面新增一條資料
    function addRow(){
        mini.open({
            targetWindow: window,url:"http://localhost:8080/springboot/index/edit",title:"新增記錄",width:600,height:200,showMaxButton: true,
            onload: function () {
                var iframe = this.getIFrameEl();
            },
            ondestroy: function (action) {
                if(action=="ok"){
                    var iframe = this.getIFrameEl();
                    var data = iframe.contentWindow.GetData();
                    var stu = {"name":data.name,
                                "address":data.address,
                                "age":data.age,
                                "birthday":mini.formatDate(data.birthday, "yyyy-MM-dd")};
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/springboot/student/insert",
                        data: stu,
                        dataType: "json",
                        success: function(data){
                            if (data.code == 200){
                                grid.load();
                            } else{
                                mini.alert("新增失敗");
                            }
                        }
                    });
                }
            }
        })
    };

    //編輯選中行，id不能修改
    function editRow(){
        var row=grid.getSelected();
        if(row){
            mini.open({
                targetWindow:window,url:"http://localhost:8080/springboot/index/edit",title:"修改資訊",width:600,height:200,showMaxButton:true,
                onload:function(){
                    var iframe = this.getIFrameEl();
                    var data = {action: "edit",edit_item:row};
                    console.log(data);
                    iframe.contentWindow.SetData(data);
                },
                ondestroy:function(action){
                    if(action=="ok"){
                        var iframe=this.getIFrameEl();
                        var data=iframe.contentWindow.GetData();
                        console.log(data);
                        var stu = {"id":data.id,
                            "name":data.name,
                            "address":data.address,
                            "age":data.age,
                            "birthday":mini.formatDate(data.birthday, "yyyy-MM-dd")};
                        console.log(stu);
                        $.ajax({
                            type: "POST",
                            url: "http://localhost:8080/springboot/student/update",
                            data: stu,
                            dataType: "json",
                            success: function(data){
                                if (data.code == 200){
                                    grid.load();
                                } else{
                                    mini.alert("修改失敗");
                                }
                            }
                        });
                    }
                }
            })
        }else{
            mini.alert("請選中一條記錄");
        }
    };

    //模糊查詢輸入框裡的記錄
    function onFilterChanged(e) {
        var idbox = mini.get("idFilter");

        var id = idbox.getValue().toLowerCase();


        grid.filter(function (row) {
            var r1 = true;
            if (id) {
                //有關鍵字即可查詢，精準查詢為String(row.name).toLowerCase().indexOf(name) != -1
                r1 = String(row.id).toLowerCase().indexOf(id) != -1;

                return r1;
            }
            return r1;
        });
    }

</script>

2.建立edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jQuery js-->
    <script src="../static/jquery.min.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="../static/demo.css" rel="stylesheet" type="text/css" />
    <link href="../static/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <script src="../static/miniui/miniui.js" type="text/javascript"></script>
    <script src="../static/boot.js" type="text/javascript"></script>
    <script src="../static/ColumnsMenu.js" type="text/javascript"></script>
</head>
<body>
<form id="form1">
    <fieldset style="border:solid 1px #aaa;padding:3px;">
        <legend >基本資訊</legend>
        <div style="padding:5px;">
            <table>
                <tr>
                    <input class="mini-hidden" name="id" visible="false" />
                    <td style="width:80px;">姓名:</td>
                    <td style="width:150px;">
                        <input  name="name" class="mini-textbox" required="true"/>
                    </td>
                    <td style="width:80px;">年齡:</td>
                    <td style="width:150px;">
                        <input  name="age" class="mini-textbox" required="true"/>
                    </td>
                </tr>
                <tr>
                    <td style="width:80px;">地址:</td>
                    <td style="width:150px;">
                        <input  name="address" class="mini-textbox" required="true"/>
                    </td>
                    <td style="width:80px;">生日:</td>
                    <td style="width:150px;">
                        <input  name="birthday" class="mini-datepicker" required="true"/>
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>
    <div style="text-align:center;padding:10px;">
        <a class="mini-button" onclick="onOk" style="width:60px;margin-right:20px;">確定</a>
        <a class="mini-button" onclick="onCancel" style="width:60px;">取消</a>
    </div>
</form>


</body>
</html>
<script type="text/javascript">
    mini.parse();
    var form = new mini.Form("form1");

    function GetData() {
        var o = form.getData();
        return o;
    }

    function SetData(data){
        var fields = form.getFields();
        var c=fields[0];
        if(data.action="edit"){
            data=$.extend(true,data,data);
            if(c.setReadOnly){   //設定控制元件只讀
                c.setReadOnly(true);
            }
            form.setData(data.edit_item);
        }
    }

    //關閉子頁面
    function closeWindow(action) {
        if (window.CloseOwnerWindow){

            return window.CloseOwnerWindow(action,GetData);
        }else{
            window.close();
        }
    }

    function onOk() {
        closeWindow("ok");
    }

    function onCancel() {
        closeWindow("cancel");
    }
</script>

這個crud純屬練習miniUI的基本操作，如有什麼疑問可以在評論區討論

相關文章