java学习day51（AdminLTE）AdminLTE快速入门与应用
2024-04-28 13:41:34
目录
简述
第一章-快速入门
第一节-概述与基本使用
第二节-快速入门案例
第二章-SSM界面
第一节-首页
第二节-登录页面
第三节-用户管理页面
第四节-角色管理页面
第五节-资源权限管理页面
第六节-产品管理页面
第七节-订单管理页面
第一章 快速入门
本章节主要介绍AdminLTE基本使用及入门案例。
第一节 概述与基本使用
1.AdminLTE介绍
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，它提供了一系列响应的、
可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容PC和移动端。通
过AdminLTE，我们可以快速的创建一个响应式的Html5网站。AdminLTE框架在网页架构与设计
上，有很大的辅助作用，尤其是前端架构设计师，用好AdminLTE 不但美观，而且可以免去写很大
CSS与JS的工作量。
2.GitHub获取AdminLTE
https://github.com/ColorlibHQ/AdminLTE
我们可以从上面网址获取AdminLTE源代码
3.AdminLTE结构介绍
AdminLTE/├── dist/│ ├── CSS/│ ├── JS│ ├── img├── build/│ ├── less/│ │ ├── AdminLTE's Less files│ └── Bootstrap-less/ (Only for reference. No modifications have been made)│ ├── mixins/│ ├── variables.less│ ├── mixins.less└── plugins/├── All the customized plugins CSS and JS files
AdminLTE依赖于两个框架Bootstrap3与JQuery1.11+
4.AdminLTE布局与皮肤
布局
.wrapper包住了body下的所有代码
.main-header里是网站的logo和导航栏的代码
.main-sidebar里是用户面板和侧边栏菜单的代码
.content-wrapper里是页面的页面和内容区域的代码
.main-footer里是页脚的代码
.control-sidebar里是页面右侧侧边栏区域的代码
布局选项
fixed：固定
layout-boxed：盒子布局
layout-top-nav：顶部隐藏
sidebar-collapse：侧边栏隐藏
sidebar-mini：侧边栏隐藏时有小图标
皮肤
skin-blue：蓝色
skin-black：黑色
skin-purple：紫色
skin-yellow：黄色
skin-red：红色
skin-green：绿色
以上项我们可以查看start.html页面中查看。
5.AdminLTE2-汉化定制版定制版
下载地址
https://github.com/itheima2017/adminlte2-itheima
下载解压的目录结构如下：
由于AdminLTE2定制版是基于FIS3进行开发，在目录结构中assets、modules、pages、
plugins都是前端开发时所使用到的，最终发布的就是release。所以对于我们使用定制版，我们只需要关注release目录下的结构就可以。
在release目录下有css、img、pages、plugins目录。前两者就不在解决pages是产生的一些定制
的页面，而plugins中是相关的插件，例如jquery、bootstrap等相关的css与js文件。
第二节 快速入门案例
本次入门案例我们基于AdminLTE2-定制版来完成
1.搭建环境
将AdminLTE2-定制版下的release目录下的css、img、plugins目录导入到我们自己的工程
中
2.案例代码
编译index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" type="text/css" href="plugins/adminLTE/css/skins/_allskins.css"/>
<title>AdminLTE入门</title>
</head>
<body class="skin-blue sidebar-mini">
<!--
wrapper包住body下所有代码
-->
<div class="wrapper">
<!--
描述：main-header是网站的logo和导航栏的代码
-->
<header class="main-header">
<a class="logo">
网站的logo
</a>
<nav class="navbar navbar-static-top" role="navigation">
导航栏的代码
</nav>
</header>
<!--
描述：是用户面板和侧边栏菜单的代码
-->
<aside class="main-sidebar">
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
</aside>
<!--
描述：页面的页面和内容区域的代码
-->
<div class="content-wrapper">
页面的页面和内容区域的代码
</div>
<!--
描述：页脚的代码
-->
<footer class="main-footer">
页脚的代码
</footer>
</div>
</body>
</html>
第二章 SSM界面
本章节主要介绍使用AdminLTE2-IT黑马-定制版来完成SSM综合练习中首页、登录页面、用户管
理、角色管理、资源权限管理、产品管理、订单管理页面的创建，由于定制版本(pages目录)中提
供了常用的基本页面，我们只需要在此基础上进行简单修改就可以满足我们的需求。
查看pages目录中页面
其中有两种文件,一种是以all开头的html页面，一种不是。例如admin-404.html与all-admin-
404.html页面，这两个文件的区别在于all开头的文件可以直接运行显示页面全部信息，而未以all开
头的文件它是需要与其它文件进行组合而展示 页面全部信息。
SSM综合练习项目结构
第一节-首页
all-admin-index.html
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ITCAST - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=
no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<!-- Font Awesome -->
<!-- Ionicons -->
<!-- iCheck -->
<!-- Morris chart -->
<!-- jvectormap -->
<!-- Date Picker -->
<!-- Daterange picker -->
<!-- Bootstrap time Picker -->
<!--<link rel="stylesheet" href="../../../plugins/timepicker/bootstrap-timepick
er.min.css">-->
<!-- bootstrap wysihtml5 - text editor -->
<!--数据表格-->
<!-- 表格树 -->
<!-- select2 -->
<!-- Bootstrap Color Picker -->
<!-- bootstrap wysihtml5 - text editor -->
<!--bootstrap-markdown-->
<!-- Theme style -->
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<!-- Ion Slider -->
<!-- ion slider Nice -->
<!-- bootstrap slider -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries
-->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery 2.2.3 -->
<!-- jQuery UI 1.11.4 -->
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.6 -->
<!-- Morris.js charts -->
<!-- Sparkline -->
<!-- jvectormap -->
<!-- jQuery Knob Chart -->
<!-- daterangepicker -->
<!-- datepicker -->
<!-- Bootstrap WYSIHTML5 -->
<!-- Slimscroll -->
<!-- FastClick -->
<!-- iCheck -->
<!-- AdminLTE App -->
<!-- 表格树 -->
<!-- select2 -->
<!-- bootstrap color picker -->
<!-- bootstrap time picker -->
<!--<script src="../../../plugins/timepicker/bootstrap-timepicker.min.js"></scr
ipt>-->
<!-- Bootstrap WYSIHTML5 -->
<!--bootstrap-markdown-->
<!-- CK Editor -->
<!-- InputMask -->
<!-- DataTables -->
<!-- ChartJS 1.0.1 -->
<!-- FLOT CHARTS -->
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized
-->
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<!-- jQuery Knob -->
<!-- Sparkline -->
<!-- Morris.js charts -->
<!-- Ion Slider -->
<!-- Bootstrap slider -->
<!-- 页面meta /-->
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="../plugins/morris/morris.css">
<link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml
5.min.css">
<link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.defaul
t.css">
<link rel="stylesheet" href="../plugins/select2/select2.css">
<link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.c
ss">
<link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdo
wn.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>数据</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="bu
tton">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdo
wn">
<img src="../img/user2-160x160.jpg" class="user-ima
ge" alt="User Image">
<span class="hidden-xs">黑马</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../img/user2-160x160.jpg" class="imgcircle" alt="User Image">
<p>
黑马 - 数据管理员
<small>最后登录 11:20AM</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat"
>修改密码</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat"
>注销</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="
User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</
a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index">
<a href="all-admin-index.html"><i class="fa fa-dashboard"></
i> <span>首页</span></a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cogs"></i> <span>系统管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting">
<a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a>
</li>
<li id="system-setting">
<a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a>
</li>
<li id="system-setting">
<a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a>
</li>
<li id="system-setting">
<a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-cube"></i> <span>基础数据</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting">
<a href="all-admin-productlist.html">
<i class="fa fa-circle-o"></i> 产品管理
</a>
</li>
<li id="system-setting">
<a href="all-order-manage-list.html">
<i class="fa fa-circle-o"></i> 订单管理
</a>
</li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<img src="../img/center.jpg" width="100%" height="100%" />
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a href="http://www.itcast.cn">研究
院研发部</a>.</strong> All rights reserved.
</footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></scr
ipt>
<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></
script>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></scr
ipt>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></s
cript>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script
>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale: 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if(liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("admin-index");
});
</script>
</body>
</html>
<!---->第二节-登录页面
all-admin-login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<!-- Bootstrap 3.3.6 -->
<!-- Font Awesome -->
<!-- Ionicons -->
<!-- Theme style -->
<!-- iCheck -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="./plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="./plugins/iCheck/square/blue.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="all-admin-index.html"><b>ITCAST</b>后台管理系统</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">登录系统</p>
<form action="all-admin-index.html" method="get">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></
span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label><input type="checkbox"> 记住 下次自动登录</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat"
>登录</button>
</div>
<!-- /.col -->
</div>
</form>
<a href="#">忘记密码</a><br>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.2.3 -->
<!-- Bootstrap 3.3.6 -->
<!-- iCheck -->
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="./plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./plugins/iCheck/icheck.min.js"></script>
<script>
$(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>第三节-用户管理页面
1.用户查询
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
tom
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
tom
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>全部用户</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">全部用户</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-controlfeedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover d
ataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
id="selall" type="checkbox" class="icheckbo
x_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">用户名</th>
<th class="sorting_asc sorting_asc_disabled">邮箱
</th>
<th class="sorting_desc sorting_desc_disabled">
联系电话</th>
<th class="sorting">状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>tom</td>
<td>tom@itcast.cn</td>
<td>12345678900</td>
<td>启用</td>
<td class="text-center">
<a href="../user/findById.do?id=1" class
="btn bg-olive btn-xs">详情</a>
</td>
</tr>
</tbody>
<!--
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></scri
pt>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script
>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document)
.ready(
function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']")
.iCheck(
{
checkboxClass : 'icheckbox_square-b
lue',
increaseArea : '20%'
});
// 全选操作
$("#selall")
.click(
function() {
var clicks = $(this).is(
':checked');
if (!clicks) {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck(
"uncheck");
} else {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck("check");
}
$(this).data("clicks",
!clicks);
});
});
</script>
</body>
</html>
2.用户添加
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>用户表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">用户表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../user/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">用户信息</div>
<div class="row data-type">
<div class="col-md-2 title">用户名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="username"
placeholder="用户名称" value="">
</div>
<div class="col-md-2 title">密码</div>
<div class="col-md-4 data">
<input type="password" class="form-control" name="password"
placeholder="密码" value="">
</div>
<div class="col-md-2 title">邮箱</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="email"
placeholder="邮箱" value="">
</div>
<div class="col-md-2 title">联系电话</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="phoneNum"
placeholder="联系电话" value="">
</div>
<div class="col-md-2 title">用户状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="status">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>
3.用户详情
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>全部用户</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">全部用户</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<div class="tab-pane" id="tab-treetable">
<table id="collapse-table"
class="table table-bordered table-hover dataTable">
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tr data-tt-id="0">
<td colspan="2">tom</td>
</tr>
<tbody>
<tr data-tt-id="1" data-tt-parent-id="0">
<td>admin</td>
<td>管理员权限</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>产品修改</td>
<td>/product/update.do</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>产品详情</td>
<td>/product/findById.do</td>
</tr>
</tbody>
</table>
</div>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
$("#collapse-table").treetable({
expandable : true
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
</script>
</body>
</html>
4.用户添加角色
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理 <small>添加角色表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">用户管理</a></li>
<li class="active">添加角色表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form
action="../user/addRoleToUser.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <input type="hidden" name="userId"
value="1">
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">角色名称</th>
<th class="sorting">角色描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox" value="2">
</td>
<td>2</td>
<td>user</td>
<td>普通用户</td>
</tr>
<tr>
<td><input name="ids" type="checkbox" value="3">
</td>
<td>3</td>
<td>guest</td>
<td>测试帐号</td>
</tr>
</tbody>
</table>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>
第四节-角色管理页面
1.角色查询
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
角色管理 <small>全部角色</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../role/findAll.do">角色管理</a></li>
<li class="active">全部角色</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建" onclick="location.href='../pages/role-add.jsp'">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-controlfeedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover d
ataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
id="selall" type="checkbox" class="icheckbo
x_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">角色名称</th>
<th class="sorting">角色描述</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>admin</td>
<td>管理员权限</td>
<td class="text-center">
<a href="../role/findRoleByIdAndAllPerm
ission.do?id=1" class="btn bg-olive btn-xs">添加权限</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>user</td>
<td>普通用户</td>
<td class="text-center">
<a href="../role/findRoleByIdAndAllPerm
ission.do?id=2" class="btn bg-olive btn-xs">添加权限</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>3</td>
<td>guest</td>
<td>测试帐号</td>
<td class="text-center">
<a href="../role/findRoleByIdAndAllPerm
ission.do?id=3" class="btn bg-olive btn-xs">添加权限</a>
</td>
</tr>
</tbody>
<!--
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></scri
pt>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script
>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document)
.ready(
function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']")
.iCheck(
{
checkboxClass : 'icheckbox_square-b
lue',
increaseArea : '20%'
});
// 全选操作
$("#selall")
.click(
function() {
var clicks = $(this).is(
':checked');
if (!clicks) {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck(
"uncheck");
} else {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck("check");
}
$(this).data("clicks",
!clicks);
});
});
</script>
</body>
</html>
2.角色添加
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
角色管理 <small>角色表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../role/findAll.do">角色管理</a></li>
<li class="active">角色表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../role/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">角色信息</div>
<div class="row data-type">
<div class="col-md-2 title">角色名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="roleName"
placeholder="角色名称" value="">
</div>
<div class="col-md-2 title">角色描述</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="roleDesc"
placeholder="角色描述" value="">
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>
3.角色添加权限
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
角色管理 <small>添加权限资源表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../role/findAll.do">角色管理</a></li>
<li class="active">添加权限资源表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form
action="../role/addPermissionToRole.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <input type="hidden" name="roleId"
value="2">
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">权限名称</th>
<th class="sorting">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox" value="1">
</td>
<td>1</td>
<td>产品修改</td>
<td>/product/update.do</td>
</tr>
</tbody>
</table>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>
第五节-资源权限管理页面
1.权限查询
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
权限管理 <small>全部权限</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../user/findAll.do">权限管理</a></li>
<li class="active">全部权限</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" t
itle="新建" onclick='location.href="../pages/permission-add.jsp"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" t
itle="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-controlfeedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover d
ataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
id="selall" type="checkbox" class="icheckbo
x_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">权限名称</th>
<th class="sorting_asc sorting_asc_disabled">URL
</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>产品修改</td>
<td>/product/update.do</td>
<td class="text-center">
<a href="../permission/findById.do?id=1"
class="btn bg-olive btn-xs">详情</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>产品详情</td>
<td>/product/findById.do</td>
<td class="text-center">
<a href="../permission/findById.do?id=2"
class="btn bg-olive btn-xs">详情</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>3</td>
<td>订单详情</td>
<td>/order/findById.do</td>
<td class="text-center">
<a href="../permission/findById.do?id=3"
class="btn bg-olive btn-xs">详情</a>
</td>
</tr>
</tbody>
<!--
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/raphael/raphael-min.js"></script>
<script src="../plugins/morris/morris.min.js"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../plugins/knob/jquery.knob.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></scri
pt>
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../plugins/fastclick/fastclick.js"></script>
<script src="../plugins/iCheck/icheck.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script src="../plugins/treeTable/jquery.treetable.js"></script>
<script src="../plugins/select2/select2.full.min.js"></script>
<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script
>
<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="../plugins/ckeditor/ckeditor.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="../plugins/chartjs/Chart.min.js"></script>
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document)
.ready(
function() {
// 激活导航位置
setSidebarActive("admin-datalist");
// 列表按钮
$("#dataList td input[type='checkbox']")
.iCheck(
{
checkboxClass : 'icheckbox_square-b
lue',
increaseArea : '20%'
});
// 全选操作
$("#selall")
.click(
function() {
var clicks = $(this).is(
':checked');
if (!clicks) {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck(
"uncheck");
} else {
$(
"#dataList td input[typ
e='checkbox']")
.iCheck("check");
}
$(this).data("clicks",
!clicks);
});
});
</script>
</body>
</html>
2.权限添加
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50
pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobi
le devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">
李四
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="../logout.do"
class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>
李四
</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a
href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../user/findAll.do"> <i
class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="../role/findAll.do">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="../permission/findAll.do">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a
href="../sysLog/findAll.do"> <i
class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a
href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3">
<i class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
权限资源管理 <small>权限资源表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../permission/findAll.do">权限资源管理</a></li>
<li class="active">权限资源表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../permission/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">权限资源信息</div>
<div class="row data-type">
<div class="col-md-2 title">权限资源名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="permissionName
"
placeholder="权限资源名称" value="">
</div>
<div class="col-md-2 title">权限资源URL</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="url"
placeholder="url" value="">
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
</script>
</body>
</html>
第六节-产品管理页面
1 产品查询
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>全部产品</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../product/findAll.do">产品管理</a></li>
<li class="active">全部产品</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="../pages/product-add.js
p"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input id="
selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">产品编号</th>
<th class="sorting">产品名称</th>
<th class="sorting">出发城市</th>
<th class="sorting">出发时间</th>
<th class="sorting">产品价格</th>
<th class="sorting">产品状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>itcast-001</td>
<td>广州五日游</td>
<td>￥广州</td>
<td>2018-03-30 19:00:00</td>
<td>850.0</td>
<td>关闭</td>
<td class="text-center">
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=1&type=find"'>详情</button>
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=1&type=update"'>编辑</button>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>itcast-002</td>
<td>北京三日游</td>
<td>￥北京</td>
<td>2018-03-28 00:00:00</td>
<td>350.0</td>
<td>开启</td>
<td class="text-center">
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=2&type=find"'>详情</button>
<button type="button" class="btn bg-olive b
tn-xs"
onclick='location.href="../product/find
ById.do?id=2&type=update"'>编辑</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="all-order-manage-edit.h
tml"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页 <select class="form-control">
<option>10</option>
<option>15</option>
<option>20</option>
<option>50</option>
<option>80</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
</script>
</body>
</html>2 产品详情
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>产品表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../product/findAll.do">产品管理</a></li>
<li class="active">产品表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../product/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">产品信息</div>
<div class="row data-type">
<div class="col-md-2 title">产品编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productNum"
placeholder="产品编号" value="1" readonly="readonly">
</div>
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productName"
placeholder="产品名称" value="广州五日游"
readonly="readonly">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
name="departureTime" value="2018-03-30 19:00:00"
readonly="readonly">
</div>
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="cityName"
placeholder="出发城市" value="广州"
readonly="readonly">
</div>
<div class="col-md-2 title">产品价格</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="850.0"
readonly="readonly">
</div>
<div class="col-md-2 title">产品状态</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="关闭"
readonly="readonly">
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息
"
name="productDesc">不错不错，好多好吃的</textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
$('#datepicker-a3').datepicker({
autoclose : true,
format : 'yyyy-mm-dd'
});
});
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
});
</script>
</body>
</html>3 产品添加
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>产品表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../product/findAll.do">产品管理</a></li>
<li class="active">产品表单</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../product/save.do"
method="post">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">产品信息</div>
<div class="row data-type">
<div class="col-md-2 title">产品编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productNum"
placeholder="产品编号" value="">
</div>
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productName"
placeholder="产品名称" value="">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a3" name="departureTime">
</div>
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="cityName"
placeholder="出发城市" value="">
</div>
<div class="col-md-2 title">产品价格</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="">
</div>
<div class="col-md-2 title">产品状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="productStatus">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息
"
name="productDesc"></textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
$('#datepicker-a3').datetimepicker({
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
language: "zh-CN"
});
});
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
$("#datepicker-a3").datetimepicker({
format:"yyyy-mm-dd hh:ii",
});
});
</script>
</body>
</html>4 产品修改
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
产品管理 <small>产品表单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="../product/findAll.do">产品管理</a></li>
<li class="active">产品修改</li>
</ol>
</section>
<!-- 内容头部 /-->
<form action="../product/update.do"
method="post">
<input type="hidden" name="id" value="1">
<!-- 正文区域 -->
<section class="content"> <!--产品信息-->
<div class="panel panel-default">
<div class="panel-heading">产品信息</div>
<div class="row data-type">
<div class="col-md-2 title">产品编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productNum"
placeholder="产品编号" value="itcast-001"
readonly="readonly">
</div>
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="productName"
placeholder="产品名称" value="广州五日游">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a3" name="departureTime"
value="2018-03-30 19:00:00">
</div>
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" name="cityName"
placeholder="出发城市" value="广州">
</div>
<div class="col-md-2 title">产品价格</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="产品价格
"
name="productPrice" value="850.0">
</div>
<div class="col-md-2 title">产品状态</div>
<div class="col-md-4 data">
<select class="form-control select2" style="width: 100%"
name="productStatus">
<option value="0" selected="selected">关闭</option>
<option value="1">开启</option>
</select>
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息
"
name="productDesc">不错不错，好多好吃的</textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="submit" class="btn bg-maroon">修改</button>
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</form>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
$('#datepicker-a3').datetimepicker({
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
language: "zh-CN"
});
});
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
});
</script>
</body>
</html>第七节-订单管理页面
1.订单查询
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
订单管理 <small>全部订单</small>
</h1>
<ol class="breadcrumb">
<li><a href="../index.jsp"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a
href="../order/findAll.do">订单管理</a></li>
<li class="active">全部订单</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="all-order-manage-edit.h
tml"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataT
able">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input id="
selall"
type="checkbox" class="icheckbox_square-blue"></
th>
<th class="sorting_asc">ID</th>
<th class="sorting">订单编号</th>
<th class="sorting">名称</th>
<th class="sorting">金额</th>
<th class="sorting">下单时间</th>
<th class="sorting">订单状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>1</td>
<td>12345</td>
<td>广州五日游</td>
<td>￥850.0</td>
<td>2018-03-02 00:00:00</td>
<td>已支付</td>
<td class="text-center"><a class="btn bg-olive
btn-xs"
href='../order/findById.do?id=1'>详情</a>
<a class="btn bg-olive btn-xs"
href='../order/deleteById.do?id=1'>删除</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>2</td>
<td>54321</td>
<td>北京三日游</td>
<td>￥350.0</td>
<td>2018-03-02 00:00:00</td>
<td>已支付</td>
<td class="text-center"><a class="btn bg-olive
btn-xs"
href='../order/findById.do?id=2'>详情</a>
<a class="btn bg-olive btn-xs"
href='../order/deleteById.do?id=2'>删除</a>
</td>
</tr>
<tr>
<td><input name="ids" type="checkbox"></td>
<td>3</td>
<td>67890</td>
<td>北京三日游</td>
<td>￥350.0</td>
<td>2018-03-02 00:00:00</td>
<td>已支付</td>
<td class="text-center"><a class="btn bg-olive
btn-xs"
href='../order/findById.do?id=3'>详情</a>
<a class="btn bg-olive btn-xs"
href='../order/deleteById.do?id=3'>删除</a>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title=
"新建"
onclick='location.href="all-order-manage-edit.h
tml"'>
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title=
"删除"
onclick='confirm("你确认要删除吗？")'>
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title=
"开启"
onclick='confirm("你确认要开启吗？")'>
<i class="fa fa-check"></i> 开启
</button>
<button type="button" class="btn btn-default" title=
"屏蔽"
onclick='confirm("你确认要屏蔽吗？")'>
<i class="fa fa-ban"></i> 屏蔽
</button>
<button type="button" class="btn btn-default" title=
"刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm"
placeholder="搜索"> <span
class="glyphicon glyphicon-search form-control-feed
back"></span>
</div>
</div>
<!--工具栏/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共4 条数据。 每页 <select
class="form-control" onchange="getPageSize()" id="pageS
izeSelect">
<option value="1">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li><a
href="../order/findAll.do?page=1&pageSize=3"
aria-label="Previous">首页</a></li>
<li><a
href="../order/findAll.do?page=0&pageSize=3">上一页</a>
</li>
<li><a
href="../order/findAll.do?page=1&pageSize=3">1</a></
li>
<li><a
href="../order/findAll.do?page=2&pageSize=3">2</a></
li>
<li><a
href="../order/findAll.do?page=2&pageSize=3">下一页</a>
</li>
<li><a
href="../order/findAll.do?page=2&pageSize=3"
aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
function getPageSize() {
var pageSize = $("#pageSizeSelect").val();
location.href = "../order/findAll.do?page=1&pageSize="
+ pageSize;
}
</script>
</body>
</html>2 订单详情
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht
ml4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel=“stylesheet”
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
href="../plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
href="../plugins/iCheck/square/blue.css">
<link rel="stylesheet"
href="../plugins/morris/morris.css">
<link rel="stylesheet"
href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
href="../plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
href="../plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
href="../plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
href="../plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
href="../plugins/select2/select2.css">
<link rel="stylesheet"
href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="../css/style.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
href="../plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 页面头部 -->
<!-- 页面头部 -->
<header class="main-header"> <!-- Logo --> <a
href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 5
0x50 pixels -->
<span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and
mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a> <!-- Header Navbar: style can be found in header.less --> <nav
class="navbar navbar-static-top"> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
role="button"> <span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> <img
src="../img/user2-160x160.jpg"
class="user-image" alt="User Image"> <span class="hidden-xs">黑马
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header"><img
src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
<p>
黑马 - 数据管理员 <small>最后登录 11:20AM</small>
</p></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a
>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul></li>
</ul>
</div>
</nav> </header>
<!-- 页面头部 /-->
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg"
class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>黑马</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="../pages/main.jsp"><i
class="fa fa-dashboard"></i> <span>首页</span></a></li>
<li class="treeview"><a href="#"> <i class="fa fa-cogs"></i>
<span>系统管理</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="all-admin-userlist.html">
<i class="fa fa-circle-o"></i> 用户管理
</a></li>
<li id="system-setting"><a href="all-admin-rolelist.html">
<i class="fa fa-circle-o"></i> 角色管理
</a></li>
<li id="system-setting"><a href="all-admin-resourceslist.html">
<i class="fa fa-circle-o"></i> 资源权限管理
</a></li>
<li id="system-setting"><a href="all-admin-logslist.html">
<i class="fa fa-circle-o"></i> 访问日志
</a></li>
</ul></li>
<li class="treeview"><a href="#"> <i class="fa fa-cube"></i>
<span>基础数据</span> <span class="pull-right-container"> <i
class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="system-setting"><a href="../product/findAll.do">
<i class="fa fa-circle-o"></i> 产品管理
</a></li>
<li id="system-setting"><a
href="../order/findAll.do?page=1&pageSize=3"> <i
class="fa fa-circle-o"></i> 订单管理
</a></li>
</ul></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
订单管理 <small>全部订单</small>
</h1>
<ol class="breadcrumb">
<li><a href="all-admin-index.html"><i
class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="all-order-manage-list.html">订单管理</a></li>
<li class="active">订单详情</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content"> <!--订单信息-->
<div class="panel panel-default">
<div class="panel-heading">订单信息</div>
<div class="row data-type">
<div class="col-md-2 title">订单编号</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="订单编号"
value="12345" readonly="readonly">
</div>
<div class="col-md-2 title">下单时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a3" readonly="readonly"
value="2018-03-02 00:00:00">
</div>
</div>
<div class="col-md-2 title">路线名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="路线名称"
value="广州五日游" readonly="readonly">
</div>
<div class="col-md-2 title">出发城市</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="路线名称"
value="广州" readonly="readonly">
</div>
<div class="col-md-2 title">出发时间</div>
<div class="col-md-4 data">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
id="datepicker-a6" value="Fri Mar 30 19:00:00 CST 2018"
readonly="readonly">
</div>
</div>
<div class="col-md-2 title">出游人数</div>
<div class="col-md-4 data">
<input type="text" class="form-control" placeholder="出游人数"
value="2" readonly="readonly">
</div>
<div class="col-md-2 title rowHeight2x">其他信息</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" rows="3" placeholder="其他信息">
没什么
</textarea>
</div>
</div>
</div>
<!--订单信息/--> <!--游客信息-->
<div class="panel panel-default">
<div class="panel-heading">游客信息</div>
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="">人群</th>
<th class="">姓名</th>
<th class="">性别</th>
<th class="">手机号码</th>
<th class="">证件类型</th>
<th class="">证件号码</th>
</tr>
</thead>
<tbody>
<tr>
<td>成人</td>
<td><input type="text" size="10" value="张龙"
readonly="readonly"></td>
<td><input type="text" size="10" value="男"
readonly="readonly"></td>
<td><input type="text" size="20"
value="13333333333" readonly="readonly"></td>
<td><input type="text" size="15"
value="身份证" readonly="readonly"></td>
<td><input type="text" size="28"
value="123456789009876543" readonly="readonly"></td>
</tr>
<tr>
<td>儿童</td>
<td><input type="text" size="10" value="张小龙"
readonly="readonly"></td>
<td><input type="text" size="10" value="男"
readonly="readonly"></td>
<td><input type="text" size="20"
value="15555555555" readonly="readonly"></td>
<td><input type="text" size="15"
value="身份证" readonly="readonly"></td>
<td><input type="text" size="28"
value="987654321123456789" readonly="readonly"></td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!--游客信息/--> <!--联系人信息-->
<div class="panel panel-default">
<div class="panel-heading">联系人信息</div>
<div class="row data-type">
<div class="col-md-2 title">会员</div>
<div class="col-md-4 data text">小三</div>
<div class="col-md-2 title">联系人</div>
<div class="col-md-4 data text">张三</div>
<div class="col-md-2 title">手机号</div>
<div class="col-md-4 data text">18888888888</div>
<div class="col-md-2 title">邮箱</div>
<div class="col-md-4 data text">zs@163.com</div>
</div>
</div>
<!--联系人信息/--> <!--费用信息-->
<div class="panel panel-default">
<div class="panel-heading">费用信息</div>
<div class="row data-type">
<div class="col-md-2 title">支付方式</div>
<div class="col-md-4 data text">在线支付-支付宝</div>
<div class="col-md-2 title">金额</div>
<div class="col-md-4 data text">￥850.0</div>
</div>
</div>
<!--费用信息/--> <!--工具栏-->
<div class="box-tools text-center">
<button type="button" class="btn bg-default"
onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/--> </section>
<!-- 正文区域 /-->
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a
href="http://www.itcast.cn">研究院研发部</a>.
</strong> All rights reserved. </footer>
<!-- 底部导航 /-->
</div>
<script
src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script
src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script
src="../plugins/raphael/raphael-min.js"></script>
<script
src="../plugins/morris/morris.min.js"></script>
<script
src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script
src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script
src="../plugins/knob/jquery.knob.js"></script>
<script
src="../plugins/daterangepicker/moment.min.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.js"></script>
<script
src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script
src="../plugins/datepicker/bootstrap-datepicker.js"></script>
<script
src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script
src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script
src="../plugins/fastclick/fastclick.js"></script>
<script
src="../plugins/iCheck/icheck.min.js"></script>
<script
src="../plugins/adminLTE/js/app.min.js"></script>
<script
src="../plugins/treeTable/jquery.treetable.js"></script>
<script
src="../plugins/select2/select2.full.min.js"></script>
<script
src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script
src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script
src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script
src="../plugins/bootstrap-markdown/js/markdown.js"></script>
<script
src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script
src="../plugins/ckeditor/ckeditor.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script
src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script
src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script
src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script
src="../plugins/chartjs/Chart.min.js"></script>
<script
src="../plugins/flot/jquery.flot.min.js"></script>
<script
src="../plugins/flot/jquery.flot.resize.min.js"></script>
<script
src="../plugins/flot/jquery.flot.pie.min.js"></script>
<script
src="../plugins/flot/jquery.flot.categories.min.js"></script>
<script
src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script
src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script
src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></scr
ipt>
<script>
$(document).ready(function() {
// 选择框
$(".select2").select2();
// WYSIHTML5编辑器
$(".textarea").wysihtml5({
locale : 'zh-CN'
});
});
// 设置激活菜单
function setSidebarActive(tagUri) {
var liObj = $("#" + tagUri);
if (liObj.length > 0) {
liObj.parent().parent().addClass("active");
liObj.addClass("active");
}
}
$(document).ready(function() {
// 激活导航位置
setSidebarActive("order-manage");
// 列表按钮
$("#dataList td input[type='checkbox']").iCheck({
checkboxClass : 'icheckbox_square-blue',
increaseArea : '20%'
});
// 全选操作
$("#selall").click(function() {
var clicks = $(this).is(':checked');
if (!clicks) {
$("#dataList td input[type='checkbox']").iCheck("uncheck");
} else {
$("#dataList td input[type='checkbox']").iCheck("check");
}
$(this).data("clicks", !clicks);
});
});
</script>
</body>
</html>java学习day51（AdminLTE）AdminLTE快速入门与应用相关推荐
- python新手教程 从零开始-Python零基础从零开始学习Python十分钟快速入门
原标题:Python零基础从零开始学习Python十分钟快速入门 学习Python的,都知道Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python是一种动态解释型的 ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- Java基础-SSM之mybatis快速入门篇
Java基础-SSM之mybatis快速入门篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 其实你可能会问什么是SSM,简单的说就是spring mvc + Spring + m ...
- 如何学习verilog，如何快速入门？
前言 害怕真的有人不知道verilog是什么东西,于是就给把百度给搬来了! Verilog HDL是一种硬件描述语言,以文本形式来描述数字系统硬件的结构和行为的语言,用它可以表示逻辑电路图.逻辑表达式 ...
- Java学习4大阶段完成入门，小白必读！
Java 的学习过程分为4个阶段: 理论阶段 开发阶段 进阶阶段 实战阶段 理论阶段 在具体谈论Java知识点之前,我想先跟同学们聊聊Java 语言自身的一些特点.生态系统以及适用的场景,这有助于我们 ...
- MyBatis学习总结(1)——MyBatis快速入门
2019独角兽企业重金招聘Python工程师标准>>> 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所 ...
- java azure blob 查询_快速入门：适用于 Java 的 Azure Blob 存储客户端库 v8 | Microsoft Docs...
您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. 快速入门:使用 Jav ...
- MyBatis学习笔记(一)——MyBatis快速入门
转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4261895.html 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优 ...
- Java NIO 非阻塞网络编程快速入门
NIO 非阻塞网络编程快速入门 案例: 编写一个 NIO 入门案例,实现服务器端和客户端之间的数据简单通讯(非阻塞) 目的:理解 NIO 非阻塞网络编程机制 import java.net.InetS ...
最新文章
- confluence7安全补丁_centos7安装confluence遇到的问题
- ArcGIS JS API加载GeoServer发布的WFS服务
- rpa 手机_容智正式推出全球首款移动端RPA产品
- jaydebeapi可以连接_Python安装jpype调用java，安装jaydebeapi通过jdbc连接数据库
- 向上类型转换VS向下类型转换
- wps居中对齐不在中间_WPS文字快捷键总结（Windows版本）--值得收藏
- Activiti5第十一弹，流程监听器与任务监听器
- 【opencv】【图像梯度】
- 查询数据插入别一张表中
- Java Swing Mysql实现的电影票订票管理系统源码附带视频指导运行教程
- php调用python导出excel_如何使用Django导出Excel代码问题
- Leetcode之回文数
- Quartus-II实现D触发器的三种方式
- 三栏式布局的几种实现方式
- 阿里云短信类最新版dysmsapi.aliyuncs.com
- 使用百度翻译api支持中转英，中简转中繁等等
- 狂神说java之002.预科
- python怎么做网站6_网站开发学习Python实现-Django学习-自学注意(6.1.3）
- 网管笔记之良好习惯的养成
- 人际关系-《吸引力是这样炼成的》书中的精髓：掌握7个人际交往技能，收获丰富多彩的人生。