电脑端layui实例

1.controller(所有数据都返回json,layui默认的json类型,默认数据为当月)

package com.taxsearch.controller.sjpc;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.taxsearch.commons.BaseController;
import com.taxsearch.entity.ObjectExcelView;
import com.taxsearch.entity.PageData;
import com.taxsearch.entity.base.JsonJ;
import com.taxsearch.service.CreateCountService;

/**
 * 
 * @Title:CreateCount
 * @Description: 台账自动生成控制器
 * @author 高敏
 * @version V1.0
 * @date 2018年5月24日
 */
@Controller
public class CreateCountPcController extends BaseController{
	@Resource
	private CreateCountService createCountService;
	/**
	 * @Title: fpGouxuan
	 * @Description: 跳转勾选页面
	 * @param: @return  
	 * @return: String   
	 * @throws
	 */
	@RequestMapping("/createCount")
	public ModelAndView createCount(){
		ModelAndView mav = this.getModelAndView();
		 try {
	    		//默认数据为当月
	    		Calendar calendar = Calendar.getInstance();
	    		int year = calendar.get(Calendar.YEAR);
	    		//获取月 注意:月从零开始
	    		int month = calendar.get(Calendar.MONTH)+1;
	    		int day = calendar.get(Calendar.DATE);
	    		String begin="";
	    		String end="";
	    		if(month<10){
	    			begin = year+"-"+"0"+month+"-"+"01";
	    			end = year+"-"+"0"+month+"-"+day;
	    		}else{
	    			begin = year+"-"+month+"-"+"01";
	    			end = year+"-"+month+"-"+day;
	    		}
	    		 mav.addObject("begin",begin);
	             mav.addObject("end",end);
	             //给页面返回列表页面
	             mav.setViewName("sjpc/createCountPc");
	     } catch (Exception e) {
	    	 e.printStackTrace();
	     }
		 return mav;
	}
	/**
     * 页面展示
     * @param page
     * @return
     */
    @RequestMapping("/pc/createCountList")
    @ResponseBody
    public JsonJ list(String page,String limit,HttpServletRequest request){
    	 JsonJ jsonj = new JsonJ();
    	 try {
    		//默认数据为当月
    		Calendar calendar = Calendar.getInstance();
    		int year = calendar.get(Calendar.YEAR);
    		//获取月 注意:月从零开始
    		int month = calendar.get(Calendar.MONTH)+1;
    		int day = calendar.get(Calendar.DATE);
    		String begin="";
    		String end="";
    		if(month<10){
    			begin = year+"-"+"0"+month+"-"+"01";
    			end = year+"-"+"0"+month+"-"+day;
    		}else{
    			begin = year+"-"+month+"-"+"01";
    			end = year+"-"+month+"-"+day;
    		}
    		
    	    //测试时传入的默认值
    		HashMap data = new HashMap();
    		data.put("begin", begin);
    		data.put("end", end);
    		String nsr = request.getSession().getAttribute("NSRSession").toString();
    		String[] nsrStrArr = nsr.split(",");
    		data.put("SHXYDM", nsrStrArr[0]);
    		data.put("NSRSBH", nsrStrArr[1]);
    		PageHelper.startPage(Integer.parseInt(page.trim()),Integer.parseInt(limit.trim()));
    
         	//获得当前页面列表的所有值
            List<HashMap> createCountList = createCountService.createCountList(data);
            for(int i=0;i<createCountList.size();i++){
            	createCountList.get(i).put("id", i+1);
            }
            //使用PageInfo包装查询结果,只需要将pageInfo交给页面就可以  
            PageInfo<HashMap> pageInfo = new PageInfo(createCountList);
          
            //pageINfo封装了分页的详细信息,也可以指定连续显示的页数
    		jsonj.setCount(pageInfo.getTotal());
    		jsonj.setData(createCountList);
         } catch (Exception e) {
             e.printStackTrace();
         }
         return jsonj;
    }
    
    
    /**
	 * 导出台账数据到excel
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/pc/excel")
	@ResponseBody
	public ModelAndView excel(HttpServletRequest request) throws Exception{
		 ModelAndView mv = this.getModelAndView();  
	     SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM");
	     PageData pd = this.getPageData();
	     HashMap data = new HashMap();
	     String KPRQ = pd.getString("kpyf");
	     if(null != KPRQ && !"".equals(KPRQ)){
	    	KPRQ = KPRQ.trim();
			//Date kpyf=sdf.parse(KPRQ);
			data.put("kpyf", KPRQ);
	     }
	     String nsr = request.getSession().getAttribute("NSRSession").toString();
	     String[] nsrStrArr = nsr.split(",");
	     data.put("SHXYDM", nsrStrArr[0]);
	     data.put("NSRSBH", nsrStrArr[1]);
	     Map<String,Object> dataMap = new HashMap<String,Object>(); 
	     String NSRMC = new String(pd.getString("NSRMC").getBytes("ISO8859-1"), "UTF-8");
	     NSRMC = java.net.URLDecoder.decode(NSRMC,"UTF-8");
	     dataMap.put("NSRMC", NSRMC);
	     List<String> titles = new ArrayList<String>();  
	     titles.add("序号");
	     titles.add("发票代码");
	     titles.add("发票号码");
	     titles.add("开票日期");
	     titles.add("确定勾选日期");
	     titles.add("发票金额");
	     titles.add("发票税额");
	     titles.add("销方名称");
	     dataMap.put("titles", titles);  
	     //根据条件数据得到数据
	     List<HashMap> createCountList = createCountService.searchByList(data); 
	     List<HashMap> varList = new ArrayList<HashMap>();  
	     
	     if(createCountList!=null&&createCountList.size()>0){
	    	 Integer n=1;
	    	 for (HashMap p:createCountList){
	    		 HashMap sheetData = new HashMap();
	    		 sheetData.put("var1", n.toString()); n++;
	         	 sheetData.put("var2", p.get("FPDM").toString());
	         	 sheetData.put("var3", p.get("FPHM").toString());
	         	 sheetData.put("var4", p.get("RQ").toString());
	         	 sheetData.put("var5", p.get("RZSJ").toString());
	         	 sheetData.put("var6", p.get("JE").toString());
	         	 sheetData.put("var7", p.get("SE").toString());
	         	 sheetData.put("var8", p.get("XFMC").toString());
	    		 varList.add(sheetData);
	     }
	}
	     dataMap.put("varList", varList);  
	     ObjectExcelView erv = new ObjectExcelView();  
	     mv = new ModelAndView(erv,dataMap);  
	     return mv;   
	}
	
	/**
     * 页面展示
     * @param page
     * @return
     */
    @RequestMapping("/pc/search")
    @ResponseBody
    public JsonJ search(String page,String limit,HttpServletRequest request){
    	JsonJ jsonj = new JsonJ();
    	PageData pd=this.getPageData();
    	//将参数转换为map
    	GsonBuilder gb = new GsonBuilder();
    	Gson g = gb.create();
    	Map<String, String> map = g.fromJson(pd.get("search").toString(), new TypeToken<Map<String, String>>() {}.getType());
    	 try {
    		//在查询之前传入当前页,然后多少记录 
    		PageHelper.startPage(Integer.parseInt(page.trim()),Integer.parseInt(limit.trim()));
    		HashMap data = new HashMap();
    		String nsr = request.getSession().getAttribute("NSRSession").toString();
    		String[] nsrStrArr = nsr.split(",");
    		data.put("SHXYDM", nsrStrArr[0]);
    		data.put("NSRSBH", nsrStrArr[1]);
    		data.put("fphm", map.get("fphm"));
    		data.put("fpdm", map.get("fpdm"));
    		//时间为空
    		if("".equals(map.get("dateCheck")) || map.get("dateCheck") == null){
    			//默认数据为当月
        		Calendar calendar = Calendar.getInstance();
        		int year = calendar.get(Calendar.YEAR);
        		//获取月 注意:月从零开始
        		int month = calendar.get(Calendar.MONTH)+1;
        		int day = calendar.get(Calendar.DATE);
        		String begin="";
        		String end="";
        		if(month<10){
        			begin = year+"-"+"0"+month+"-"+"01";
        			end = year+"-"+"0"+month+"-"+day;
        		}else{
        			begin = year+"-"+month+"-"+"01";
        			end = year+"-"+month+"-"+day;
        		}
        		data.put("begin", begin);
        		data.put("end", end);
    		}else{
    			//时间不为空 编辑数据
    			String TimeString = map.get("dateCheck");
    			String[] timeStrArr = TimeString.split(" - ");
    			String begin = timeStrArr[0];
    			String end = timeStrArr[1];
    			data.put("begin", begin);
        		data.put("end", end);
    		}
         	//获得当前页面列表的所有值
            List<HashMap> createCountList = createCountService.createCountList(data);
            for(int i=0;i<createCountList.size();i++){
            	createCountList.get(i).put("id", i+1);
            }
            //使用PageInfo包装查询结果,只需要将pageInfo交给页面就可以  
            PageInfo<HashMap> pageInfo = new PageInfo(createCountList);
            
          //pageINfo封装了分页的详细信息,也可以指定连续显示的页数
    		jsonj.setCount(pageInfo.getTotal());
    		jsonj.setData(createCountList);
         } catch (Exception e) {
             e.printStackTrace();
         }
         return jsonj;
    }
}


