AceAdminUi框架的学习

国外货,最近公司为了统一后台页面选中此框架,,学习中,先来看看这款Ui的截图

登陆页面:

显示数据页面

添加数据页面

修改数据页面

接着是代码,

首先是登陆页面。。

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>


    
    
    登陆页面

    
    

    
    
    

    
    

    
    

    
    

    
    

    
    
    




接着是登陆页面的js

var scripts = [null, "../assets/js/date-time/bootstrap-datepicker.min.js", "../assets/js/jqGrid/jquery.jqGrid.min.js", "../assets/js/jqGrid/i18n/grid.locale-cn.js", null]
ace.load_ajax_scripts(scripts, function () {
    $('#login').click(function () {
        var name = $('#name').val();
        var password = $('#password').val();
        if (name == "admin" && password == "admin") {
            $('#loginForm').submit();
        } else {
            alert("用户名或密码错误");
            return false;
        }

    });
});

继续是首页也就是viewport

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%--<% String path = request.getContextPath();--%>
<%--String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>--%>
<%----%>


    
    
    云端K歌后台管理系统

    

    
    
    

    
    

    
    

    
    
    

    

    
    

    

    







<%----%>

数据展示页面(添加,修改,删除都在此页面中)

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
APP版本管理




<%--添加新版本弹出框--%>
<%--添加成功提示窗--%>
<%--修改APP版本弹出框--%>
<%--修改成功提示窗--%>
<%--删除背景图片--%>
<%--删除成功提示窗--%>


数据展示页面js(添加,修改,删除都在此js中)

 
  
