Spring Boot+MiniUI CRUD操作

最新推荐文章于 2023-05-28 21:02:43 发布

柯

最新推荐文章于 2023-05-28 21:02:43 发布

阅读量1k

点赞数 2

分类专栏： Spring Boot 文章标签： jquery js

本文链接：https://blog.youkuaiyun.com/Tom_kobe/article/details/109816378

版权

Spring Boot 专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了一个基于miniUI基本操作的CRUD项目结构，包含创建index.html和edit.html。还提及后台及数据库内容可查看另一篇文章，鼓励有疑问在评论区讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台及数据库请看另一篇文章https://blog.youkuaiyun.com/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>