list.ftl
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>潜在客户报表查询</title>
7 <!--freemarker引入模板文件 使用相对路径来引入的-->
8 <#include "../common/link.ftl" >
9
10 <link rel="stylesheet" href="/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
11 <script src="/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
12 <script src="/js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
13
14 <script>
15 $(function () {
16 $('.input-daterange').datepicker({
17 language: "zh-CN",
18 autoclose: true,
19 todayHighlight: true,
20 clearBtn: true
21 });
22
23 $(".btn-chart").click(function () {
24 //清空模态框的缓存
25 $('#myModal').removeData('bs.modal');
26 //告诉模态框图形报表url是哪个,加载内容并且放到模态框
27 var url = $(this).data('url');
28 $('#myModal').modal({ //加上高级查询的条件
29 remote : url + "?" + $("#searchForm").serialize()
30 })
31 $("#myModal").modal('show');
32 })
33 })
34 </script>
35 </head>
36 <body class="hold-transition skin-blue sidebar-mini">
37 <div class="wrapper">
38 <!--页面头部-->
39 <#include "../common/navbar.ftl" >
40 <!--菜单回显 声明变量设置值-->
41 <#assign currentMenu="customerReport"/>
42 <!--菜单-->
43 <#include "../common/menu.ftl" >
44 <div class="content-wrapper">
45 <section class="content-header">
46 <h1>潜在客户报表查询</h1>
47 </section>
48 <section class="content">
49 <div class="box">
50 <div style="margin: 10px;">
51 <!--高级查询--->
52 <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
53 <input type="hidden" name="currentPage" id="currentPage" value="1">
54 <div class="form-group">
55 <label for="keyword">员工姓名:</label>
56 <input type="text" class="form-control" id="keyword" name="keyword" value="${qo.keyword!}">
57 </div>
58 <div class="form-group">
59 <label>时间段查询:</label>
60 <div class="input-daterange input-group" id="datepicker">
61 <input type="text" class="input-sm form-control" name="beginDate"
62 value="${(qo.beginDate?string('yyyy-MM-dd'))!}" />
63 <span class="input-group-addon">to</span>
64 <input type="text" class="input-sm form-control" name="endDate"
65 value="${(qo.endDate?string('yyyy-MM-dd'))!}" />
66 </div>
67 </div>
68 <div class="form-group">
69 <label for="status">分组类型:</label>
70 <select class="form-control" id="groupType" name="groupType">
71 <option value="e.name">员工</option>
72 <option value="DATE_FORMAT(c.input_time, '%Y')">
73 年
74 </option>
75 <option value="DATE_FORMAT(c.input_time, '%Y-%m')">
76 月
77 </option>
78 <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">
79 日
80 </option>
81 </select>
82 <script>
83 $("#groupType").val("${qo.groupType!}")
84 </script>
85 </div>
86
87 <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
88 <button type="button" class="btn btn-info btn-chart" data-url="/customerReport/listByBar.do">
89 <span class="glyphicon glyphicon-stats"></span> 柱状图
90 </button>
91 <#--<button type="button" class="btn btn-warning btn-chart" data-url="/customerReport/listByPie.do">
92 <span class="glyphicon glyphicon-dashboard"></span> 饼状图
93 </button>-->
94
95 </form>
96 </div>
97 <!--编写内容-->
98 <div class="box-body table-responsive no-padding ">
99
100 <table class="table table-hover table-bordered">
101 <tr>
102 <th>分组类型</th>
103 <th>潜在客户新增数</th>
104 </tr>
105 <#list pageInfo.list as map>
106 <tr>
107 <!--freemarker 如果取值时是空值 会报错-->
108 <td>${map.groupType!}</td>
109 <td>${map.number!}</td>
110 </tr>
111 </#list>
112 </table>
113 </div>
114 <!--分页-->
115 <#include "../common/page.ftl">
116 </div>
117 </section>
118 </div>
119 <#include "../common/footer.ftl">
120 </div>
121
122 <!-- Modal模态框 -->
123 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
124 <div class="modal-dialog" role="document">
125 <div class="modal-content">
126 </div>
127 </div>
128 </div>
129
130
131 </body>
132 </html>
list.ftl的更多相关文章
- Using FreeMarker templates (FTL)- Tutorial
Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...
- Spring mvc 中使用ftl引用共通文件出错 FreeMarker template error: Error reading included file "/WEB-INF/ftl/common/errormessage.ftl"
初次接触spring mvc,想做一个小的练习项目,结果在ftl文件中引用其它的共通ftl文件时出错.
- [Freemarker] - 使用struts的component调用freemarker的ftl模板方法
struts中的component标签,可以用来调用freemarker的ftl模板文件,使用component标签传参可以这样写: 使用property方式写法: <s:component t ...
- ftl文件格式化jsp形式显示
通过myeclipse设置ftl的编辑器为jsp的编辑器,达到效果. Myeclipse->windows->preferences 1\ 2\ 3\ 完成后即可.
- Freemarker的初次使用之FTL标签嵌套与map的使用
入职第二周了,在熟悉了公司自动化测试脚本的编写(使用什么数据库,使用哪种语言,框架带了哪些方法)后,现在开始熟悉模拟器,我们把请求发到服务器1,服务器1根据请求参数处理后将结果发给模拟器,模拟器根据服 ...
- spring-mvc整合freemarker并在ftl模版中显示服务端校验的错误信息,JSR303或者JSR349
写法有多种,应该可以任意组合,最重要的是要引入spring.ftl 1.Bean里面的就不再多写了,来个简单就可以了 @NotEmpty(message="用户密码码不可为空") ...
- [ofbiz]screen中应用form和ftl，控制页面元素属性
可以在screen中定义form与ftl两个文件,ftl中可以使用js控制form中的页面元素属性. 控制元素是否可编辑: $("#oaDataReport_budget&qu ...
- 在struts2中整合ajax时出现Template /template/ajax/head.ftl not found错误时的处理方法
Struts2 Ajax出现错误“Template /template/ajax/head.ftl not found” 2013-02-08 18:26:27| 分类: 默认分类|字号 订阅 ...
- Eclipse下如何打开ftl文件
ftl文件是freemarker模板文件,用freemarker时,常用该文件模板:但是该文件在eclipse编辑时,黑白底的,没有任何提示,下面介绍如何用JSP编辑器打开该文件. 工具/原料 e ...
- FTL（Flash translation layer）闪存转换层
前面说过,闪存的读写单位为页,而页的大小一般为4KB或8KB,但我们的操作系统读写数据是按HDD的扇区尺寸进行的(512Byte(字节)),更麻烦的是闪存擦除以块作单位,而且未擦除就无法写入,这导致操 ...
随机推荐
- vue3+ts 全局事件总线mitt
Mitt 在vue3中 $ on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了.然而我们习惯了使用EventBus,对于这种情况 ...
- 终于弄明白了 RocketMQ 的存储模型
RocketMQ 优异的性能表现,必然绕不开其优秀的存储模型 . 这篇文章,笔者按照自己的理解 , 尝试分析 RocketMQ 的存储模型,希望对大家有所启发. 1 整体概览 首先温习下 Rocket ...
- [机器学习] PCA （主成分分析）详解
转载于https://my.oschina.net/gujianhan/blog/225241 一.简介 PCA(Principal Components Analysis)即主成分分析,是图像处理中 ...
- [seaborn] seaborn学习笔记12-绘图实例(4) Drawing example(4)
文章目录 12 绘图实例(4) Drawing example(4) 1. Scatterplot with varying point sizes and hues(relplot) 2. Scat ...
- [OpenCV实战]26 基于OpenCV实现选择性搜索算法
目录 1 背景 1.1 目标检测与目标识别 1.2 滑动窗口算法 1.3 候选区域选择算法 2 选择性搜索算法 2.1 什么是选择性搜索? 2.2 选择性搜索相似性度量 2.3 结果 3 代码 4 参 ...
- 面对集中式缓存实现上的挑战，Redis交出的是何种答卷？聊聊Redis在分布式方面的能力设计
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 在本专栏前面的文章中,我们介绍了各种本 ...
- [数据结构]克鲁斯卡尔（Kruskal）算法
算法的概念 与Prim算法从顶点开始扩展最小生成树不同,Kruskal算法是一种按权值的递增次序选择合适的边来构造最小生成树的方法.假设N=(V,E)是连通网,对应的最小生成树T=(Vt,Et),Kr ...
- Svelte框架实现表格协同文档
首先,从框架搭建上,本篇示例采用当下流行的前后端分离的开发方式,前端使用npm作为脚手架搭建Svelte框架. 后端使用Java的SpringBoot作为后端框架. 首先,介绍下在前端Svelte框架 ...
- 【一句话】Redis的3中缓存策略
首先一句话: 旁路缓存模式策略:写->写DB,删缓存,读->读cache,没有则读DB,然后更新到缓存 读写穿透策略:写->写缓存,然后由缓存系统写DB,读->读cache,没 ...
- ubuntu apt 安装最新版 nodejs
使用最新版本, 当前是 16.x 的版本. 这里我使用了 LTS 版本. curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E ...