</pre>国外货，最近公司为了统一后台页面选中此框架，，学习中，先来看看这款Ui的截图<p></p><p>登陆页面：</p><p><img src="https://img-blog.csdn.net/20141126154748242?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzYyMzE0NTcwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>显示数据页面</p><p><img src="https://img-blog.csdn.net/20141126154803343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzYyMzE0NTcwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>添加数据页面</p><p><img src="https://img-blog.csdn.net/20141126154801658?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzYyMzE0NTcwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>修改数据页面</p><p><img src="https://img-blog.csdn.net/20141126154736078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZzYyMzE0NTcwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>接着是代码，</p><p>首先是登陆页面。。</p><p></p><pre code_snippet_id="533630" snippet_file_name="blog_20141126_2_5440814" name="code" class="html"><%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<html lang="cn">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<title>登陆页面</title>
<meta name="description" content="User login page"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../assets/css/font-awesome.min.css"/>
<!-- text fonts -->
<link rel="stylesheet" href="../assets/css/ace-fonts.css"/>
<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.min.css"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.min.css"/>
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-ie.min.css"/>
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace.onpage-help.css"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="../assets/js/ace-extra.min.js"></script>
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="login-layout blur-login">
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
<h1>
<%--<i class="ace-icon fa fa-leaf green"></i>--%>
<%--<span class="red">Ace</span>--%>
<%--<span class="white" id="id-text2">Application</span>--%>
</h1>
<%--<h4 class="blue" id="id-company-text">© Company Name</h4>--%>
</div>
<div class="space-6"></div>
<div class="position-relative" style="margin-top: 150px;">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header blue lighter bigger">
<i class="ace-icon fa fa-coffee green"></i>
</h4>
<div class="space-6"></div>
<form action="../login" method="post" id="loginForm">
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input id="name" type="text" class="form-control"
placeholder="用户名"/>
<i class="ace-icon fa fa-user"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input id="password" type="password" class="form-control"
placeholder="密码"/>
<i class="ace-icon fa fa-lock"></i>
</span>
</label>
<div class="space"></div>
<div class="clearfix">
<label class="inline">
<select id="language" name="language" class="form-control" id="type" name="type">
<option value="0">中文（简体）</option>
<option value="1">中文（繁体）</option>
</select>
</label>
<button id="login" type="button" class="width-35 pull-right btn btn-sm btn-primary">
<i class="ace-icon fa fa-key"></i>
<span class="bigger-110">登陆</span>
</button>
</div>
<div class="space-4"></div>
</fieldset>
</form>
</div>
<!-- /.widget-main -->
<div class="toolbar clearfix">
<div>
<a href="#" data-target="" class="forgot-password-link">
<i class="ace-icon fa fa-arrow-left"></i>
忘记密码
</a>
</div>
<div>
<a href="#" data-target="" class="user-signup-link">
注册
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /.widget-body -->
</div>
<!-- /.login-box -->
<div id="forgot-box" class="forgot-box widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header red lighter bigger">
<i class="ace-icon fa fa-key"></i>
Retrieve Password
</h4>
<div class="space-6"></div>
<p>
Enter your email and to receive instructions
</p>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="email" class="form-control"
placeholder="Email"/>
<i class="ace-icon fa fa-envelope"></i>
</span>
</label>
<div class="clearfix">
<button type="button" class="width-35 pull-right btn btn-sm btn-danger">
<i class="ace-icon fa fa-lightbulb-o"></i>
<span class="bigger-110">Send Me!</span>
</button>
</div>
</fieldset>
</form>
</div>
<!-- /.widget-main -->
<div class="toolbar center">
<a href="#" data-target="#login-box" class="back-to-login-link">
Back to login
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</div>
</div>
<!-- /.widget-body -->
</div>
<!-- /.forgot-box -->
<div id="signup-box" class="signup-box widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header green lighter bigger">
<i class="ace-icon fa fa-users blue"></i>
New User Registration
</h4>
<div class="space-6"></div>
<p> Enter your details to begin: </p>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="email" class="form-control"
placeholder="Email"/>
<i class="ace-icon fa fa-envelope"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control"
placeholder="Username"/>
<i class="ace-icon fa fa-user"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" class="form-control"
placeholder="Password"/>
<i class="ace-icon fa fa-lock"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" class="form-control"
placeholder="Repeat password"/>
<i class="ace-icon fa fa-retweet"></i>
</span>
</label>
<label class="block">
<input type="checkbox" class="ace"/>
<span class="lbl">
I accept the
<a href="#">User Agreement</a>
</span>
</label>
<div class="space-24"></div>
<div class="clearfix">
<button type="reset" class="width-30 pull-left btn btn-sm">
<i class="ace-icon fa fa-refresh"></i>
<span class="bigger-110">Reset</span>
</button>
<button type="button" class="width-65 pull-right btn btn-sm btn-success">
<span class="bigger-110">Register</span>
<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<div class="toolbar center">
<a href="#" data-target="#login-box" class="back-to-login-link">
<i class="ace-icon fa fa-arrow-left"></i>
Back to login
</a>
</div>
</div>
<!-- /.widget-body -->
</div>
<!-- /.signup-box -->
</div>
<!-- /.position-relative -->
<div class="navbar-fixed-top align-right">
<br/>
<a id="btn-login-blur" href="#">Blur</a>
<span class="blue">/</span>
<a id="btn-login-dark" href="#">Dark</a>
<span class="blue">/</span>
<a id="btn-login-light" href="#">Light</a>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.main-content -->
</div>
<!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="../assets/js/ace-extra.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<!-- ace scripts -->
<script src="../assets/js/ace-elements.min.js"></script>
<script src="../assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function ($) {
$(document).on('click', '.toolbar a[data-target]', function (e) {
e.preventDefault();
var target = $(this).data('target');
$('.widget-box.visible').removeClass('visible');//hide others
$(target).addClass('visible');//show target
});
});
//you don't need this, just used for changing background
jQuery(function ($) {
$('#btn-login-light').on('click', function (e) {
$('body').attr('class', 'login-layout light-login');
$('#id-text2').attr('class', 'grey');
$('#id-company-text').attr('class', 'blue');
e.preventDefault();
});
$('#btn-login-dark').on('click', function (e) {
$('body').attr('class', 'login-layout');
$('#id-text2').attr('class', 'white');
$('#id-company-text').attr('class', 'blue');
e.preventDefault();
});
$('#btn-login-blur').on('click', function (e) {
$('body').attr('class', 'login-layout blur-login');
$('#id-text2').attr('class', 'white');
$('#id-company-text').attr('class', 'light-blue');
e.preventDefault();
});
});
</script>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
接着是登陆页面的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 + "/"; %>--%>
<%--<base href="<%=basePath%>">--%>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<title>云端K歌后台管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../assets/css/font-awesome.min.css"/>
<!-- text fonts -->
<link rel="stylesheet" href="../assets/css/ace-fonts.css"/>
<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.min.css" id="main-ace-style"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.min.css"/>
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace-skins.min.css"/>
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-ie.min.css"/>
<![endif]-->
<!-- ace settings handler -->
<script src="../assets/js/ace-extra.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="no-skin">
<!-- #section:basics/navbar.layout -->
<div id="navbar" class="navbar navbar-default">
<script type="text/javascript">
try {
ace.settings.check('navbar', 'fixed')
} catch (e) {
}
</script>
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<select id="language" name="language" class="form-control" style="">
<option value="0">中文（简体）</option>
<option value="1">中文（繁体）</option>
</select>
</div>
</div>
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
<script type="text/javascript">
try {
ace.settings.check('main-container', 'fixed')
} catch (e) {
}
</script>
<!-- #section:basics/sidebar -->
<div id="sidebar" class="sidebar responsive">
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'fixed')
} catch (e) {
}
</script>
<%--<div class="sidebar-shortcuts" id="sidebar-shortcuts">--%>
<%--<h4>爱唱久久</h4>--%>
<%--</div><!-- /.sidebar-shortcuts -->--%>
<ul class="nav nav-list">
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon glyphicon glyphicon-headphones"></i>
<span class="menu-text">随意听</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a data-url="page/channel" href="index.jsp#page/channel">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 频道管理 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 歌曲管理 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a data-url="page/song" href="index.jsp#page/song">
<%--<i class="menu-icon fa fa-caret-right"></i>--%>
频道歌曲
</a>
<b class="arrow"></b>
</li>
<li class="">
<a data-url="page/song_backup" href="index.jsp#page/song_backup">
<%--<i class="menu-icon fa fa-caret-right"></i>--%>
频道歌曲备份
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a data-url="page/bg_img" href="index.jsp#page/bg_img">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 背景图片 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a data-url="page/instrument" href="index.jsp#page/instrument">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 乐器管理 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a data-url="page/scene" href="index.jsp#page/scene">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 场景管理 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 用户收藏 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a data-url="page/like" href="index.jsp#page/like">
<%--<i class="menu-icon fa fa-caret-right"></i>--%>
我喜欢的
</a>
<b class="arrow"></b>
</li>
<li class="">
<a data-url="page/hate" href="index.jsp#page/hate">
<%--<i class="menu-icon fa fa-caret-right"></i>--%>
我不喜欢的
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul>
</li>
<!--云端K歌-->
<li class="active open">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text">云端K歌</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a data-url="/song/page/app" href="/song/index.jsp#page/app">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> APP版本管理 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a data-url="/song/page/manage" href="/song/index.jsp#page/manage">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 主题管理 </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a data-url="/song/page/sing" href="/song/index.jsp#page/sing">
<i class="menu-icon fa fa-caret-right"></i>
<span class="menu-text"> 主题歌曲 </span>
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul>
<!-- /.nav-list -->
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'collapsed')
} catch (e) {
}
</script>
</div>
<!-- /section:basics/sidebar -->
<div class="main-content">
<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
try {
ace.settings.check('breadcrumbs', 'fixed')
} catch (e) {
}
</script>
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#"></a>
</li>
</ul>
<!-- /.breadcrumb -->
<!-- #section:basics/content.searchbox -->
<%----%>
<!-- /section:basics/content.searchbox -->
</div>
<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
<!-- #section:settings.box -->
<%----%>
<!-- /section:settings.box -->
<div class="page-content-area">
<!-- ajax content goes here -->
</div>
<!-- /.page-content-area -->
</div>
<!-- /.page-content -->
</div>
<!-- /.main-content -->
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div>
<!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="../assets/js/bootstrap.min.js"></script>
<!-- ace scripts -->
<script src="../assets/js/ace-elements.min.js"></script>
<script src="../assets/js/ace.min.js"></script>
<script type="text/javascript">
//Load content via ajax
jQuery(function ($) {
if ('enable_ajax_content' in ace) {
var options = {
content_url: function (url) {
//this is for Ace demo only, you should change it
//please refer to documentation for more info
if (!url.match(/^page\//)) return false;
var path = document.location.pathname;
//for Ace HTML demo version, convert ajax.html#page/gallery to > gallery.html and load it
if (path.match(/index\.jsp/)) return path.replace(/index\.jsp/, url.replace(/^page\//, '') + '.jsp');
//for Ace PHP demo version convert "page/dashboard" to "?page=dashboard" and load it
return path + "?" + url.replace(/\//, "=");
},
default_url: 'page/app'//default url
}
ace.enable_ajax_content($, options)
}
})
</script>
</body>
</html>
数据展示页面（添加，修改，删除都在此页面中）
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<title>APP版本管理</title>
<link rel="stylesheet" href="../assets/css/jquery-ui.min.css"/>
<link rel="stylesheet" href="../assets/css/datepicker.css"/>
<link rel="stylesheet" href="../assets/css/ui.jqgrid.css"/>
<div class="row">
<div class="col-xs-12">
<table class="table" style="margin: 0 0 0 0;padding: 2px;font-size:12px;">
<tr style="padding:0px;vertical-align: middle">
<td style="vertical-align: middle;width:500px;">
<button id="delSelectedBtn" type="button" data-toggle="modal" data-target="#addBgImgModal"
style="width:100px;" >
添加新版本
</button>
</td>
<td style="vertical-align: middle;width:1">
<span id="currentVer"></span>
</td>
</tr>
</table>
<%--添加新版本弹出框--%>
<div class="container">
<div id="addBgImgModal" class="modal fade" tabindex="-1" style="margin: auto;">
<div class="modal-dialog" style="width:400px; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
添加APP版本
</div>
</div>
<div class="modal-body no-padding center" style="margin-top: 25px;">
<form:form id="addBgImgForm" class="form-horizontal" method="post" action="../addBgImg"
enctype="multipart/form-data" modelAttribute="uploadForm">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="id"> 编号 </label>
<div class="col-sm-9">
<input type="text" id="id" name="id" placeholder=""
class="col-xs-12 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="name"> 版本名称 </label>
<div class="col-sm-9">
<input type="text" id="name" name="name" placeholder=""
class="col-xs-12 col-sm-7"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="language"> 语言 </label>
<div class="col-sm-9">
<select id="language" name="language" placeholder=""
class="col-xs-12 col-sm-7">
<option value="0">简体中文</option>
<option value="1">繁体中文</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
style="margin-top: 20px" > 背景图片规格 </label>
<div class="col-sm-9">
<div style="margin-right: 250px"><input id="enablebgimg" name="enablebgimg" type="checkbox" οnclick="Kind(this)"/>启用</div>
<div style="margin-left: 50px;margin-top: -25px"> <select id="bgimgext" name="bgimgext" disabled="disabled" placeholder=""
class="col-xs-12 col-sm-7"style="width: 120px">
<option value="png">png</option>
<option value="gif">gif</option>
<option value="jpeg">jpeg</option>
<option value="jpg">jpg</option>
</select></div>
</div>
</div>
<div class="form-group">
<div style="margin-right: 200px;margin-top: -20px">宽<input id="bgimgwidth" disabled="disabled" name="bgimgwidth" type="text" style="width: 70px;"/></div>
<div style="margin-right: 30px;margin-top: -32px">高<input id="bgimgheight" disabled="disabled" name="bgimgheight" type="text" style="width: 70px;"/></div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
style="margin-top: 20px" > 选择图片规格 </label>
<div class="col-sm-9">
<div style="margin-right: 250px"><input id="enableselectedimg" name="enableselectedimg" type="checkbox" οnclick="Kinds(this)"/>启用</div>
<div style="margin-left: 50px;margin-top: -25px"> <select id="selectedimgext" name="selectedimgext" disabled="disabled" placeholder=""
class="col-xs-12 col-sm-7"style="width: 120px">
<option value="png">png</option>
<option value="gif">gif</option>
<option value="jpeg">jpeg</option>
<option value="jpg">jpg</option>
</select></div>
</div>
</div>
<div class="form-group">
<div style="margin-right: 200px;margin-top: -20px">宽<input id="selectedimgwidth" name="selectedimgwidth" disabled="disabled" type="text" style="width: 70px;"/></div>
<div style="margin-right: 30px;margin-top: -32px">高<input id="selectedimgheight" name="selectedimgheight" disabled="disabled" type="text" style="width: 70px;"/></div>
</div>
</form:form>
</div>
<div class="modal-footer center">
<button id="addBgImgBtn" class="btn btn-sm btn-primary" type="button" data-dismiss="modal">
<i class="ace-icon fa fa-check"></i>
提交
</button>
<button class="btn btn-sm btn-danger" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
取消
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<%--添加成功提示窗--%>
<div class="container">
<div id="addSuccessModal" class="modal fade" tabindex="-1" style="margin: auto;">
<div class="modal-dialog" style="width:300px;margin-top: 200px;">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
添加APP版本
</div>
</div>
<div class="modal-body no-padding center" style="margin: 40px 42px 20px 42px;">
APP版本添加成功
</div>
<div class="modal-footer center">
<button class="btn btn-sm btn-primary" data-dismiss="modal">
<i class="ace-icon fa fa-check"></i>
确认
</button>
<%-- --%>
<%--<button class="btn btn-sm btn-danger" data-dismiss="modal">--%>
<%--<i class="ace-icon fa fa-times"></i>--%>
<%--取消--%>
<%--</button>--%>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<%--修改APP版本弹出框--%>
<div class="container">
<div id="modifyBgImgModal" class="modal fade" tabindex="-1" style="margin: auto;">
<div class="modal-dialog" style="width:400px; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
修改APP版本
</div>
</div>
<div class="modal-body no-padding center" style="margin-top: 25px;">
<form:form id="modifyBgImgForm" class="form-horizontal" method="post" action="../ota/update"
enctype="multipart/form-data" modelAttribute="uploadForm">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="ids"> 编号 </label>
<div class="col-sm-9">
<input type="text" id="ids" name="id" placeholder=""
class="col-xs-12 col-sm-7" readonly="true"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="name"> 版本名称 </label>
<div class="col-sm-9">
<input type="text" id="names" name="name" placeholder=""
class="col-xs-12 col-sm-7"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="language"> 语言 </label>
<div class="col-sm-9">
<select id="languages" name="language" placeholder=""
class="col-xs-12 col-sm-7">
<option value="0">简体中文</option>
<option value="1">繁体中文</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
style="margin-top: 20px" > 背景图片规格 </label>
<div class="col-sm-9">
<div style="margin-right: 250px"><input id="enablebgimgs" name="enablebgimg" type="checkbox" οnclick="upKind(this)"/>启用</div>
<div style="margin-left: 50px;margin-top: -25px"> <select id="bgimgexts" name="bgimgext" disabled="disabled" placeholder=""
class="col-xs-12 col-sm-7"style="width: 120px">
<option value="png">png</option>
<option value="gif">gif</option>
<option value="jpeg">jpeg</option>
<option value="jpg">jpg</option>
</select></div>
</div>
</div>
<div class="form-group">
<div style="margin-right: 200px;margin-top: -20px">宽<input id="bgimgwidths" disabled="disabled" name="bgimgwidth" type="text" style="width: 70px;"/></div>
<div style="margin-right: 30px;margin-top: -32px">高<input id="bgimgheights" disabled="disabled" name="bgimgheight" type="text" style="width: 70px;"/></div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
style="margin-top: 20px" > 选择图片规格 </label>
<div class="col-sm-9">
<div style="margin-right: 250px"><input id="enableselectedimgs" name="enableselectedimg" type="checkbox" οnclick="upKinds(this)"/>启用</div>
<div style="margin-left: 50px;margin-top: -25px"> <select id="selectedimgexts" name="selectedimgext" disabled="disabled" placeholder=""
class="col-xs-12 col-sm-7"style="width: 120px">
<option value="png">png</option>
<option value="gif">gif</option>
<option value="jpeg">jpeg</option>
<option value="jpg">jpg</option>
</select></div>
</div>
</div>
<div class="form-group">
<div style="margin-right: 200px;margin-top: -20px">宽<input id="selectedimgwidths" name="selectedimgwidth" disabled="disabled" type="text" style="width: 70px;"/></div>
<div style="margin-right: 30px;margin-top: -32px">高<input id="selectedimgheights" name="selectedimgheight" disabled="disabled" type="text" style="width: 70px;"/></div>
</div>
</form:form>
</div>
<div class="modal-footer center">
<button id="modifyBgImgBtn" class="btn btn-sm btn-primary" type="button" data-dismiss="modal">
<i class="ace-icon fa fa-check"></i>
提交
</button>
<button class="btn btn-sm btn-danger" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
取消
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<%--修改成功提示窗--%>
<div class="container">
<div id="modifySuccessModal" class="modal fade" tabindex="-1" style="margin: auto;">
<div class="modal-dialog" style="width:300px;margin-top: 200px;">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
修改APP版本
</div>
</div>
<div class="modal-body no-padding center" style="margin: 40px 42px 20px 42px;">
APP版本成功
</div>
<div class="modal-footer center">
<button class="btn btn-sm btn-primary" data-dismiss="modal">
<i class="ace-icon fa fa-check"></i>
确认
</button>
<%-- --%>
<%--<button class="btn btn-sm btn-danger" data-dismiss="modal">--%>
<%--<i class="ace-icon fa fa-times"></i>--%>
<%--取消--%>
<%--</button>--%>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<%--删除背景图片--%>
<div class="container">
<div id="delBgImgModal" class="modal fade" tabindex="-1" style="margin: auto;">
<div class="modal-dialog" style="width:300px;margin-top: 200px;">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
删除APP版本
</div>
</div>
<div class="modal-body no-padding center" style="margin: 40px 42px 20px 42px;">
<input id="del_id" name="id" type="hidden" />
<input id="channelId" type="hidden" />
确认删除《<span id="delBgImgName"></span>》版本？删除后相应的主题及歌曲也将被删除！
</div>
<div class="modal-footer center">
<button id="delBgImgBtn" class="btn btn-sm btn-primary" data-dismiss="modal">
<i class="ace-icon fa fa-check"></i>
确认
</button>
<button class="btn btn-sm btn-danger" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
取消
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<%--删除成功提示窗--%>
<div class="container">
<div id="delSuccessModal" class="modal fade" tabindex="-1" style="margin: auto;">
<div class="modal-dialog" style="width:300px;margin-top: 200px;">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
删除APP版本
</div>
</div>
<div class="modal-body no-padding center" style="margin: 40px 42px 20px 42px;">
删除成功
</div>
<div class="modal-footer center">
<button class="btn btn-sm btn-primary" data-dismiss="modal">
<i class="ace-icon fa fa-check"></i>
确认
</button>
<%-- --%>
<%--<button class="btn btn-sm btn-danger" data-dismiss="modal">--%>
<%--<i class="ace-icon fa fa-times"></i>--%>
<%--取消--%>
<%--</button>--%>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<table id="bgImgTable" style="font-size:14px;"></table>
<div id="bgImgPager"></div>
<script type="text/javascript">
var $path_base = "../..";//in Ace demo this will be used for editurl parameter
</script>
<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- page specific plugin scripts -->
<script src="js/app.js" type="text/javascript"></script>
<script src="js/dateFormat.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/ajaxfileupload.js" type="text/javascript"></script>
数据展示页面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 = "<div class='hidden-sm hidden-xs btn-group'>" + "<button id='modifyImgBtn" + rowObject['id'] + "'" + " class='btn btn-xs btn-info' type='button' οnclick='javascript:modify("+ rowObject['id'] + ',' +'"'+rowObject['name']+ '"' +','+'"' + rowObject['language']+'"'+','+'"' + rowObject['bg_img_ext'] + '"' +','+'"' + rowObject['bg_img_width']+ '"' +','+'"' + rowObject['bg_img_height']+ '"' +','+'"' + rowObject['selected_img_ext']+ '"' +','+'"' + rowObject['selected_img_width']+ '"' +','+'"' + rowObject['selected_img_height']+ '"' + ");' >" + "<i class='ace-icon fa fa-pencil bigger-120'></i>修改</button>" + "<button class='btn btn-xs btn-danger' id='delBackupBtn" + rowObject['id'] + "'" + " type='button' οnclick='javascript:del(" + rowObject['name']+ ',' +'"'+rowObject['id'] + '"' + ");' ><i class='ace-icon fa fa-trash-o bigger-120'></i>删除</button>" "</div>"; 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
版权声明：本文为wang623145708原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。