bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码

最新推荐文章于 2023-01-25 20:30:45 发布

――~: 嗯？嗯

最新推荐文章于 2023-01-25 20:30:45 发布

阅读量444

点赞数 1

本文链接：https://blog.csdn.net/userzhaopan/article/details/106673304

版权

前端综合应用bootstrap-table表格神器bootstrap.min.js简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。font-awesome.min.css基于css框架的网页字体图标库。layui.css国产开源前端UI，简单易上手，简洁美观。jquery-3.4.1.min.js轻量级的、兼容多浏览器的JavaScript库。popper.min.js轻量级的提示插件(弹层（框）)。sweeta

摘要由CSDN通过智能技术生成

前端综合应用

bootstrap-table
表格神器
bootstrap.min.js
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
font-awesome.min.css
基于css框架的网页字体图标库。
layui.css
国产开源前端UI，简单易上手，简洁美观。
jquery-3.4.1.min.js
轻量级的、兼容多浏览器的JavaScript库。
popper.min.js
轻量级的提示插件(弹层（框）)。
sweetalert2.all.min.js
可响应，易交互的弹框提示。
layer
弹层组件。

应用1

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" />
	</head>

	<body>
		<!--搜索框-->
		<div style="margin-top: 30px;">
			<form class="form-inline" id="querry-form">
				<label>编号</label>
				<input type="text" class="form-control" id="e_id" placeholder="员工编号">
				<label>姓名</label>
				<input type="text" class="form-control" id="e_name" placeholder="员工姓名">
				<label>年龄</label>
				<input type="text" class="form-control" id="e_age" placeholder="员工年龄">
				<label>生日从</label>
				<input type="date" class="form-control" id="e_birthday_start" placeholder="起始日期">
				<label>至</label>
				<input type="date" class="form-control" id="e_birthday_end" placeholder="终止日期">
				<label>住址</label>
				<input type="text" class="form-control" id="e_address" placeholder="员工住址">
				<label>部门</label>
				<select class="form-control" name="e_dept" id="e_dept">所属部门</select>
				<label>状态</label>
				<select class="form-control" name="e_status" id="e_status">
					<option selected="selected"></option>
					<option value="-1">未确定</option>
					<option value="0">在职</option>
					<option value="1">离职</option>
				</select>
				<button type="submit" class="btn btn-primary mb-2" id="btn_querry">查询</button>
			</form>
		</div>
		<!--增加或批量删除按钮-->
		<div style="padding-top: 10px;padding-left: 15px;">
			<button type="button" class="btn btn-primary" id="btn-add-worker">增加</button>
			<button type="button" class="btn btn-danger" id="btn-delete-multi">批量删除</button>
		</div>
		<!--增加时弹出的层开始-->
		<div id="add-win" style="display: none;padding: 15px;">
			<form id="add-form">
				<div class="form-group">
				    <label>姓名</label>
				    <input name="e_name" style="margin-top: 5px;" type="text" class="form-control" id="add-form-e_name">
				</div>
				<div class="form-group">
				    <label>年龄</label>
				    <input name="e_age" style="margin-top: 5px;" type="number" class="form-control" id="add-form-e_age">
				</div>
				<div class="form-group">
				    <label>出生生日</label>
				    <input name="e_birthday" style="margin-top: 5px;" type="date" class="form-control" id="add-form-e_birthday">
				</div>
				<div class="form-group">
				    <label>住址</label>
				    <input name="e_address" style="margin-top: 5px;" type="text" class="form-control" id="add-form-e_address">
				</div>
				<div class="form-group">
				    <label>所属部门</label>
				    <select name="d_name" class="form-control" id="add-form-d_name">
				        <option>请选择部门</option>
				        
					</select>
				</div>
				<button id="add-form-btn" type="button" class="btn btn-primary btn-lg btn-block">提交</button>
				<button type="reset" class="btn btn-danger btn-lg btn-block">重置</button>
			</form>
		</div>
		<!--增加时弹出的层结束-->
		<!--修改时弹出的层开始-->
		<div id="update-win" style="display: none;padding: 15px;">
			<form id="update-form">
				<div class="form-group">
				    <label>编号</label>
				    <input name="e_id" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_id" readonly="readonly">
				</div>
				<div class="form-group">
				    <label>姓名</label>
				    <input name="e_name" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_name">
				</div>
				<div class="form-group">
				    <label>年龄</label>
				    <input name="e_age" style="margin-top: 5px;" type="number" class="form-control" id="update-form-e_age">
				</div>
				<div class="form-group">
				    <label>出生生日</label>
				    <input name="e_birthday" style="margin-top: 5px;" type="date" class="form-control" id="update-form-e_birthday">
				</div>
				<div class="form-group">
				    <label>住址</label>
				    <input name="e_address" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_address">
				</div>
				<div class="form-group">
				    <label>所属部门</label>
				    <select name="d_name" class="form-control" id="update-form-d_name">
				        <option>请选择部门</option>
				        
					</select>
				</div>
				<button id="update-form-btn" type="button" class="btn btn-primary btn-lg btn-block">确认修改</button>
			</form>
		</div>		
		<!--修改时弹出的层结束-->
		<!--员工列表-->
		<div style="padding-top: 15px;">
			<table id="proList"></table>
		</div>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script>
		<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script type="text/javascript" src="js/sweetalert2.all.min.js"></script>
		<script type="text/javascript" src="js/1.js"></script>
	</body>

</html>

/*页面刷新获得部门放到部门下拉框*/
			$.ajax({
   
				type: "post",
				url: "http://localhost/getDepName",
				async: true,
				dataType: 'json'
			}).done(function(data) {
   
				$("#e_dept").append('<option selected=selected></option>');
				for(var deName of data) {
   
					$('#e_dept').append('<option>' + deName.d_name + '</option>');//add_d_id
					$('#add-form-d_name').append('<option>' + deName.d_name + '</option>');//add_d_id
					$('#update-form-d_name').append('<option>' + deName.d_name + '</option>');//add_d_id
				}
			}).fail(function(xhr) {
   
				Swal.fire({
   
					icon:'error',
					title:`${
     xhr.status}`,
					text:'服务器繁忙，请稍后再试！',
					confirmButtonText:'确定'
				});
			});
			/*获取员工列表信息*/
			$('#proList').bootstrapTable({
   
				url: 'http://localhost/getAllEmp',
				pagination: true,//是否显示分页条
				pageSize: 5,//一页显示的行数
				paginationLoop: false,//是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
				pageList: [5, 8, 10],//选择每页显示多少行，数据过少时可能会没有效果
				columns: [{
   
					checkbox:true,
				},{
   
					field: 'e_id',
					title: '员工编号'
				}, {
   
					field: 'e_name',
					title: '员工姓名'
				}, {
   
					field: 'e_age',
					title: '员工年龄'
				}, {
   
					field: 'e_birthday',
					title: '员工生日'
				}, {
   
					field: 'e_address',
					title:

最低0.47元/天解锁文章

――~: 嗯？嗯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码

前端综合应用bootstrap-table表格神器bootstrap.min.js简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。font-awesome.min.css基于css框架的网页字体图标库。layui.css国产开源前端UI，简单易上手，简洁美观。jquery-3.4.1.min.js轻量级的、兼容多浏览器的JavaScript库。popper.min.js轻量级的提示插件(弹层（框）)。sweeta
复制链接

扫一扫