使用jquery仿写后台管理系统,简单清楚!
1.上面的图片就是我写的后台管理系统的截图!该系统使用了的技术是jquery,然后使用DOM进行操作。2.这里的话我没有使用Ajax和服务器数据库,所以页面上的数据都是我使用数组将其装起来,然后将数据渲染到页面上的。通过页面上的按钮绑定事件,然后操作数组里面的数据。3.缺点是当我刷新页面的时候,数据会全部复原。进入正题,接下来就给大家看看我写的源码。<!DOCTYPE html><
·
1.上面的图片就是我写的后台管理系统的截图!该系统使用了的技术是jquery,然后使用DOM进行操作。
2.这里的话我没有使用Ajax和服务器数据库,所以页面上的数据都是我使用数组将其装起来,然后将数据渲染到页面上的。通过页面上的按钮绑定事件,然后操作数组里面的数据。
3.缺点是当我刷新页面的时候,数据会全部复原。
进入正题,接下来就给大家看看我写的源码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lib.baomitu.com/jquery/1.11.3/jquery.js"></script>
<!-- <script src="jquery.js"></script> -->
<style>
.content {
width: 1200px;
height: 700px;
margin: 140px 350px;
/* background: pink; */
}
.content ul:nth-of-type(2) {
display: none;
}
input {
float: left;
width: 50px;
margin-top: 20px;
}
li {
list-style-type: none;
width: 227px;
height: 50px;
float: left;
line-height: 50px;
border: 1px solid rgb(223, 225, 231);
/* background-color: powderblue; */
border-right: 0;
border-top: 0;
text-align: center;
}
ul {
margin: 0;
padding: 0;
height: 50px;
/* background-color: plum; */
border: 1px solid rgb(235, 238, 245);
border-top: 0;
}
ul:nth-child(2) {
border: 1px solid rgb(235, 238, 245);
}
ul:nth-child(2n+1) {
background-color: rgba(231, 230, 230, 0.363);
}
button {
width: 50px;
height: 28px;
border-radius: 5px;
margin: 0 5px;
border: 1px solid rgb(220, 223, 230);
}
button:hover {
cursor: pointer;
}
button:nth-of-type(2) {
border: 0;
background-color: rgb(245, 108, 108);
}
button:nth-of-type(1):hover {
border: 1px solid rgb(198, 226, 255);
background-color: rgb(236, 245, 255);
color: rgb(64, 158, 255);
}
.one {
height: 80px;
margin-bottom: 10px;
/* background-color: rgb(201, 64, 255); */
}
.one input {
width: 200px;
height: 40px;
outline: none;
border: 0;
float: left;
margin: 18px 15px;
border-radius: 10px;
border: 1px solid rgb(220, 223, 230);
text-indent: 0.6em;
}
.one span {
display: block;
float: left;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgb(64, 158, 255);
border: 1px solid;
margin: 23px 12px;
border-radius: 9px;
border: 1px solid rgb(220, 223, 230);
}
.one span:hover {
color: #fff;
cursor: pointer;
background-color: rgb(21, 101, 182);
}
/* 弹出框 */
.box {
width: 297px;
height: 210px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* border: 1px solid; */
background-color: #fff;
display: none;
}
.box ul {
margin: 0;
padding: 0;
}
.box li {
width: 100px;
height: 40px;
line-height: 40px;
/* background-color: pink; */
border: 1px solid rgb(5, 5, 5);
border-bottom: 0;
}
.box li:nth-child(2n) {
width: 191px;
border-left: 0;
}
.box li:last-child {
width: 292px;
border: 1px solid rgb(5, 5, 5);
}
.box li input {
margin: 7px 4px;
height: 20px;
width: 170px;
outline: none;
}
.box li:last-child span {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
border: 1px solid rgb(223, 225, 231);
background-color: rgb(239, 239, 239);
border-radius: 10px;
transition: all 0.5s linear;
}
.box li:last-child span:hover {
cursor: pointer;
border: 1px solid rgb(198, 226, 255);
background-color: rgb(236, 245, 255);
color: rgb(64, 158, 255);
}
/* 侧边栏 */
.aside {
width: 12%;
height: 1000px;
position: absolute;
top: 0;
left: 0;
background-color: #334157;
padding-top: 160px;
}
.aside h3 {
margin: 2px auto;
font-size: 17px;
height: 30px;
line-height: 30px;
color: #fff;
box-sizing: border-box;
padding-left: 30px;
width: 118%;
}
.son {
width: 192px;
float: left;
}
.son:hover {
cursor: pointer;
}
.son h3:hover {
background-color: rgba(31, 31, 30, 0.356);
}
.son div {
display: none;
box-sizing: border-box;
text-align: center;
background-color: #3341577e;
}
.son div h4 {
color: rgb(252, 215, 10);
margin: 5px 0;
height: 20px;
line-height: 20px;
font-size: 14px;
width: 118%;
}
.son div h4:hover {
background-color: rgba(29, 29, 26, 0.336);
}
/* 头部 */
.header {
width: 100%;
height: 90px;
background-color: #334157;
position: absolute;
top: 0;
left: 0;
}
.header h2 {
color: #fff;
position: absolute;
top: 10px;
left: 230px;
z-index: 1;
display: none;
}
/* 动画 */
.animate {
width: 180px;
height: 40px;
line-height: 40px;
position: absolute;
/* background-color: pink; */
top: 25px;
left: 240px;
font-size: 35px;
font-weight: 700;
color: #fff;
}
.one em {
display: block;
width: 80px;
height: 30px;
line-height: 30px;
font-style: inherit;
position: absolute;
text-align: center;
top: 164px;
left: 1033px;
background-color: rgb(64, 158, 255);
border: 1px solid rgb(239, 239, 239);
border-radius: 10px;
}
.one em:hover {
color: #fff;
cursor: pointer;
background-color: rgb(21, 101, 182);
}
</style>
</head>
<body>
<div class="header">
<h2>
后台管理系统
</h2>
<div class="animate">
欢 迎 登 录
</div>
</div>
<div class="aside">
<div class="son">
<h3>公司管理</h3>
<div>
<h4>事务处理</h4>
<h4>处理进度</h4>
</div>
</div>
<div class="son">
<h3>人员管理</h3>
<div>
<a href="http://www.baidu.com">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
</div>
</div>
<div class="son">
<h3>代码展示</h3>
<div>
<a href="http://www.baidu.com">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
</div>
</div>
<div class="son">
<h3>人员业绩</h3>
<div>
<a href="http://www.baidu.com">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
</div>
</div>
<div class="son">
<h3>季度业绩</h3>
<div>
<a href="http://www.baidu.com">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
<a href="">
<h4>事务处理</h4>
</a>
</div>
</div>
</div>
<div class="box">
<ul>
<li>部门名称</li>
<li><input type="text"></li>
<li>部门代码</li>
<li><input type="text"></li>
<li>修改时间</li>
<li><input type="text"></li>
<li>修改人</li>
<li><input type="text"></li>
<li><span class="one">确认</span> <span>取消</span></li>
</ul>
</div>
<div class="box">
<ul>
<li>部门名称</li>
<li><input type="text"></li>
<li>部门代码</li>
<li><input type="text"></li>
<li>修改时间</li>
<li><input type="text"></li>
<li>修改人</li>
<li><input type="text"></li>
<li><span class="two">确认</span> <span>取消</span></li>
</ul>
</div>
<div class="content">
<div class="one">
<input type="text" placeholder="部门名称">
<input type="text" placeholder="部门代码">
<span>搜索</span>
<span>添加</span>
<!-- <em>代码排序</em> -->
</div>
<ul>
<input type="checkbox" class="checkall">
<li>部门名称</li>
<li>部门代码</li>
<li>修改时间</li>
<li>修改人</li>
<li>
操作
</li>
</ul>
<ul class="model">
<input type="checkbox" class="check-1">
<li>上海分公司</li>
<li>00011</li>
<li>
2018-05-18 22:04:51
</li>
<li>
小小数
</li>
<li>
<button>编辑</button>
<button>删除</button>
</li>
</ul>
</div>
</body>
</html>
上面就是我写的页面的基本结构和样式!我都使用了简单的注释,不过最重要的是接下来的内容,我们所说的后台管理系统,最重要的是什么?没错就是js的操作。
<script>
// 动画
var timer = null;
var left1 = 230;
timer = setInterval(function () {
$('.header .animate').eq(0)[0].style.left = `${left1}px`;
// 当文字运动到一般时候停下
if (left1 > $('.header')[0].offsetWidth / 2 - 30) {
clearInterval(timer);
// 过两秒清空内容
timer1 = setTimeout(function () {
$('.header .animate').eq(0).empty();
$('.header h2').eq(0)[0].style.display = "block";
}, 3000)
} else {
left1 += 5;
}
}, 20)
// 侧边栏
$('.aside .son h3').on('click', function (e) {
$(this).next().slideToggle(300);
})
var arr = [{
departmentName: "武汉公司",
departmentCode: "11223",
alterTime: "2018-05-18 22:04:51",
people: "张三"
},
{
departmentName: "北京公司",
departmentCode: "123123",
alterTime: "2016-10-18 22:04:51",
people: "李四"
},
{
departmentName: "南京公司",
departmentCode: "123415",
alterTime: "2018-05-18 22:04:51",
people: "赵六"
}, {
departmentName: "上海公司",
departmentCode: "123415",
alterTime: "2020-07-18 22:04:51",
people: "王五"
}, {
departmentName: "上海公司",
departmentCode: "124545",
alterTime: "2029-09-18 22:04:51",
people: "雄安"
}, {
departmentName: "四川公司",
departmentCode: "123415",
alterTime: "2039-09-18 22:04:51",
people: "西藏"
}, {
departmentName: "北京公司",
departmentCode: "123415",
alterTime: "2049-09-18 22:04:51",
people: "朝阳"
}, {
departmentName: "青海公司",
departmentCode: "121315",
alterTime: "2019-09-18 22:04:51",
people: "西宁"
}, {
departmentName: "内蒙古公司",
departmentCode: "3242323",
alterTime: "2069-09-18 22:04:51",
people: "锡林格勒"
}, {
departmentName: "新疆公司",
departmentCode: "6576323",
alterTime: "2069-09-18 22:04:51",
people: "库尔勒"
}
]
// 将数组里面的数据渲染到页面
arr.forEach(function (item, index) {
// 克隆第一个ul
var cloneDom = $(".model").first().clone(true).removeClass(".model");
// 修改克隆出来的值
cloneDom.find("input").eq(0).next().text(item.departmentName).next().text(item.departmentCode)
.next().text(item.alterTime).next().text(item.people);
// 将修改后的克隆值添加一下
$(".content").append(cloneDom)
})
// 获取button删除的对象
var btns = $('ul').find('li').has('button');
btns.click(function (e) {
if ($(e.target).html() == "删除") {
$(e.target).parent().parent().remove();
var del = $(e.target).parent().parent().find('li').eq(0).html();
// 从数组中删除该对象
arr.forEach(function (item, index) {
if (item.departmentName == del) {
arr.splice(index, 1)
}
})
console.log(arr);
} else if ($(e.target).html() == "编辑") {
// 获取box1让其显示
$('.box')[1].style.display = "block";
// 让所有的输入框为空
$('.box').eq(1).find('input').eq(0).prop("value", null);
$('.box').eq(1).find('input').eq(1).prop("value", null);
$('.box').eq(1).find('input').eq(2).prop("value", null);
$('.box').eq(1).find('input').eq(3).prop("value", null);
var ul = $(e.target).parent().parent();
$('span').click(function () {
// 获取你点击的li
var xiu = $(e.target).parent().parent().find('li').eq(0).html();
var xiu1 = $(e.target).parent().parent().find('li').eq(1).html();
if ($(this).attr("class") == "two") {
// 拿到输入框的值
var name = $('.box').eq(1).find('input').eq(0).prop("value");
var code = $('.box').eq(1).find('input').eq(1).prop("value");
var time = $('.box').eq(1).find('input').eq(2).prop("value");
var people = $('.box').eq(1).find('input').eq(3).prop("value");
// 有值才可以添加
if (name[0] !== undefined && code[0] !== undefined && time[0] !== undefined) {
ul.find("li").eq(0).text(name).next().text(code).next().text(time).next()
.text(people);
// 修改数组中的对象
arr.forEach(function (item, index) {
if (item.departmentName == xiu && item.departmentCode == xiu1) {
item.departmentName = name;
item.departmentCode = code;
item.alterTime = time;
item.people = people;
}
})
console.log(arr);
} else {
// 获取box1让其显示
$('.box')[1].style.display = "none";
}
$('.box')[1].style.display = "none";
} else if ($(this).html() == "取消") {
// 获取box让其消失
$('.box')[1].style.display = "none";
}
})
}
})
// 获取第一个checkbox的状态
$('.checkall').change(function () {
$('.check-1').prop('checked', $(this).prop('checked'));
// 把第一个被克隆的复选框改为false
$('.check-1').eq(0).prop('checked',false);
})
$('.check-1').change(function () {
//如果下面有一个按钮没被选中,则全选框按钮无法选中
//通过下面被选中的复选框按钮的长度判断
// console.log($('.check-1:checked').length);
if ($('.check-1:checked').length == $('.check-1').length-1) {
$('.checkall').prop('checked', true)
}else{
$('.checkall').prop('checked', false)
}
})
//添加数据
$('span').click(function () {
if ($(this).html() == "添加") {
// 让所有的输入框为空
$('.box').eq(0).find('input').eq(0).prop("value", null);
$('.box').eq(0).find('input').eq(1).prop("value", null);
$('.box').eq(0).find('input').eq(2).prop("value", null);
$('.box').eq(0).find('input').eq(3).prop("value", null);
// 获取box让其显示
$('.box')[0].style.display = "block";
} else if ($(this).html() == "取消") {
// 获取box让其消失
$('.box')[0].style.display = "none";
} else if ($(this).attr("class") == "one") {
// 将输入框里面的值添加
var name = $('.box').eq(0).find('input').eq(0).prop("value");
var code = $('.box').eq(0).find('input').eq(1).prop("value");
var time = $('.box').eq(0).find('input').eq(2).prop("value");
var people = $('.box').eq(0).find('input').eq(3).prop("value");
// 有值才可以添加
if (name[0] !== undefined && code[0] !== undefined && time[0] !== undefined) {
// 克隆第一个ul
var cloneDom = $(".model").first().clone(true).removeClass(".model");
// 修改克隆出来的值
cloneDom.find("li").eq(0).text(name).next().text(code).next().text(time).next().text(
people);
// 将修改后的克隆值添加一下
$(".content").append(cloneDom);
// 创建一个空对象
var obj = {}
obj["departmentName"] = name;
obj["departmentCode"] = code;
obj["alterTime"] = time;
obj["people"] = people;
// console.log(obj);
// 将对象添加到数组中去
arr.push(obj);
console.log(arr);
}
// 获取box让其消失
$('.box')[0].style.display = "none";
}
})
// 搜索查询模
// 聚焦事件
$('.one').find('input').on('focus', function () {
$(this).prop("value", null)
})
// 拿到查询按钮
var btn = $('.one').find('span').eq(0);
var btn1 = $('.one').find('span').eq(1);
// 绑定事件
btn.on('click', function () {
// 删除添加按钮
// btn1.remove();
// 拿到input框里面的数据
var value = $('.one').find('input').eq(0).prop("value");
var value2 = $('.one').find('input').eq(1).val();
console.log(value);
if (value == null && value2 == null) {
alert('您输入的为空')
}
var newArr = [];
// 模糊查询
for (var i = 0; i < arr.length; i++) {
if (arr[i].departmentName.indexOf(value) !== -1) {
newArr.push(arr[i]);
}
}
if (value) {
// 删除第一行部门下的所有数据
$('.content').find('ul').eq(1).nextAll().remove();
// 将新的数组里面的数据渲染到页面
newArr.forEach(function (item, index) {
// 克隆第一个ul
var cloneDom = $(".model").first().clone(true).removeClass(".model");
cloneDom.css("backgroundColor", " #f9e6ff")
// 修改克隆出来的值
cloneDom.find("input").eq(0).next().text(item.departmentName).next().text(item
.departmentCode)
.next().text(item.alterTime).next().text(item.people);
// 将修改后的克隆值添加一下
$(".content").append(cloneDom);
})
} else {
alert('您的搜索值为空,请输入');
}
})
</script>
我这边使用了这个克隆clone的写法,这样的话表格的每行ul,会根据数组里面的对象个数进行克隆,最后将数据填充进去,渲染到页面上即可。
更多推荐
已为社区贡献1条内容
所有评论(0)