Excel 导入导出以及下载模板小白板

最新推荐文章于 2022-11-18 09:39:32 发布

一只孤傲的狼

最新推荐文章于 2022-11-18 09:39:32 发布

阅读量293

点赞数

分类专栏：后端前端

本文链接：https://blog.csdn.net/weixin_45591668/article/details/105115357

版权

这篇博客主要介绍了前端和后端如何进行Excel的导入导出操作，特别是后端的Controller层，讲解了如何使用模板进行数据填充，首先需要将模板文件存放在项目中，然后读取模板并将查询到的数据整合到表格中。

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

前端部分特别简单

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
 <style>
 .x_content {
    
    float: left;
    clear: both;
}
 </style>
</head>
<body class="nav-md">
	<!-- page content -->
	<div class="">
		<div class="clearfix"></div>
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_content">
						<div class="col-sm-8">
							<div class="input-group"  style="width: 300px;margin-top:5px">
								<input type="text" id="planName" placeholder="请输入"
									style="height:34px" class="input-sm form-control"> <span
									class="input-group-btn">
									<button type="button" onclick="searchPlan()" id="searchBtn"
										class="btn  btn-primary">搜索</button>
								</span>
							</div>
						</div>
						<div class="col-sm-4" style="text-align:right;margin-top:5px">
							<button type="button" class="btn btn-primary " 
								onclick="addPlanProject()" id="planAddBtn">新增</button>
						<button type="button" class="btn btn-primary "
								onclick="importOutMenu()">导入</button>
							<button type="button" class="btn btn-primary "
								onclick="outPortMenu()">下载模板</button>
							<button type="button" class="btn btn-primary "
								onclick="outMenu()">导出</button>
						  </div>
						  <div style="float:left;width:100%;margin:1px 10px"><span style="font-size:13px;font-weight:bold">提示：</span><span style="font-size:12px"> 以下是项目列表</span></div>
							<table class="table table-striped table-bordered" id="jihuaTable" 
								lay-filter="jihuaTable"></table>

					</div>
				</div>
			</div>
		</div>
	</div>
<!-- 	  <a class="layui-btn layui-btn-xs" lay-event="edit"> 改 </a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> 删 </a> -->
	<script type="text/html" id="barDemo">

<i class="layui-icon" lay-event="look11">&#xe615;</i>&nbsp&nbsp
<i class="layui-icon" lay-event="edit">&#xe642;</i>&nbsp&nbsp
<i class="layui-icon" lay-event="del">&#xe640;</i>
</script>
   <script src="../js/layui.all.js"></script>
	<script type="text/html" id="status">
 {
    {
    #  if(d.status == 0){
     }}
      <a class="layui-btn layui-btn-xs" lay-event="publish">发布</a>
     {
    {
    #  } else if(d.status==1){
     }}
         <a class="layui-btn layui-btn-xs" lay-event="canclePublish">取消发布</a>
         <a class="layui-btn layui-btn-xs" lay-event="auditOption">审核</a>
   {
    {
    #  } else if(d.status==2){
     }}
         <span style="color:green">审核已通过</span>
 {
    {
    #  }   else {
     }}
   <span style="color:red">审核已拒绝</span>
{
    {
    #  } }}



</script>
	<script>
	var  planName='';
		$(function() {
    
			$.cookie('type', 0);//内
			authorityOutBtn('planAddBtn','isAdd');
			 getData();
			 enterListenter('planName','searchBtn');
		})
		
		
	function  searchPlan(){
    
			planName=$("#planName").val();
			getData();
		}	
		 function getData() {
    
		var data = {
    
			"type" : 1,
			"planName":planName
		};
		 //var index = layer.msg('数据请求中...', {icon: 16,   shade: [0.5],   scrollbar: false,   time: 0});
		layui.use('table', function() {
    
			var table = layui.table;
			  table.render({
    
				    elem: '#jihuaTable'
				    ,height:460
				    ,url:  serverUrl.url + serverUrl.queryPlanInsideListByPage
				     ,where : data
				    ,page: true 
				    ,limit:10
				    ,even: true
				     ,loading:true
				    ,cols : [ [ 
						{
    
							type : 'numbers',
							title : '序号',
							align : 'center',
							width : '7%'
						}, {
    
							field : 'plan_project_name',
							title : '项目名称',
							align : 'center',
							width : '15%'
						}, {
    
							field : 'custom_id',
							title : '单位',
							align : 'center',
							width : '10%'
						}, {
    
							field : 'serial_number',
							title : '编号',
							align : 'center',
							width : '9%'
						}, {
    
							field : 'ProjectYear',
							title : '年度',
							align : 'center',
							width : '8%'
						}, {
    
							field : 'org_id',
							title : '单位',
							align : 'center',
							width : '15%'
						}, {
    
							field : 'duration_times',
							title : '期数',
							align : 'center',
							width : '8%'
						}, {
    
							field : 'status',
							title : '状态操作',
							align : 'center',
							toolbar : '#status',
							width : '15%'
						}, {
    
							fixed : 'right',
							title : '操作',
							align : 'center',
							toolbar : '#barDemo'
						} ] ]
			       ,
	          done: function(res, curr, count){
    
	        	  authorityBtn('.layui-icon','isDelete','del');
	        	  authorityBtn('.layui-icon'

最低0.47元/天解锁文章

一只孤傲的狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Excel 导入导出以及下载模板小白板

前端部分特别简单<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta c...
复制链接

扫一扫