通过bootstrap画一个简单的后台管理页面，知识有限，页面粗糙，一种记录方式
页面效果展示
首页页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>首页</title>
<style>
body,html{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: linen;
}
.main-nav {
height: 100%;
}
.main-content {
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border-width: 0px;
}
a {
color: black;
}
a:hover{
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- 头部内容 -->
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">xxx系统</a>
</div>
<div>
<ul class="nav navbar-nav pull-left">
<li><a target="content" href="content_bootstrap.html">首页</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search...">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav pull-right">
<li class="dropdown"><a href="#" class="data-toggle" data-toggle="dropdown">用户<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">忘记密码</a></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main-nav">
<!--左侧菜单-->
<div class="col-sm-1 col-xs-2 nav">
<div class="btn-group btn-group-vertical">
<button class="btn btn-primary" data-toggle="collapse" data-target="#menu_one">系统管理</button>
<ul id="menu_one" class="collapse in menu list-unstyled">
<li><a class="btn col-sm-12">用户管理</a></li>
<li><a class="btn col-sm-12">部门管理</a></li>
<li><a class="btn col-sm-12">角色管理</a></li>
</ul>
<button class="btn btn-primary" data-toggle="collapse" data-target="#menu_two">存库管理</button>
<ul id="menu_two" class="collapse in menu list-unstyled">
<li><a class="btn col-sm-12">库存列表</a></li>
<li><a class="btn col-sm-12">进货管理</a></li>
<li><a class="btn col-sm-12">出货管理</a></li>
<li><a class="btn col-sm-12">调配管理</a></li>
</ul>
<button class="btn btn-primary" data-toggle="collapse" data-target="#menu_three">客户管理</button>
<ul id="menu_three" class="collapse in menu list-unstyled">
<li><a class="btn col-sm-12">客户列表</a></li>
<li><a class="btn col-sm-12">客户回访</a></li>
</ul>
</div>
</div>
<!--主体内容-->
<div class="col-sm-11 col-xs-10 main-content">
<iframe name="content" src="content_bootstrap.html" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</body>
<script>
-- 隐藏子菜单
$(function(){
$(".menu").collapse('hide')
})
</script>
</html>
主体轮播图代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>首页</title>
<style>
img {
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img decoding="async" src="img/风景1.jpg" alt="First slide"/>
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img decoding="async" src="img/风景1.jpg" alt="First slide"/>
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img decoding="async" src="img/风景1.jpg" alt="First slide"/>
<div class="carousel-caption">标题1</div>
</div>
</div>
<!-- 轮播（carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
用户管理页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="user-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title></title>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container-fluid">
<h3 style="text-align: center;">用户列表</h3>
<div class="btn btn-group">
<button type="button" class="btn btn-primary" ng-click="deleteUser()">删除</button>
</div>
<table class="table table-striped">
<thead>
<th><input type="checkbox" ng-model="select_all" ng-click="ProSelectAll($event,users)"/>全选</th>
<th>用户名</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>住址</th>
<th>部门</th>
<th>角色</th>
<th>操作</th>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-click="updateSelection($event,user.id)" ng-model="select_one[user.id]"/></td>
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.gender }}</td>
<td>{{ user.address }}</td>
<td>{{ user.dept }}</td>
<td>{{ user.role }}</td>
<td>
<button class="btn" ng-click="editUser(user)">
<span class="glyphicon glyphicon-pencil"></span>编辑
</button>
<button class="btn" ng-click="editUser(null)">
<span class="glyphicon glyphicon-pencil"></span>新增
</button>
</td>
</tr>
</tbody>
</table>
<div>
<ul class="pagination pull-right">
<li>总条数：{{totalCount}}</li>
<li>每页条数：<input type="number" ng-model="pageSize" ng-change="selectPage(page)"></li>
<li>
<a href ng-click="prev()">上一页</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
<li>
<a href ng-click="next()">下一页</a>
</li>
</ul>
</div>
</div>
</body>
<script>
//此处可以换成get请求获取后端返回数据
angular.module('myApp', []).controller('userCtrl', function($scope, $http) {
//分页组件必须变量
$scope.currentPage = 1; //当前页
$scope.pageSize = 4; //每页记录数
$scope.totalCount = 0; //总记录数
$scope.totalPages = 0; //总页数
$scope.pageList = new Array() //分页工具条显示所有页码
//加载上一页的数据
$scope.prev = function() {
$scope.selectPage($scope.currentPage - 1);
}
//加载下一页的数据
$scope.next = function() {
$scope.selectPage($scope.currentPage + 1)
}
//分页查询
$scope.selectPage = function(page) {
//判断传入page是否合法
if ($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)) {
return;
}
//发送请求获取数据
$http({
method: 'GET',
url: '6_' + page + '.json',
params: {
"page": page, //页码
"pageSize": $scope.pageSize //每页记录数
}
}).success(function(data, status, headers, config) {
$scope.users = data.users;
//根据总记录数计算总页数
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
//更新当前显示页码
$scope.currentPage = page;
//显示分页工具条中的页码
var begin; //显示第一个页码
var end; //显示最后一个页码
//确定显示条码，begin为开始条码，end为结束条码
begin = $scope.currentPage - 5;
if (begin < 1) {
begin = 1;
}
end = begin + 9;
if (end > $scope.totalPages) {
end = $scope.totalPages;
}
begin = end - 9;
if (begin < 1) {
begin = 1;
}
$scope.pageList = new Array();
for (var i = begin; i < end; i++) {
$scope.pageList.push(i);
}
}).error(function(data, status, headers, config) {
alert("出错了"); //出错情况后期根据返回数据处理
});
}
$scope.isActivePage = function(page) {
return page === $scope.currentPage;
}
$scope.selectPage(1);
$scope.editUser = function(user){
if(user != null){
var hre = "user_add_bootstrap.html?user=" + angular.toJson(user)
location.href = hre
}else{
location.href = "user_add_bootstrap.html"
}
}
//全选，多选操作
$scope.selectIds = []; //存放选中的id
$scope.select_one = []; //存放单个id
$scope.select_all = false; //全选
//全选操作
$scope.ProSelectAll = function($event,list){
$scope.select_all = $event.target.checked;
if($scope.select_all){
angular.forEach(list,function(value){
$scope.selectIds.push(value.id);
$scope.select_one[value.id] = true;
})
}else{
$scope.selectIds=[];
$scope.select_one=[];
}
}
//检查多选是否达到全选
checkAll = function(){
debugger;
if($scope.selectIds.length != 0 && $scope.users.length == $scope.selectIds.length){
$scope.select_all = true;
}else{
$scope.select_all = false;
}
}
//单选操作
$scope.updateSelection = function($event,id){
if($event.target.checked){
$scope.selectIds.push(id);
}else{
var idx = $scope.selectIds.indexOf(id);
//splice()方法用于添加或删除数组中的元素，语法：array.splice(index,count,item1,...,itemx) index:删除那个位置元素，count:删除数量，item1,...,itemx:可选，添加到数组的新元素
$scope.selectIds.splice(idx,1);
}
checkAll();
}
})
</script>
</html>
用户编辑页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>user_add</title>
</head>
<body ng-app="userApp" ng-controller="userEditCtrl">
<div id="container">
<h3 style="text-align: center;">用户编辑</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="username">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" placeholder="请输入用户名" ng-model="user.username">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="name">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" placeholder="请输入用户名" ng-model="user.name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="age">年龄</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" placeholder="请输入用户名" ng-model="user.age">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="gender">性别</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="gender" placeholder="请输入用户名" ng-model="user.gender">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="address">住址</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="address" placeholder="请输入用户名" ng-model="user.address">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="dept">部门</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="dept" placeholder="请输入用户名" ng-model="user.dept">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="role">角色</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="role" placeholder="请输入用户名" ng-model="user.role">
</div>
</div>
<div class="col-sm-offset-2">
<button class="btn btn-primary" ng-click="saveAndUpdateUser(user)">保存</button>
</div>
</form>
</div>
</body>
<script>
angular.module('userApp',[]).controller('userEditCtrl',function($scope){
if(location.href != null){
var hre = location.href;
hre = decodeURIComponent(hre)
var user = hre.split("=")[1];
if(user != null){
user = JSON.parse(user);
$scope.user = user;
}
}
$scope.saveAndUpdateUser = function(user,$http){
console.log(user);
//发送请求到后端保存用户
location.href = 'user_manage.html';
}
})
</script>
</html>
6_1.json
{
"totalCount":100,
"users":[
{"id":1,"username":"daqiao","name":"大乔","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"经理"},
{"id":2,"username":"xiaoqiao","name":"小乔","age":19,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
{"id":3,"username":"sunshangxiang","name":"孙尚香","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
{"id":4,"username":"xishi","name":"西施","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
{"id":5,"username":"diaochan","name":"貂蝉","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
{"id":6,"username":"yangguifei","name":"杨贵妃","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"}
]
}
6_2.json
{
"totalCount":100,
"users":[
{"id":7,"username":"liubei","name":"刘备","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"经理"},
{"id":8,"username":"zhangfei","name":"张飞","age":19,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
{"id":9,"username":"guanyu","name":"关羽","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
{"id":10,"username":"zhaoyun","name":"赵云","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
{"id":11,"username":"zhugeliang","name":"诸葛亮","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
{"id":12,"username":"pangtong","name":"庞统","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"}
]
}
部门管理页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
<script src="js/bootstrap-treeview.js"></script>
<title>部门管理</title>
<style>
body,html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container-fluid{
height: 100%;
}
.content {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid" style="border: 1px solid green;">
<!-- 面包屑导航 -->
<div>
<ul class="breadcrumb">
<li><a href="#">部门管理</a></li>
<li class="active"><a href="#">部门列表</a></li>
</ul>
</div>
<div class="col-sm-2 col-xs-5 content">
<div id="tree"></div>
</div>
<div id="dept_edit" class="col-sm-10 col-xs-7 content">
</div>
</div>
</body>
<script type="text/javascript">
//树形结构显示
$(function() {$.ajax({
type: "Get",
url: "dept.json",
data: {id: ""},
dataType: "json",
success: function (result) {
$("#tree").treeview({
data: result, // 数据源
levels:1, //设置继承树默认展开的级别
showTags: true, //是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出
onNodeSelected: function (event, data) { //点击实现加载部门详情
var hre = 'dept_edit.html?deptId='+data.id
document.getElementById("dept_edit").innerHTML = '<iframe src="'+ hre +'" width=100% height=100% frameborder="0" marginheight="0" marginwidth="0" style="border:0px none transparent"></iframe>'
}
});
},
error: function () {
alert("加载失败！")
}
});
});
</script>
</html>
部门列表页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>部门编辑页面</title>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container-fluid">
<h3 style="text-align: center;">部门列表</h3>
<div class="btn btn-group">
<button type="button" class="btn btn-primary" ng-click="deleteUser()">删除</button>
</div>
<table class="table table-striped">
<thead>
<th><input type="checkbox" ng-model="select_all" ng-click="ProSelectAll($event,depts)"/>全选</th>
<th>部门编码</th>
<th>部门名称</th>
<th>所属公司</th>
<th>部门经理</th>
<th>上级部门</th>
<th>部门属性</th>
<th>通讯地址</th>
<th>激活状态</th>
</thead>
<tbody>
<tr ng-repeat="dept in depts">
<td><input type="checkbox" ng-click="updateSelection($event,dept.id)" ng-model="select_one[dept.id]"/></td>
<td>{{ dept.code }}</td>
<td>{{ dept.name }}</td>
<td>{{ dept.company }}</td>
<td>{{ dept.manager }}</td>
<td>{{ dept.subDept }}</td>
<td>{{ dept.status }}</td>
<td>{{ dept.address }}</td>
<td>{{ dept.use }}</td>
<td>
<button class="btn" ng-click="editUser(user)">
<span class="glyphicon glyphicon-pencil"></span>编辑
</button>
<button class="btn" ng-click="editUser(null)">
<span class="glyphicon glyphicon-pencil"></span>新增
</button>
</td>
</tr>
</tbody>
</table>
<div>
<ul class="pagination pull-right">
<li>总条数：{{totalCount}}</li>
<li>每页条数：<input type="number" ng-model="pageSize" ng-change="selectPage(page)"></li>
<li>
<a href ng-click="prev()">上一页</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
<li>
<a href ng-click="next()">下一页</a>
</li>
</ul>
</div>
</div>
</body>
<script>
//此处可以换成get请求获取后端返回数据
angular.module('myApp', []).controller('userCtrl', function($scope, $http) {
console.log(location.href);
//分页组件必须变量
$scope.currentPage = 1; //当前页
$scope.pageSize = 4; //每页记录数
$scope.totalCount = 0; //总记录数
$scope.totalPages = 0; //总页数
$scope.pageList = new Array() //分页工具条显示所有页码
//加载上一页的数据
$scope.prev = function() {
$scope.selectPage($scope.currentPage - 1);
}
//加载下一页的数据
$scope.next = function() {
$scope.selectPage($scope.currentPage + 1)
}
//分页查询
$scope.selectPage = function(page) {
//判断传入page是否合法
if ($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)) {
return;
}
var deptId = "";
if (location.href != null) {
deptId = location.href.split("=")[1];
}
//发送请求获取数据
$http({
method: 'GET',
url: 'dept_data.json',
params: {
//需要加上部门id
"deptId":deptId,
"page": page, //页码
"pageSize": $scope.pageSize //每页记录数
}
}).success(function(data, status, headers, config) {
$scope.depts = data.depts;
//根据总记录数计算总页数
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
//更新当前显示页码
$scope.currentPage = page;
//显示分页工具条中的页码
var begin; //显示第一个页码
var end; //显示最后一个页码
//确定显示条码，begin为开始条码，end为结束条码
begin = $scope.currentPage - 5;
if (begin < 1) {
begin = 1;
}
end = begin + 9;
if (end > $scope.totalPages) {
end = $scope.totalPages;
}
begin = end - 9;
if (begin < 1) {
begin = 1;
}
$scope.pageList = new Array();
for (var i = begin; i < end; i++) {
$scope.pageList.push(i);
}
}).error(function(data, status, headers, config) {
alert("出错了"); //出错情况后期根据返回数据处理
});
}
$scope.isActivePage = function(page) {
return page === $scope.currentPage;
}
$scope.selectPage(1);
$scope.editUser = function(user){
if(user != null){
var hre = "user_add_bootstrap.html?user=" + angular.toJson(user)
location.href = hre
}else{
location.href = "user_add_bootstrap.html"
}
}
//全选，多选操作
$scope.selectIds = []; //存放选中的id
$scope.select_one = []; //存放单个id
$scope.select_all = false; //全选
//全选操作
$scope.ProSelectAll = function($event,list){
$scope.select_all = $event.target.checked;
if($scope.select_all){
angular.forEach(list,function(value){
$scope.selectIds.push(value.id);
$scope.select_one[value.id] = true;
})
}else{
$scope.selectIds=[];
$scope.select_one=[];
}
}
//检查多选是否达到全选
checkAll = function(){
debugger;
if($scope.selectIds.length != 0 && $scope.users.length == $scope.selectIds.length){
$scope.select_all = true;
}else{
$scope.select_all = false;
}
}
//单选操作
$scope.updateSelection = function($event,id){
if($event.target.checked){
$scope.selectIds.push(id);
}else{
var idx = $scope.selectIds.indexOf(id);
//splice()方法用于添加或删除数组中的元素，语法：array.splice(index,count,item1,...,itemx) index:删除那个位置元素，count:删除数量，item1,...,itemx:可选，添加到数组的新元素
$scope.selectIds.splice(idx,1);
}
checkAll();
}
})
</script>
</html>
dept_data.json
{
"totalCount":100,
"depts":[
{"id":"11111","code":"10000","name":"xxx有限公司","company":"xxx有限公司","manager":"刘备","subDept":null,"status":"职能部门","address":"山东临沂","use":"启用"},
{"id":"11112","code":"100001","name":"销售部","company":"xxx有限公司","manager":"刘备","subDept":"11111","status":"职能部门","address":"山东临沂","use":"启用"},
{"id":"11113","code":"100002","name":"人力资源部","company":"xxx有限公司","manager":"刘备","subDept":"11111","status":"职能部门","address":"山东临沂","use":"启用"}
]
}
部门编辑页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>部门编辑页面</title>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container-fluid">
<h3 style="text-align: center;">部门列表</h3>
<div class="btn btn-group">
<button type="button" class="btn btn-primary" ng-click="deleteUser()">删除</button>
</div>
<table class="table table-striped">
<thead>
<th><input type="checkbox" ng-model="select_all" ng-click="ProSelectAll($event,depts)"/>全选</th>
<th>部门编码</th>
<th>部门名称</th>
<th>所属公司</th>
<th>部门经理</th>
<th>上级部门</th>
<th>部门属性</th>
<th>通讯地址</th>
<th>激活状态</th>
</thead>
<tbody>
<tr ng-repeat="dept in depts">
<td><input type="checkbox" ng-click="updateSelection($event,dept.id)" ng-model="select_one[dept.id]"/></td>
<td>{{ dept.code }}</td>
<td>{{ dept.name }}</td>
<td>{{ dept.company }}</td>
<td>{{ dept.manager }}</td>
<td>{{ dept.subDept }}</td>
<td>{{ dept.status }}</td>
<td>{{ dept.address }}</td>
<td>{{ dept.use }}</td>
<td>
<button class="btn" ng-click="editDept(dept)">
<span class="glyphicon glyphicon-pencil"></span>编辑
</button>
<button class="btn" ng-click="editDept(null)">
<span class="glyphicon glyphicon-pencil"></span>新增
</button>
</td>
</tr>
</tbody>
</table>
<div>
<ul class="pagination pull-right">
<li>总条数：{{totalCount}}</li>
<li>每页条数：<input type="number" ng-model="pageSize" ng-change="selectPage(page)"></li>
<li>
<a href ng-click="prev()">上一页</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
<a href ng-click="selectPage(page)">{{page}}</a>
</li>
<li>
<a href ng-click="next()">下一页</a>
</li>
</ul>
</div>
</div>
</body>
<script>
//此处可以换成get请求获取后端返回数据
angular.module('myApp', []).controller('userCtrl', function($scope, $http) {
console.log(location.href);
//分页组件必须变量
$scope.currentPage = 1; //当前页
$scope.pageSize = 4; //每页记录数
$scope.totalCount = 0; //总记录数
$scope.totalPages = 0; //总页数
$scope.pageList = new Array() //分页工具条显示所有页码
//加载上一页的数据
$scope.prev = function() {
$scope.selectPage($scope.currentPage - 1);
}
//加载下一页的数据
$scope.next = function() {
$scope.selectPage($scope.currentPage + 1)
}
//分页查询
$scope.selectPage = function(page) {
//判断传入page是否合法
if ($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)) {
return;
}
var deptId = "";
if (location.href != null) {
deptId = location.href.split("=")[1];
}
//发送请求获取数据
$http({
method: 'GET',
url: 'dept_data.json',
params: {
//需要加上部门id
"deptId":deptId,
"page": page, //页码
"pageSize": $scope.pageSize //每页记录数
}
}).success(function(data, status, headers, config) {
$scope.depts = data.depts;
//根据总记录数计算总页数
$scope.totalCount = data.totalCount;
$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
//更新当前显示页码
$scope.currentPage = page;
//显示分页工具条中的页码
var begin; //显示第一个页码
var end; //显示最后一个页码
//确定显示条码，begin为开始条码，end为结束条码
begin = $scope.currentPage - 5;
if (begin < 1) {
begin = 1;
}
end = begin + 9;
if (end > $scope.totalPages) {
end = $scope.totalPages;
}
begin = end - 9;
if (begin < 1) {
begin = 1;
}
$scope.pageList = new Array();
for (var i = begin; i < end; i++) {
$scope.pageList.push(i);
}
}).error(function(data, status, headers, config) {
alert("出错了"); //出错情况后期根据返回数据处理
});
}
$scope.isActivePage = function(page) {
return page === $scope.currentPage;
}
$scope.selectPage(1);
$scope.editDept = function(dept){
if(dept != null){
var hre = "dept_edit.html?dept=" + angular.toJson(dept)
location.href = hre
}else{
location.href = "dept_edit.html"
}
}
//全选，多选操作
$scope.selectIds = []; //存放选中的id
$scope.select_one = []; //存放单个id
$scope.select_all = false; //全选
//全选操作
$scope.ProSelectAll = function($event,list){
$scope.select_all = $event.target.checked;
if($scope.select_all){
angular.forEach(list,function(value){
$scope.selectIds.push(value.id);
$scope.select_one[value.id] = true;
})
}else{
$scope.selectIds=[];
$scope.select_one=[];
}
}
//检查多选是否达到全选
checkAll = function(){
debugger;
if($scope.selectIds.length != 0 && $scope.users.length == $scope.selectIds.length){
$scope.select_all = true;
}else{
$scope.select_all = false;
}
}
//单选操作
$scope.updateSelection = function($event,id){
if($event.target.checked){
$scope.selectIds.push(id);
}else{
var idx = $scope.selectIds.indexOf(id);
//splice()方法用于添加或删除数组中的元素，语法：array.splice(index,count,item1,...,itemx) index:删除那个位置元素，count:删除数量，item1,...,itemx:可选，添加到数组的新元素
$scope.selectIds.splice(idx,1);
}
checkAll();
}
})
</script>
</html>
5643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
