• CRM项目记录（四）

    目录：

    （1）介绍js日历插件及其使用

    （2）crm给创建市场活动添加日历功能

    （3）分页查询市场活动需求分析

    （4）crm分页查询市场活动实现查询市场活动列表Mapper层 

    （5）crm分页查询市场活动实现查询市场活动列表Service层 

    （6）crm实现查询市场活动总条数的Mapper层和Service层

    （7）crm分页查询市场活动实现Controller层

    （8）crm分页查询市场活动实现前台页面

     （9）给市场活动页面的查询按钮添加点击事件

    （10）crm分析翻页功能的实现

    （11）crm是实现市场活动翻页查询 

    （12）crm实现bs_datetimepicker每页显示条数不变

    （13）crm实现刷新市场活动列表时保存每页显示条数不变

    （1）介绍js日历插件及其使用

     在WEB-INF下创建jsp页面，进行演示bootstrap框架的日历插件：

    引入日历插件：

     

    datetimepickertest.jsp

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%
    3.     String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    4. %>
    5. <html>
    6. <head>
    7.     <base href="<%=basePath%>">
    8.     <!--JQUERY-->
    9.     <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    10.     <!--BOOTSTRAP框架-->
    11.     <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    12.     <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    13.     <!--BOOTSTRAP_DATETIMEPICKER插件-->
    14.     <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    15.     <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    16.     <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    17.     <title>演示bs_datatimepicker插件</title>
    18. <script type="text/javascript">
    19. $(function () {
    20.     //当容器加载完成，对容器调用工具函数
    21.     $("#myDate").datetimepicker({
    22.         language:'zh-CN', //语言
    23.         format:'yyyy-mm-dd',//日期的格式
    24.         minView:'month', //可以选择的最小视图
    25.         initialDate:new Date(),//初始化显示的日期
    26.         autoclose:true,//设置选择完日期或者时间之后，日否自动关闭日历
    27.         todayBtn:true,//设置是否显示"今天"按钮,默认是false
    28.         clearBtn:true//设置是否显示"清空"按钮，默认是false
    29.     });
    30. });
    31. </script>
    32. </head>
    33. <body>
    34. <input type="text" id="myDate" readonly>
    35. </body>
    36. </html>

    访问地址： 

     （2）crm给创建市场活动添加日历功能

    在市场活动页面index.jsp，添加显示日历

     （3）分页查询市场活动需求分析

    需求： 

    当市场活动主页面加载完成之后,显示所有数据的第一页;

    用户在市场活动主页面填写查询条件,点击"查询"按钮,显示所有符合条件的数据的第一页，保持每页显示条数不变

    实现翻页功能.

        *在市场活动主页面,显示市场活动列表和记录的总条数

        *默认每页显示条数:10

     

    （4）crm分页查询市场活动实现查询市场活动列表Mapper层 

     先从底层开始写，先从市场活动接口口里面加一个方法：

     

    ActivityMapper.xml：添加sql语句

     

    1.  <!--条件分页查询市场活动的列表-->
    2.   <select id="selectActivityByConditionForPage" parameterType="map" resultMap="BaseResultMap">
    3.     select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
    4.     u2.name as create_by,a.edit_time,u3.name as edit_by
    5.     from tbl_activity a
    6.     join tbl_user u1 on a.owner=u1.id
    7.     join tbl_user u2 on a.create_by=u2.id
    8.     left join tbl_user u3 on a.edit_by=u3.id
    9.     <where>
    10.       <if test="name!=null and name!=''">
    11.         and a.name like '%' #{name} '%'
    12.       </if>
    13.       <if test="owner!=null and owner!=''">
    14.         and u1.name like '%' #{owner} '%'
    15.       </if>
    16.       <if test="startDate!=null and startDate!=''">
    17.         and a.start_date&gt;=#{startDate}
    18.       </if>
    19.       <if test="endDate!=null and endDate!=''">
    20.         and a.end_date&lt;=#{endDate}
    21.       </if>
    22.     </where>
    23.     order by a.create_time desc
    24.     limit #{beginNo},#{pageSize}
    25.   </select>

     （5）crm分页查询市场活动实现查询市场活动列表Service层 

    service包下：ActivityService接口：添加方法

    1. package com.bjpowernode.crm.workbench.service;
    2.  
    3. import com.bjpowernode.crm.workbench.domain.Activity;
    4.  
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. public interface ActivityService {
    9.     //创建保存的市场活动
    10.     int saveCreateActivity(Activity activity);
    11.  
    12.     //根据条件分页查询市场活动的列表
    13.     List queryActivityByConditionForPage(Map map);
    14.  
    15.    
    16. }

     实现类：

    1. package com.bjpowernode.crm.workbench.service.impl;
    2.  
    3. import com.bjpowernode.crm.workbench.domain.Activity;
    4. import com.bjpowernode.crm.workbench.mapper.ActivityMapper;
    5. import com.bjpowernode.crm.workbench.service.ActivityService;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.stereotype.Service;
    8.  
    9. import java.util.List;
    10. import java.util.Map;
    11.  
    12. @Service("activityService")
    13. public class ActivityServiceImpl implements ActivityService {
    14.  
    15.     @Autowired
    16.     private ActivityMapper activityMapper;
    17.  
    18.     @Override
    19.     public int saveCreateActivity(Activity activity) {
    20.         return activityMapper.insertActivity(activity);
    21.     }
    22.  
    23.     @Override
    24.     public List queryActivityByConditionForPage(Map map) {
    25.         return activityMapper.selectActivityByConditionForPage(map);
    26.     }
    27. }

    （6）crm实现查询市场活动总条数的Mapper层和Service层

    mapper包下ActivityMapper接口：

    ActivityMapper.xml：

    1. <!--根据条件查询市场活动的总条数-->
    2.   <select id="selectCountOfActivityByCondition" parameterType="map" resultType="int">
    3.     select count(*)
    4.     from tbl_activity a
    5.     join tbl_user u1 on a.owner=u1.id
    6.     join tbl_user u2 on a.create_by=u2.id
    7.     left join tbl_user u3 on a.edit_by=u3.id
    8.     <where>
    9.       <if test="name!=null and name!=''">
    10.         and a.name like '%' #{name} '%'
    11.       </if>
    12.       <if test="owner!=null and owner!=''">
    13.         and u1.name like '%' #{owner} '%'
    14.       </if>
    15.       <if test="startDate!=null and startDate!=''">
    16.         and a.start_date&gt;=#{startDate}
    17.       </if>
    18.       <if test="endDate!=null and endDate!=''">
    19.         and a.end_date&lt;=#{endDate}
    20.       </if>
    21.     </where>
    22.   </select>

     

     service包ActivityService接口：添加查询总条数方法

    1. package com.bjpowernode.crm.workbench.service;
    2.  
    3. import com.bjpowernode.crm.workbench.domain.Activity;
    4.  
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. public interface ActivityService {
    9.     //创建保存的市场活动
    10.     int saveCreateActivity(Activity activity);
    11.  
    12.     //根据条件分页查询市场活动的列表
    13.     List queryActivityByConditionForPage(Map map);
    14.  
    15.     //根据条件查询市场活动的总条数
    16.     int queryCountOfActivityByCondition(Map map);
    17.  
    18.     
    19. }

    实现类：

     （7）crm分页查询市场活动实现Controller层

    在ActivityController：中添加方法：

     （8）crm分页查询市场活动实现前台页面

    在市场活动index.jsp中添加js代码：

    先写查询总条数和显示列表的代码

    1. //收集参数
    2. 		var name=$("#query-name").val();
    3. 		var owner=$("#query-owner").val();
    4. 		var startDate=$("#query-startDate").val();
    5. 		var endDate=$("#query-endDate").val();
    6. 		//var pageNo=1;
    7. 		//var pageSize=10;
    8. 		//发送请求
    9. 		$.ajax({
    10. 			url:'workbench/activity/queryActivityByConditionForPage.do',
    11. 			data:{
    12. 				name:name,
    13. 				owner:owner,
    14. 				startDate:startDate,
    15. 				endDate:endDate,
    16. 				pageNo:pageNo,
    17. 				pageSize:pageSize
    18. 			},
    19. 			type:'post',
    20. 			dataType:'json',
    21. 			success:function (data) {
    22. 				//显示总条数
    23. 				$("#totalRowsB").text(data.totalRows);
    24. 				//显示市场活动的列表
    25. 				//遍历activityList，拼接所有行数据
    26. 				var htmlStr="";
    27. 				$.each(data.activityList,function (index,obj) {
    28. 					htmlStr+="active\">";
    29. 					htmlStr+="checkbox\" value=\""+obj.id+"\"/>";
    30. 					htmlStr+="text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detailActivity.do?id="+obj.id+"'\">"+obj.name+"";
    31. 					htmlStr+=""+obj.owner+"";
    32. 					htmlStr+=""+obj.startDate+"";
    33. 					htmlStr+=""+obj.endDate+"";
    34. 					htmlStr+="";
    35. 				});
    36. 				$("#tBody").html(htmlStr);

     

     （9）给市场活动页面的查询按钮添加点击事件

     （10）crm分析翻页功能的实现

    使用分页插件： 

     在webapp下创建paginationtest.jsp页面进行演示分页插件的使用：

    引入分页插件 

     

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%
    3.     String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    4. %>
    5. <html>
    6. <head>
    7.     <base href="<%=basePath%>">
    8.     <!--  JQUERY -->
    9.     <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    10.  
    11.     <!--  BOOTSTRAP -->
    12.     <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    13.     <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    14.  
    15.     <!--  PAGINATION plugin -->
    16.     <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    17.     <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    18.     <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    19.     <title>演示bs_pagination插件的使用</title>
    20.     <script type="text/javascript">
    21.         $(function() {
    22.  
    23.             $("#demo_pag1").bs_pagination({
    24.                 currentPage:1,//当前页号,相当于pageNo
    25.  
    26.                 rowsPerPage:10,//每页显示条数,相当于pageSize
    27.                 totalRows:1000,//总条数
    28.                 totalPages: 100,  //总页数,必填参数.
    29.  
    30.                 visiblePageLinks:5,//最多可以显示的卡片数
    31.  
    32.                 showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
    33.                 showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
    34.                 showRowsInfo:true,//是否显示记录的信息，默认true--显示
    35.  
    36.                 //用户每次切换页号，都自动触发本函数;
    37.                 //每次返回切换页号之后的pageNo和pageSize
    38.                 onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
    39.                     //js代码
    40.                     alert(pageObj.currentPage);
    41.                     alert(pageObj.rowsPerPage);
    42.                 }
    43.             });
    44.  
    45.         });
    46.     </script>
    47. </head>
    48. <body>
    49. <!--  Just create a div and give it an ID -->
    50.  
    51. <div id="demo_pag1"></div>
    52. </body>
    53. </html>

     

     

     

     

    点击3：

     

     

     分页插件：做的很好，下方的分页信息我们就不用管了，它会动态的发生改变，但是上方的列表怎样变化呢？需要自己根据分页改变后返回的pageNo和PageSize去数据库库中查看，这样我们来维护分页插件列表，插件来帮助我们来维护分页信息

    （11）crm是实现市场活动翻页查询 

    在市场活动页面index.jsp首先引入插件

     

    注释掉原来的固定的分页，创建一个div容器

     在jaax返回sucess的里面调用工具函数：

     

    1. //计算总页数
    2. 				var totalPages=1;
    3. 				//判断能否整除
    4. 				if(data.totalRows%pageSize==0){
    5. 					totalPages=data.totalRows/pageSize;
    6. 				}else{
    7. 					totalPages=parseInt(data.totalRows/pageSize)+1;
    8. 				}
    9.  
    10. 				//对容器调用bs_pagination工具函数，显示翻页信息
    11. 				$("#demo_pag1").bs_pagination({
    12. 					currentPage:pageNo,//当前页号,相当于pageNo
    13.  
    14. 					rowsPerPage:pageSize,//每页显示条数,相当于pageSize
    15. 					totalRows:data.totalRows,//总条数
    16. 					totalPages: totalPages,  //总页数,必填参数.
    17.  
    18. 					visiblePageLinks:5,//最多可以显示的卡片数
    19.  
    20. 					showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
    21. 					showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
    22. 					showRowsInfo:true,//是否显示记录的信息，默认true--显示
    23.  
    24. 					//用户每次切换页号，都自动触发本函数;
    25. 					//每次返回切换页号之后的pageNo和pageSize
    26. 					onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
    27. 						//js代码
    28. 						//alert(pageObj.currentPage);
    29. 						//alert(pageObj.rowsPerPage);
    30. 						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
    31. 					}
    32. 				});

     

    因为数据库中的数据只有3条，可以更改每页显示1条：

     

     （12）crm实现bs_datetimepicker每页显示条数不变

    当使用名称查询时点击按钮查询下方的分页显示条数发生改变变成了10条：

     更改：

     

     

    1. //给"查询"按钮添加单击事件
    2. 		$("#queryActivityBtn").click(function () {
    3. 			//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage')获取上一次的显示条数
    4. 			queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
    5. 		});

    现在按照名字查询，下方不会放生改变： 

     （13）crm实现刷新市场活动列表时保存每页显示条数不变

     测试：先让每页显示2条，当前页在第二页：

     点击创建：

    点击保存：发现跳转到第一页，显示新添加的数据，并且每页显示条数不变

     

     市场活动index.jsp目前代码：

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    3. <%
    4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    5. %>
    6. <html>
    7. <head>
    8. 	<base href="<%=basePath%>">
    9. <meta charset="UTF-8">
    10.  
    11. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    12. <link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    13.  
    14. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    15. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    16. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    17. <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    18. <!--  PAGINATION plugin -->
    19. <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    20. <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    21. <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    22.  
    23. <script type="text/javascript">
    24.  
    25. 	$(function(){
    26. 		//给"创建"按钮添加单击事件
    27. 		$("#createActivityBtn").click(function () {
    28. 			//初始化工作
    29. 			//重置表单
    30. 			$("#createActivityForm").get(0).reset();
    31.  
    32. 			//弹出创建市场活动的模态窗口
    33. 			$("#createActivityModal").modal("show");
    34. 		});
    35.  
    36. 		//给"保存"按钮添加单击事件
    37. 		$("#saveCreateActivityBtn").click(function () {
    38. 			//收集参数
    39. 			var owner=$("#create-marketActivityOwner").val();
    40. 			var name=$.trim($("#create-marketActivityName").val());
    41. 			var startDate=$("#create-startDate").val();
    42. 			var endDate=$("#create-endDate").val();
    43. 			var cost=$.trim($("#create-cost").val());
    44. 			var description=$.trim($("#create-description").val());
    45. 			//表单验证
    46. 			if(owner==""){
    47. 				alert("所有者不能为空");
    48. 				return;
    49. 			}
    50. 			if(name==""){
    51. 				alert("名称不能为空");
    52. 				return;
    53. 			}
    54. 			if(startDate!=""&&endDate!=""){
    55. 				//使用字符串的大小代替日期的大小
    56. 				if(endDate<startDate){
    57. 					alert("结束日期不能比开始日期小");
    58. 					return;
    59. 				}
    60. 			}
    61. 			/*
    62. 			  正则表达式：
    63. 			     1，语言，语法：定义字符串的匹配模式，可以用来判断指定的具体字符串是否符合匹配模式。
    64. 			     2,语法通则：
    65. 			       1)//:在js中定义一个正则表达式.  var regExp=/...../;
    66. 			       2)^：匹配字符串的开头位置
    67. 			         $: 匹配字符串的结尾
    68. 			       3)[]:匹配指定字符集中的一位字符。 var regExp=/^[abc]$/;
    69. 			                                    var regExp=/^[a-z0-9]$/;
    70. 			       4){}:匹配次数.var regExp=/^[abc]{5}$/;
    71. 			            {m}:匹配m此
    72. 			            {m,n}：匹配m次到n次
    73. 			            {m,}：匹配m次或者更多次
    74. 			       5)特殊符号：
    75. 			         \d:匹配一位数字，相当于[0-9]
    76. 			         \D:匹配一位非数字
    77. 			         \w：匹配所有字符，包括字母、数字、下划线。
    78. 			         \W:匹配非字符，除了字母、数字、下划线之外的字符。
    79.  
    80. 			         *:匹配0次或者多次，相当于{0,}
    81. 			         +:匹配1次或者多次，相当于{1,}
    82. 			         ?:匹配0次或者1次，相当于{0,1}
    83. 			 */
    84. 			var regExp=/^(([1-9]\d*)|0)$/;
    85. 			if(!regExp.test(cost)){
    86. 				alert("成本只能为非负整数");
    87. 				return;
    88. 			}
    89. 			//发送请求
    90. 			$.ajax({
    91. 				url:'workbench/activity/saveCreateActivity.do',
    92. 				data:{
    93. 					owner:owner,
    94. 					name:name,
    95. 					startDate:startDate,
    96. 					endDate:endDate,
    97. 					cost:cost,
    98. 					description:description
    99. 				},
    100. 				type:'post',
    101. 				dataType:'json',
    102. 				success:function (data) {
    103. 					if(data.code=="1"){
    104. 						//关闭模态窗口
    105. 						$("#createActivityModal").modal("hide");
    106. 						//刷新市场活动列，显示第一页数据，保持每页显示条数不变
    107. 						queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
    108. 					}else{
    109. 						//提示信息
    110. 						alert(data.message);
    111. 						//模态窗口不关闭
    112. 						$("#createActivityModal").modal("show");//可以不写。
    113. 					}
    114. 				}
    115. 			});
    116. 		});
    117.  
    118. 		//当容器加载完成之后，对容器调用工具函数  显示日历
    119. 		//$("input[name='mydate']").datetimepicker({
    120. 		$(".mydate").datetimepicker({
    121. 			language:'zh-CN', //语言
    122. 			format:'yyyy-mm-dd',//日期的格式
    123. 			minView:'month', //可以选择的最小视图
    124. 			initialDate:new Date(),//初始化显示的日期
    125. 			autoclose:true,//设置选择完日期或者时间之后，日否自动关闭日历
    126. 			todayBtn:true,//设置是否显示"今天"按钮,默认是false
    127. 			clearBtn:true//设置是否显示"清空"按钮，默认是false
    128. 		});
    129.  
    130. 		//当市场活动主页面加载完成，查询所有数据的第一页以及所有数据的总条数,默认每页显示10条
    131. 		queryActivityByConditionForPage(1,10);
    132.  
    133. 		//给"查询"按钮添加单击事件
    134. 		$("#queryActivityBtn").click(function () {
    135. 			//查询所有符合条件数据的第一页以及所有符合条件数据的总条数;$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage')获取上一次的显示条数
    136. 			queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
    137. 		});
    138. 	});
    139.  
    140.  
    141. 	//定义函数进行查询
    142. 	function queryActivityByConditionForPage(pageNo,pageSize) {
    143. 		//收集参数
    144. 		var name=$("#query-name").val();
    145. 		var owner=$("#query-owner").val();
    146. 		var startDate=$("#query-startDate").val();
    147. 		var endDate=$("#query-endDate").val();
    148. 		//var pageNo=1;
    149. 		//var pageSize=10;
    150. 		//发送请求
    151. 		$.ajax({
    152. 			url:'workbench/activity/queryActivityByConditionForPage.do',
    153. 			data:{
    154. 				name:name,
    155. 				owner:owner,
    156. 				startDate:startDate,
    157. 				endDate:endDate,
    158. 				pageNo:pageNo,
    159. 				pageSize:pageSize
    160. 			},
    161. 			type:'post',
    162. 			dataType:'json',
    163. 			success:function (data) {
    164. 				//显示总条数
    165. 				//$("#totalRowsB").text(data.totalRows);
    166. 				//显示市场活动的列表
    167. 				//遍历activityList，拼接所有行数据
    168. 				var htmlStr="";
    169. 				$.each(data.activityList,function (index,obj) {
    170. 					htmlStr+="active\">";
    171. 					htmlStr+="checkbox\" value=\""+obj.id+"\"/>";
    172. 					htmlStr+="text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detailActivity.do?id="+obj.id+"'\">"+obj.name+"";
    173. 					htmlStr+=""+obj.owner+"";
    174. 					htmlStr+=""+obj.startDate+"";
    175. 					htmlStr+=""+obj.endDate+"";
    176. 					htmlStr+="";
    177. 				});
    178. 				$("#tBody").html(htmlStr);
    179.  
    180. 				//取消"全选"按钮
    181. 				$("#chckAll").prop("checked",false);
    182.  
    183. 				//计算总页数
    184. 				var totalPages=1;
    185. 				//判断能否整除
    186. 				if(data.totalRows%pageSize==0){
    187. 					totalPages=data.totalRows/pageSize;
    188. 				}else{
    189. 					totalPages=parseInt(data.totalRows/pageSize)+1;
    190. 				}
    191.  
    192. 				//对容器调用bs_pagination工具函数，显示翻页信息
    193. 				$("#demo_pag1").bs_pagination({
    194. 					currentPage:pageNo,//当前页号,相当于pageNo
    195.  
    196. 					rowsPerPage:pageSize,//每页显示条数,相当于pageSize
    197. 					totalRows:data.totalRows,//总条数
    198. 					totalPages: totalPages,  //总页数,必填参数.
    199.  
    200. 					visiblePageLinks:5,//最多可以显示的卡片数
    201.  
    202. 					showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
    203. 					showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
    204. 					showRowsInfo:true,//是否显示记录的信息，默认true--显示
    205.  
    206. 					//用户每次切换页号，都自动触发本函数;
    207. 					//每次返回切换页号之后的pageNo和pageSize
    208. 					onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
    209. 						//js代码
    210. 						//alert(pageObj.currentPage);
    211. 						//alert(pageObj.rowsPerPage);
    212. 						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
    213. 					}
    214. 				});
    215. 			}
    216. 		});
    217. 	}
    218.  
    219. </script>
    220. </head>
    221. <body>
    222.  
    223. 	<!-- 创建市场活动的模态窗口 -->
    224. 	<div class="modal fade" id="createActivityModal" role="dialog">
    225. 		<div class="modal-dialog" role="document" style="width: 85%;">
    226. 			<div class="modal-content">
    227. 				<div class="modal-header">
    228. 					<button type="button" class="close" data-dismiss="modal">
    229. 						<span aria-hidden="true">×</span>
    230. 					</button>
    231. 					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
    232. 				</div>
    233. 				<div class="modal-body">
    234.  
    235. 					<form id="createActivityForm" class="form-horizontal" role="form">
    236.  
    237. 						<div class="form-group">
    238. 							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
    239. 							<div class="col-sm-10" style="width: 300px;">
    240. 								<select class="form-control" id="create-marketActivityOwner">
    241. 									<c:forEach items="${userList}" var="u">
    242. 										<option value="${u.id}">${u.name}</option>
    243. 									</c:forEach>
    244. 								</select>
    245. 							</div>
    246.                             <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
    247.                             <div class="col-sm-10" style="width: 300px;">
    248.                                 <input type="text" class="form-control" id="create-marketActivityName">
    249.                             </div>
    250. 						</div>
    251.  
    252. 						<div class="form-group">
    253. 							<label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
    254. 							<div class="col-sm-10" style="width: 300px;">
    255. 								<input type="text" class="form-control mydate" name="mydate" id="create-startDate" readonly>
    256. 							</div>
    257. 							<label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
    258. 							<div class="col-sm-10" style="width: 300px;">
    259. 								<input type="text" class="form-control mydate" name="mydate " id="create-endDate" readonly>
    260. 							</div>
    261. 						</div>
    262.                         <div class="form-group">
    263.  
    264.                             <label for="create-cost" class="col-sm-2 control-label">成本</label>
    265.                             <div class="col-sm-10" style="width: 300px;">
    266.                                 <input type="text" class="form-control" id="create-cost">
    267.                             </div>
    268.                         </div>
    269. 						<div class="form-group">
    270. 							<label for="create-description" class="col-sm-2 control-label">描述</label>
    271. 							<div class="col-sm-10" style="width: 81%;">
    272. 								<textarea class="form-control" rows="3" id="create-description"></textarea>
    273. 							</div>
    274. 						</div>
    275.  
    276. 					</form>
    277.  
    278. 				</div>
    279. 				<div class="modal-footer">
    280. 					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    281. 					<button type="button" class="btn btn-primary" ID="saveCreateActivityBtn">保存</button>
    282. 				</div>
    283. 			</div>
    284. 		</div>
    285. 	</div>
    286.  
    287. 	<!-- 修改市场活动的模态窗口 -->
    288. 	<div class="modal fade" id="editActivityModal" role="dialog">
    289. 		<div class="modal-dialog" role="document" style="width: 85%;">
    290. 			<div class="modal-content">
    291. 				<div class="modal-header">
    292. 					<button type="button" class="close" data-dismiss="modal">
    293. 						<span aria-hidden="true">×</span>
    294. 					</button>
    295. 					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
    296. 				</div>
    297. 				<div class="modal-body">
    298.  
    299. 					<form class="form-horizontal" role="form">
    300.  
    301. 						<div class="form-group">
    302. 							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
    303. 							<div class="col-sm-10" style="width: 300px;">
    304. 								<select class="form-control" id="edit-marketActivityOwner">
    305. 									<c:forEach items="${userList}" var="u">
    306. 										<option value="${u.id}">${u.name}</option>
    307. 									</c:forEach>
    308. 								</select>
    309. 							</div>
    310.                             <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
    311.                             <div class="col-sm-10" style="width: 300px;">
    312.                                 <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
    313.                             </div>
    314. 						</div>
    315.  
    316. 						<div class="form-group">
    317. 							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
    318. 							<div class="col-sm-10" style="width: 300px;">
    319. 								<input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
    320. 							</div>
    321. 							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
    322. 							<div class="col-sm-10" style="width: 300px;">
    323. 								<input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
    324. 							</div>
    325. 						</div>
    326.  
    327. 						<div class="form-group">
    328. 							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
    329. 							<div class="col-sm-10" style="width: 300px;">
    330. 								<input type="text" class="form-control" id="edit-cost" value="5,000">
    331. 							</div>
    332. 						</div>
    333.  
    334. 						<div class="form-group">
    335. 							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
    336. 							<div class="col-sm-10" style="width: 81%;">
    337. 								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
    338. 							</div>
    339. 						</div>
    340.  
    341. 					</form>
    342.  
    343. 				</div>
    344. 				<div class="modal-footer">
    345. 					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    346. 					<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
    347. 				</div>
    348. 			</div>
    349. 		</div>
    350. 	</div>
    351.  
    352. 	<!-- 导入市场活动的模态窗口 -->
    353.     <div class="modal fade" id="importActivityModal" role="dialog">
    354.         <div class="modal-dialog" role="document" style="width: 85%;">
    355.             <div class="modal-content">
    356.                 <div class="modal-header">
    357.                     <button type="button" class="close" data-dismiss="modal">
    358.                         <span aria-hidden="true">×</span>
    359.                     </button>
    360.                     <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
    361.                 </div>
    362.                 <div class="modal-body" style="height: 350px;">
    363.                     <div style="position: relative;top: 20px; left: 50px;">
    364.                         请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
    365.                     </div>
    366.                     <div style="position: relative;top: 40px; left: 50px;">
    367.                         <input type="file" id="activityFile">
    368.                     </div>
    369.                     <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
    370.                         <h3>重要提示</h3>
    371.                         <ul>
    372.                             <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
    373.                             <li>给定文件的第一行将视为字段名。</li>
    374.                             <li>请确认您的文件大小不超过5MB。</li>
    375.                             <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
    376.                             <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
    377.                             <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
    378.                             <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
    379.                         </ul>
    380.                     </div>
    381.                 </div>
    382.                 <div class="modal-footer">
    383.                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    384.                     <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
    385.                 </div>
    386.             </div>
    387.         </div>
    388.     </div>
    389.  
    390.  
    391. 	<div>
    392. 		<div style="position: relative; left: 10px; top: -10px;">
    393. 			<div class="page-header">
    394. 				<h3>市场活动列表</h3>
    395. 			</div>
    396. 		</div>
    397. 	</div>
    398. 	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    399. 		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
    400.  
    401. 			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
    402. 				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
    403.  
    404. 				  <div class="form-group">
    405. 				    <div class="input-group">
    406. 				      <div class="input-group-addon">名称</div>
    407. 				      <input class="form-control" type="text" id="query-name">
    408. 				    </div>
    409. 				  </div>
    410.  
    411. 				  <div class="form-group">
    412. 				    <div class="input-group">
    413. 				      <div class="input-group-addon">所有者</div>
    414. 				      <input class="form-control" type="text" id="query-owner">
    415. 				    </div>
    416. 				  </div>
    417.  
    418.  
    419. 				  <div class="form-group">
    420. 				    <div class="input-group">
    421. 				      <div class="input-group-addon">开始日期</div>
    422. 					  <input class="form-control" type="text" id="query-startDate" />
    423. 				    </div>
    424. 				  </div>
    425. 				  <div class="form-group">
    426. 				    <div class="input-group">
    427. 				      <div class="input-group-addon">结束日期</div>
    428. 					  <input class="form-control" type="text" id="query-endDate">
    429. 				    </div>
    430. 				  </div>
    431.  
    432. 				  <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
    433.  
    434. 				</form>
    435. 			</div>
    436. 			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
    437. 				<div class="btn-group" style="position: relative; top: 18%;">
    438. 				  <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
    439. 				  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
    440. 				  <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
    441. 				</div>
    442. 				<div class="btn-group" style="position: relative; top: 18%;">
    443.                     <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
    444.                     <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
    445.                     <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
    446.                 </div>
    447. 			</div>
    448. 			<div style="position: relative;top: 10px;">
    449. 				<table class="table table-hover">
    450. 					<thead>
    451. 						<tr style="color: #B3B3B3;">
    452. 							<td><input type="checkbox" /></td>
    453. 							<td>名称</td>
    454.                             <td>所有者</td>
    455. 							<td>开始日期</td>
    456. 							<td>结束日期</td>
    457. 						</tr>
    458. 					</thead>
    459. 					<tbody id="tBody">
    460. 						<%--<tr class="active">
    461. 							<td><input type="checkbox" /></td>
    462. 							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
    463.                             <td>zhangsan</td>
    464. 							<td>2020-10-10</td>
    465. 							<td>2020-10-20</td>
    466. 						</tr>
    467.                         <tr class="active">
    468.                             <td><input type="checkbox" /></td>
    469.                             <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
    470.                             <td>zhangsan</td>
    471.                             <td>2020-10-10</td>
    472.                             <td>2020-10-20</td>
    473.                         </tr>--%>
    474. 					</tbody>
    475. 				</table>
    476. 				<%--分页--%>
    477. 				<div id="demo_pag1"></div>
    478. 			</div>
    479.  
    480. 			<%--<div style="height: 50px; position: relative;top: 30px;">
    481. 				<div>
    482. 					<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
    483. 				</div>
    484. 				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
    485. 					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
    486. 					<div class="btn-group">
    487. 						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    488. 							10
    489. 							<span class="caret"></span>
    490. 						</button>
    491. 						<ul class="dropdown-menu" role="menu">
    492. 							<li><a href="#">20</a></li>
    493. 							<li><a href="#">30</a></li>
    494. 						</ul>
    495. 					</div>
    496. 					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
    497. 				</div>
    498. 				<div style="position: relative;top: -88px; left: 285px;">
    499. 					<nav>
    500. 						<ul class="pagination">
    501. 							<li class="disabled"><a href="#">首页</a></li>
    502. 							<li class="disabled"><a href="#">上一页</a></li>
    503. 							<li class="active"><a href="#">1</a></li>
    504. 							<li><a href="#">2</a></li>
    505. 							<li><a href="#">3</a></li>
    506. 							<li><a href="#">4</a></li>
    507. 							<li><a href="#">5</a></li>
    508. 							<li><a href="#">下一页</a></li>
    509. 							<li class="disabled"><a href="#">末页</a></li>
    510. 						</ul>
    511. 					</nav>
    512. 				</div>
    513. 			</div>--%>
    514.  
    515.  
    516. 		</div>
    517.  
    518. 	</div>
    519. </body>
    520. </html>

  • 相关阅读:
    多线程《1》JMM基础知识---volatile的可见性和一致性
    BioVendor sRAGE Elisa试剂盒测试原理和注意事项
    蓝桥杯刷题--python-12
    性能测试监控指标及分析调优 | 京东云技术团队
    ts重点学习109-枚举类型的兼容性
    牛客NC233 加起来和为目标值的组合(四)【中等 DFS C++、Java、Go、PHP】
    Istio服务网格进阶⑦：Istio流量治理之故障注入与重试
    http接口自动化测试框架实现
    十几年Java“老油条”，教你如何才能把Java学好学透彻
    windows 系统下 workerman 在同一个运行窗口中开启多个 websocket 服务
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/127022324