var scripts = [null, "../assets/js/date-time/bootstrap-datepicker.min.js", "../assets/js/jqGrid/jquery.jqGrid.min.js", "../assets/js/jqGrid/i18n/grid.locale-cn.js", null]
ace.load_ajax_scripts(scripts, function () {
    //修改频道信息
    function modify(ids,names,languages,bgimgexts,bgimgwidths,bgimgheights,selectedimgexts,selectedimgwidths,selectedimgheights) {
        $('#ids').val(ids);
        $('#names').val(names);
        $('#languages').val(languages);
        $('#bgimgexts').val(bgimgexts);
        $('#bgimgwidths').val(bgimgwidths);
        $('#bgimgheights').val(bgimgheights);
        $('#selectedimgexts').val(selectedimgexts);
        $('#selectedimgwidths').val(selectedimgwidths);
        $('#selectedimgheights').val(selectedimgheights);



        $('#modifyBgImgModal').modal('show');
    }

    function del(name,del_id) {
        $('#delBgImgName').html(name);
        $('#del_id').val(del_id);
        $('#delBgImgModal').modal('show');
    }

    // 添加APP版本启用控制
    function Kind(the){
        var obj = the;
        var container=document.getElementById("bgimgwidth");
        var container1=document.getElementById("bgimgext");
        var container2=document.getElementById("bgimgheight");
        var a = document.getElementById("enablebgimg");

        if(a.checked){
            container.removeAttribute("disabled");
            container2.removeAttribute("disabled");
            container1.removeAttribute("disabled");
        }else{
            container2.setAttribute("disabled","disabled");
            container.setAttribute("disabled","disabled");
            container1.setAttribute("disabled","disabled");

        }
    }
    function Kinds(the){
        var obj = the;
        var container=document.getElementById("selectedimgwidth");
        var container1=document.getElementById("selectedimgext");
        var container2=document.getElementById("selectedimgheight");
        var a = document.getElementById("enableselectedimg");

        if(a.checked){
            container.removeAttribute("disabled");
            container2.removeAttribute("disabled");
            container1.removeAttribute("disabled");
        }else{
            container2.setAttribute("disabled","disabled");
            container.setAttribute("disabled","disabled");
            container1.setAttribute("disabled","disabled");

        }
    }
// 修改APP版本启用控制
    function upKind(the){
        var obj = the;
        var container=document.getElementById("bgimgwidths");
        var container1=document.getElementById("bgimgexts");
        var container2=document.getElementById("bgimgheights");
        var a = document.getElementById("enablebgimgs");

        if(a.checked){
            container.removeAttribute("disabled");
            container2.removeAttribute("disabled");
            container1.removeAttribute("disabled");
        }else{
            container2.setAttribute("disabled","disabled");
            container.setAttribute("disabled","disabled");
            container1.setAttribute("disabled","disabled");

        }
    }
    function upKinds(the){
        var obj = the;
        var container=document.getElementById("selectedimgwidths");
        var container1=document.getElementById("selectedimgexts");
        var container2=document.getElementById("selectedimgheights");
        var a = document.getElementById("enableselectedimgs");

        if(a.checked){
            container.removeAttribute("disabled");
            container2.removeAttribute("disabled");
            container1.removeAttribute("disabled");
        }else{
            container2.setAttribute("disabled","disabled");
            container.setAttribute("disabled","disabled");
            container1.setAttribute("disabled","disabled");

        }
    }
    jQuery(function ($) {
        var grid_selector = "#bgImgTable";
        var pager_selector = "#bgImgPager";
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })

        jQuery(grid_selector).jqGrid({
            url: '../ota/versionList',
            datatype: "json",
            height: 'auto',
            width: 'auto',
            colNames: ['编号', 'APP版本', '语言类别', '背景图片规格','选中图片规格','时间','操作'],
            colModel: [
                {name: 'id', index: 'id'},
                {name: 'name', index: 'name'},
                {name: 'language', index: 'language',formatter: function (cellvalue, options, rowObject) {
                    if(cellvalue==0){
                        return "简体中文";
                    }
                    if(cellvalue==1){
                        return "繁体中文";
                    }
                }
                },
                {name: 'bei', index: 'bei'},
                {name: 'xuan', index: 'xuan'},

                {name: 'modifytime', index: 'modifytime', formatter: function (cellvalue, options, rowObject) {
                    var date = new Date(cellvalue);
                    return date.Format('yyyy-MM-dd hh:mm:ss');
                }},
                {name: 'myac', index: '', fixed: true, sortable: false, resize: false, formatter: function (cellvalue, options, rowObject) {
                    var htmlStr =
                        "";
                    return htmlStr;
                }}
            ],
            loadError: function (xhr, status, error) {
                alert("获取APP管理列表失败,请重新刷新");
            },
            viewrecords: true,
            rowNum: 5,
            rowList: [5, 10, 15],
            pager: pager_selector,
            altRows: true,
            multiboxonly: true,
            loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            }
        });
        $(window).triggerHandler('resize.jqGrid');

        function updatePagerIcons(table) {
            var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({container: 'body'});
            $(table).find('.ui-pg-div').tooltip({container: 'body'});
        }


        $(document).on('ajaxloadstart', function (e) {
            $(grid_selector).jqGrid('GridUnload');
            $('.ui-jqdialog').remove();
        });
        //隐藏水平滚动条
        $(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-x': 'hidden' });
    });


    //添加版本
    $(document).ready(function () {
        $("#addBgImgBtn").click(function () {

            $('#addBgImgForm').ajaxSubmit({
                type: 'post',
                url: '../ota/insert',
                success: function () {
                    var grid_selector = "#bgImgTable";
                    jQuery(grid_selector).jqGrid('setGridParam', {url: "../ota/versionList", page: 1}).trigger('reloadGrid');
                    $('#addSuccessModal').modal('show');
                },
                error: function () {
                    alert('添加频道失败,请重试');
                }
            })
        });
    });

    //提交修改
    $('#modifyBgImgBtn').click(function () {
        $('#modifyBgImgForm').ajaxSubmit({
            type: 'post',
            url: '../ota/update',
            success: function () {
                var grid_selector = "#bgImgTable";
                jQuery(grid_selector).jqGrid('setGridParam', {url: "../ota/versionList", page: 1}).trigger('reloadGrid');
                $('#modifySuccessModal').modal('show');
            },
            error: function () {
                alert('修改APP版本失败,请重试');
            }
        })
    });
    //确认删除
    $('#delBgImgBtn').click(function () {
        var id = $('#del_id').val();

        $.ajax({
            url: '../ota/delete?id=' + id,
            success: function () {
                var grid_selector = "#bgImgTable";
                jQuery(grid_selector).jqGrid('setGridParam', {url: "../ota/versionList", page: 1}).trigger('reloadGrid');
                $('#delSuccessModal').modal('show');
            },
            error: function () {
                alert('删除失败,请重试');
            }
        });
    });
});
function modify(ids,names,languages,bgimgexts,bgimgwidths,bgimgheights,selectedimgexts,selectedimgwidths,selectedimgheights) {
    $('#ids').val(ids);
    $('#names').val(names);
    $('#languages').val(languages);
    $('#bgimgexts').val(bgimgexts);
    $('#bgimgwidths').val(bgimgwidths);
    $('#bgimgheights').val(bgimgheights);
    $('#selectedimgexts').val(selectedimgexts);
    $('#selectedimgwidths').val(selectedimgwidths);
    $('#selectedimgheights').val(selectedimgheights);



    $('#modifyBgImgModal').modal('show');
}

下载地址:http://download.csdn.net/detail/wang623145708/8200761
张北论坛www.zhangbeibbs.com
邢台论坛www.hbxtbbs.com

你可能感兴趣的:(AceAdminUi框架的学习)