fourcal/src/main/resources/templates/admin/role_list.ftl

<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="${base}/assets/css/amazeui.switch.css"/>
    <div class="admin-content">
        <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;">
            <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统管理</strong> /
                <small>后端角色管理</small>
            </div>
        </div>
        <form class="am-form" id="list-form" action="${base}/role/list" method="post">
            <input type="hidden" id="keywords" name="keywords" value='${keywords!""}'/>
            <div class="am-g">
                <div class="am-u-sm-12 am-u-md-6" style="padding:0px 1.6rem 1.6rem 1rem;margin:0px;">
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <@shiro.hasPermission name="ROLE_ADD">
                                <button type="button" class="am-btn am-btn-default"
                                        onclick="location.href='${base}/role/add'">
                                    <span class="am-icon-plus"></span>
                                    新增
                                </button>
                            </@shiro.hasPermission>
                            <#--<@shiro.hasPermission name="ROLE_DELRTE">
                                <button type="button" id="deleteButton" disabled="disabled"
                                        class="am-btn am-btn-default"
                                        onclick="deleteAll('${base}/role/delete')"><span
                                            class="am-icon-trash-o"></span> 删除
                                </button>
                            </@shiro.hasPermission>-->
                        </div>
                    </div>
                </div>
                <div class="am-u-sm-12 am-u-md-3">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" id="name" value="${name!}" placeholder="按角色名称搜索"/>
                        <span class="am-input-group-btn">
                            <button id="searchButton" class="am-btn am-btn-default" type="button">搜索</button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
        <div class="am-g">
            <div class="am-u-sm-12 am-scrollable-horizontal">
                <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr class="am-text-nowrap">
                        <th class="table-check">
                            <input type="checkbox" id="allCheck"></th>
                        <th class="table-title">角色名称</th>
                        <th class="table-title">角色等级</th>
                        <th class="table-title">是否启用</th>
                        <th class="table-date">创建日期</th>
                        <th class="table-date">最后更新日期</th>
                        <th class="table-set am-text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#if (pager.list)?exists>
                        <#list  pager.list as list>
                            <tr>
                                <td>
                                    <input type="checkbox" name="ids" value="${list.id}"/>
                                </td>
                                <td>${list.name!}</td>
                                <td>
                                    <#if list.level ==1 >
                                        一级
                                    <#elseif list.level ==2>
                                        二级
                                    <#elseif list.level ==3>
                                        三级
                                    <#elseif list.level ==4>
                                        四级
                                    <#elseif list.level ==5>
                                        五级
                                    </#if>
                                </td>
                                <td>
                                    <#if list.isEnable ==1 >
                                        是
                                    <#elseif list.isEnable ==0>
                                        否
                                    </#if>
                                <td><#if list.createdTime??>${list.createdTime?datetime}</#if></td>
                                <td><#if list.lastUpdatedTime??>${list.lastUpdatedTime?datetime}</#if></td>
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <@shiro.hasPermission name="ROLE_EDIT">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                        onclick="location.href='${base}/role/edit?id=${list.id?c}'">
                                                    <span class="am-icon-pencil-square-o"></span>
                                                    编辑
                                                </button>
                                            </@shiro.hasPermission>
                                            <#if list.id != 1>
                                                <div class="am-btn-group am-btn-group-xs">
                                                <div class="switch-button">
                                                    <#--是否启用：0禁用，1启用-->
                                                    <input id="${list.id}" type="checkbox" data-size='xs'
                                                           data-am-switch data-off-text="已禁用" data-on-text="已启用"
                                                           <#if list.isEnable==1 >checked</#if>/>
                                                </div>
                                            </div>
                                            </#if>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </#list>
                    </#if>
                    </tbody>
                </table>

                <div class="am-cf">
                    <!-- 分页 -->
                    <#if (pager.list)?exists  && (pager.list?size>0) >
                        <div class="am-fr">
                            <#include "../common/common_pager.ftl">
                        </div>
                    <#else>
                        <div class="am-kai" align="center">
                            <h3>没有找到任何记录!</h3>
                        </div>
                    </#if>
                </div>
            </div>
        </div>
    </div>
</@defaultLayout.layout>

<script src="${base}/assets/js/amazeui.switch.js"></script>
<script type="text/javascript">
    var urlBase = "${base}";
    var url;

    $(function () {
        /*表单提交 start*/
        var keywordsObj = {};
        $("#searchButton").on("click", function () {
            if ($("#name").val()) {
                keywordsObj.name = $("#name").val();
            }
            var keywords = "";
            if (!$.isEmptyObject(keywordsObj)) {
                keywords = JSON.stringify(keywordsObj);
            }
            console.log("keywords = " + keywords);
            $("#keywords").val(keywords);
            $("#list-form").submit();
        });
        /*表单提交 end*/

        /*复选框全选效果 start*/
        $("body").on('click', '.list-item', function () {
            $(".list-item").removeClass("tr-selected");
            $(this).addClass('tr-selected');
        });
        $("#allCheck").click(function () {
            $('input[name="ids"]').prop("checked", this.checked);
            $("#deleteButton").prop("disabled", $("input[name='ids']:checked").length == 0 ? true : false);
        });
        var $citySubBox = $("input[name='ids']");
        $citySubBox.click(function () {
            $("#allCheckCity").prop("checked", $citySubBox.length == $("input[name='ids']:checked").length ? true : false);
            $("#deleteButton").prop("disabled", $("input[name='ids']:checked").length == 0 ? true : false);
        });
        /*复选框全选效果 end*/

    });

    /*批量删除角色 start*/
    var deleteAll = function (url) {
        var $deleteButton = $("#deleteButton");// 删除按钮
        var ids = "";
        $("input[name='ids']:checked").each(function () {
            ids += $(this).val() + "#%#";
        });
        var params = {ids: ids};
        if (window.confirm('确定要删除吗？')) {
            $.ajax({
                url: url,
                data: params,
                dataType: "json",
                async: false,
                beforeSend: function (data) {
                    $deleteButton.prop("disabled", true)
                },
                success: function (data) {
                    $deleteButton.prop("disabled", false)
                    if (data.status == 0) {
                        alert(data.msg);
                        window.location.href = window.location.href;
                    } else if (data.status == 1) {
                        alert(data.msg);
                    }
                }
            });
        }
    }
    /*批量删除角色 end*/

    /**
     * 为每个启用或禁用按钮增加事件
     */
    $(function () {
        var $mycheckbox = $('.switch-button').find("input[type='checkbox']");
        $mycheckbox.each(function () {
            var myid = $(this).attr("id");
            var prop = $(this).attr("prop");

            $(this).on({
                'switchChange.bootstrapSwitch': function (event, state) {
                    console.info("state===="+state)
                    toggle(myid, state ? 1 : 0);
                }
            });

        });

    });

    //启用或者禁用
    var toggle = function (id, status) {
        $.ajax({
            url: "${base}/role/enableOrDisable",
            data: {id: id, enabled: status},
            type: "post",
            dataType: "json",
            async: false,
            success: function (data) {
                parent.layer.msg(data.msg);
            }
        });
    };
</script>