Skip to content

胡敏 / demo1

转到一个项目

审计记录

src/main/resources/my/index.html 5.3 KB
原文件普通视图历史永久链接
aaa
bed82f46
 
胡敏 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
    <div class="page-header">
        <div class="row">
            <div class="col-md-12">
                <h1>Users List</h1>
                <button class="pull-right btn btn-primary product-add" data-action="add" data-toggle="modal"
                        data-target="#productModal">
                    <span class="glyphicon glyphicon-plus"></span> Add
                </button>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>Name</th>                     
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    <!-- filled using Ajax -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        load();
        initModal();
    });
    function create(name) {
        $.post("/api/user", JSON.stringify({name: name}), function () {
            load();
        }, "json");
    }
    function remove(id) {
        $.ajax({
            method: "DELETE",
            url: "/api/user/" + id
        }).done(function () {
            load();
        });
    }
    function update(id, name, origin) {
        $.ajax({
            method: "PUT",
            url: "/api/user",
            data: JSON.stringify({id:id,name: name})
        }).done(function () {
            load();
        });
    }
    function load() {
        $("#content").children().remove();
        $.getJSON("/api/user/list", function (data) {
            $.each(data, function (key, val) {
                $("<tr><td>" + val.id + "</td><td>" + val.name + "</td>" +
                        "<td>" +
                        "<button data-action='edit' class='btn btn-primary btn-sm product-edit' " +
                        "data-toggle='modal' " +
                        "data-target='#productModal' " +
                        "data-name='" + val.name + "' " +
                        "data-id='" + val.id + "'>" +
                        "<span class='glyphicon glyphicon-pencil'></span>" +
                        "</button>" +
                        "&nbsp;" +
                        "<button class='btn btn-danger btn-sm product-delete' data-id='" + val.id + "'>" +
                        "   <span class='glyphicon glyphicon-minus'></span>" +
                        "</button>" +
                        "</td>" +
                        "</tr>").appendTo("#content");
            });
            initCallbacks();
        });
    }
    function initCallbacks() {
        $(".product-delete").unbind().click(function() {
           var id = $(this).data("id");
           remove(id);
        });
    }
    function initModal() {
        $("#productModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var productAction = $("#productAction");
            productAction.unbind();
            var modal = $(this);
            if (action === "add") {
                modal.find('.modal-title').text("Add a bottle");
                modal.find('#product-name').val("");
                modal.find('#product-origin').val("");
                productAction.click(function () {
                    create($("#product-name").val());
                    $('#productModal').modal('toggle');
                });
            } else {
                modal.find('.modal-title').text("Edit a bottle");
                modal.find('#product-name').val(button.data("name"));
                modal.find('#product-origin').val(button.data("origin"));
                productAction.click(function () {
                    update(id, $("#product-name").val());
                    $('#productModal').modal('toggle');
                });
            }
        })
    }
</script>
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="productModalTitle">Add</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="product-name" class="control-label">Name:</label>
                        <input type="text" class="form-control" id="product-name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="productAction" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>