2.jsp(采用layui动态表格,用的大部分是layui封装的,具体使用参照layui)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="fm" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>确定勾选信息</title>

<link rel="stylesheet" href="<%=basePath%>static/css/layui.css">
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	

</head>
<body>
		<form class="layui-form" action="">
			<!-- 发票代码 -->
			<div class="layui-form-item" style="display: inline-block;">
				<label class="layui-form-label">发票代码:</label>
				<div class="layui-input-inline">
					<input type="text" name="fpdm" placeholder="请输入发票代码" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<!-- 发票号码 -->
			<div class="layui-form-item" style="display: inline-block;">
				<label class="layui-form-label">发票号码:</label>
				<div class="layui-input-inline">
					<input type="text" name="fphm" placeholder="请输入发票号码" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<!-- 时间范围选择器 -->
			<div class="layui-form-item" style="display: inline-block;">
				<label class="layui-form-label" style="width:120px;padding:9px 0;">确定勾选日期:</label>
				<div class="layui-input-inline" style="position:relative;left:30px;">
					<input type="text" class="layui-input" name="dateCheck" id="dateCheck" value="${begin} - ${end}">
				</div>
			</div>
			<!-- 提交按钮 -->
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button>
					<button  type="reset" onclick="CheckPostSet();" class="layui-btn layui-btn-primary">重置</button>
					
				</div>
			</div>
			</form>
			<!-- 月份选择器 -->
			<div class="layui-form-item" style="display: inline-block;">
				<label class="layui-form-label">导出月份:</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="month" placeholder="请选择确定勾选月份">
				</div>
				
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="productExecl" onclick="getOut();" >生成execl</button>
				</div>
			</div>
		
				<!-- 列表 -->
		<table class="layui-hide" id="createList"  lay-filter="test"></table>
		<!-- 按钮 -->
	
			
</body>
<script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.4.js"></script>
<!-- 红蓝票判断 /是否冲红-->
	<script type="text/html" id="SLtemp">  
		  {{#  if(d.JE > 0){ }}  
		    	蓝票
			{{#  if(d.SFCH ===0){ }}  
		    	未冲红
		  {{#  }else { }}  
		    	<span style="color:#fa4659;">已冲红</span>
		  {{#  } }}  
		  {{#  }else { }}  
		    	红票
		  {{#  } }}  
	</script>

<!-- ETC判断/是否认证 -->
	<script type="text/html" id="SFTXFtemp">
		{{#  if(d.SFTXF === 0){ }}  
		    	非ETC电子发票
		{{#  }else { }}  
				ETC发票
			{{#  if(d.SFRZ == null || d.SFRZ === ''){ }}  
		    	<span style="color:#fa4659;"><strong>未认证</strong></span>
		  	{{#  }else { }}  
		    	已认证
		  	{{#  } }}  
		{{#  } }}  
	</script> 
<script type="text/javascript">


//*******************渲染列表********************
var table = null;
var laydate = null;
var tableIns = null;
layui.use('table', function(){
	table = layui.table;
	tableIns = table.render({
		text:{
			none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
		},
		skin: 'line', //行边框风格
		even: true,//开启隔行背景
		elem: '#createList',
		url:'<%=basePath%>pc/createCountList.do?'+Date.parse(new Date()),
		cols: [[
			{field:'id', width:80,align:'center', title: '序号', sort: true},
			{field:'FPHM', width:150,align:'center', title: '发票号码', sort: true},
			{field:'FPDM', width:150,align:'center', title: '发票代码'},
			{field:'RZSJ', width:150,align:'center', title: '确定勾选日期', sort: true},
			{field:'JE', width:100,align:'center', title: '金额', sort: true},
			{field:'SE', width:100,align:'center', title: '税额', sort: true},
			{field:'JE', width:230,align:'center', title: '是否为蓝票/是否冲红',templet: '#SLtemp'},
			{field:'SFTXF', width:230,align:'center', title: '是否为ETC/是否认证',templet: '#SFTXFtemp'},
			{field:'RQ', width:150,align:'center', title: '开票日期', sort: true},
			{field:'XFSH', width:230,align:'center', title: '销方税号'},
			{field:'XFMC', width:230,align:'center', title: '销方名称'},
			{field:'GFSH', width:230,align:'center', title: '购方税号'},
		]],
		page: true,
		limits: [10, 20, 30, 40, 50]
		});
});
//*******************日期范围选择器*****************
layui.use('laydate', function(){
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
		elem: '#dateCheck' //指定元素
		,range: true
	});
		//年月选择器
		laydate.render({ 
		  elem: '#month'
		  ,type: 'month'
		});
});

</script>

<!-- 搜索/EXCEL -->
<script type="text/javascript">
	//重置
	$(".layui-form")[0].reset();
	layui.use('layer', function(){
        var layer = layui.layer;
        layer.msg('加载中', {
            time: 1000, //1s后自动关闭
          });
    });
	
	function CheckPostSet(){
		sessionLive();
		layui.use('layer', function(){
	        var layer = layui.layer;
	        layer.msg('加载中', {
	            time: 1000, //1s后自动关闭
	          });
	    }); 
		tableIns.reload({
		    url:'<%=basePath%>pc/createCountList.do?'+Date.parse(new Date()),
		    page: {
		    	curr: 1 //重新从第 1 页开始
		    }
		});
	}
	
	//搜索
	layui.use('form', function(){
		  var form = layui.form;
		  //监听提交
		  form.on('submit(formSearch)', function(data){
			sessionLive();
			layui.use('layer', function(){
			    var layer = layui.layer;
			    layer.msg('加载中', {
			       time: 1000, //1s后自动关闭
			    });
			}); 
		    var data = JSON.stringify(data.field);
		    tableIns.reload({
		    	 url:'<%=basePath%>pc/search.do?'+Date.parse(new Date()),
	    	 	 where: { //设定异步数据接口的额外参数,任意设
	    	 		 search: data
	    	  	}
	    	  ,page: {
	    	    curr: 1 //重新从第 1 页开始
	    	  }
	    	});
		    return false;
		});
	});
	//导出EXCEL
	function getOut(){
		parent.sessionLive(); 
		var kpyf = $("#month").val();
		if(kpyf==''){
			layui.use('layer', function(){
			    var layer = layui.layer;
			    layer.msg('请选择月份', {
			       time: 1000, //1s后自动关闭
			    });
			}); 
			return false;
		}
		layui.use('layer', function(){
		    var layer = layui.layer;
		    layer.open({
		    	title: '按月份导出EXCEL'
		    	,content: '确定导出EXCEL?'
		    	,area: ['400px', '200px']
				,btn:['确定','取消']
		    	,yes: function(){
		    		layui.use('layer', function(){
					    var layer = layui.layer;
					    layer.msg('加载中', {
					       time: 1000, //1s后自动关闭
					    });
					}); 
		    		var NSRMC = $("#gsNameShow").html();
		    		window.location.href=
		  			'<%=basePath%>pc/excel.do?'+Date.parse(new Date())+
		  			'&kpyf='+kpyf+'&NSRMC='+encodeURI(encodeURI(NSRMC));
		      	}
		    	,btn2: function(){
		        	//return false;
		      	}
		    });   
		}); 
	}
</script>

</html>


阅读更多
想对作者说点什么? 我来说一句

layer <em>ui 实例</em>

2018年05月07日 0B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