|
假设实际table表格是这样:
对应的代码就是:
名称
所有者
开始日期
结束日期
其中tbody标签中的内容是被注释掉的,因为这部分数据是需要从数据库查询出来然后动态显示的.
技术上来讲就是我们从后台拿到10条数据,返回一个map集合,集合里面是一个list集合,通过ajax技术将返回结果,jquery.each()方法循环遍历拼接成html代码显示到页面上.
$(function(){
queryActivityByConditionForPage(pageNo,pageSize);
}
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数(这里的参数是指页面输入框查询条件的内容)
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList，拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="";
htmlStr+="";
htmlStr+=""+obj.name+"";
htmlStr+=""+obj.owner+"";
htmlStr+=""+obj.startDate+"";
htmlStr+=""+obj.endDate+"";
htmlStr+="";
});
$("#tBody").html(htmlStr);
}
});
}
附上学习过的这个页面完整的代码:需要用的时候可以研究一下,包含以下截图中的大部分内容.
$(function(){
//给"创建"按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
//重置表单
//$("#createActivityForm").get(0) //是jquery对象转换成dom对象
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给"保存"按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startDate").val();
var endDate=$("#create-endDate").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-description").val());
//表单验证
if(owner==""){
alert("所有者不能为空");
return;
}
if(name==""){
alert("名称不能为空");
return;
}
if(startDate!=""&&endDate!=""){
//使用字符串的大小代替日期的大小
if(endDate1){
alert("每次只能修改一条市场活动");
return;
}
//var id=chkedIds.val();
//var id=chkedIds.get(0).value;
var id=chkedIds[0].value;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityById.do',
data:{
id:id
},
type:'post',
dataType:'json',
success:function (data) {
//把市场活动的信息显示在修改的模态窗口上
$("#edit-id").val(data.id);
$("#edit-marketActivityOwner").val(data.owner);
$("#edit-marketActivityName").val(data.name);
$("#edit-startTime").val(data.startDate);
$("#edit-endTime").val(data.endDate);
$("#edit-cost").val(data.cost);
$("#edit-description").val(data.description);
//弹出模态窗口
$("#editActivityModal").modal("show");
}
});
});
//给"更新"按钮添加单击事件
$("#saveEditActivityBtn").click(function () {
//收集参数
var id=$("#edit-id").val();
var owner=$("#edit-marketActivityOwner").val();
var name=$.trim($("#edit-marketActivityName").val());
var startDate=$("#edit-startTime").val();
var endDate=$("#edit-endTime").val();
var cost=$.trim($("#edit-cost").val());
var description=$.trim($("#edit-description").val());
//表单验证(作业)
//发送请求
$.ajax({
url:'workbench/activity/saveEditActivity.do',
data:{
id:id,
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//关闭模态窗口
$("#editActivityModal").modal("hide");
//刷新市场活动列表,保持页号和每页显示条数都不变
queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'),$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#editActivityModal").modal("show");
}
}
});
});
//给"批量导出"按钮添加单击事件
$("#exportActivityAllBtn").click(function () {
//发送同步请求
window.location.href="workbench/activity/exportAllActivitys.do";
});
//给"导入"按钮添加单击事件
$("#importActivityBtn").click(function () {
//收集参数
var activityFileName=$("#activityFile").val();
var suffix=activityFileName.substr(activityFileName.lastIndexOf(".")+1).toLocaleLowerCase();//xls,XLS,Xls,xLs,....
if(suffix!="xls"){
alert("只支持xls文件");
return;
}
var activityFile=$("#activityFile")[0].files[0];
if(activityFile.size>5*1024*1024){
alert("文件大小不超过5MB");
return;
}
//FormData是ajax提供的接口,可以模拟键值对向后台提交参数;
//FormData最大的优势是不但能提交文本数据，还能提交二进制数据
var formData=new FormData();
formData.append("activityFile",activityFile);
formData.append("userName","张三");
//发送请求
$.ajax({
url:'workbench/activity/importActivity.do',
data:formData,
processData:false,//设置ajax向后台提交参数之前，是否把参数统一转换成字符串：true--是,false--不是,默认是true
contentType:false,//设置ajax向后台提交参数之前，是否把所有的参数统一按urlencoded编码：true--是,false--不是，默认是true
type:'post',
dataType:'json',
success:function (data) {
if(data.code=="1"){
//提示成功导入记录条数
alert("成功导入"+data.retData+"条记录");
//关闭模态窗口
$("#importActivityModal").modal("hide");
//刷新市场活动列表,显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));
}else{
//提示信息
alert(data.message);
//模态窗口不关闭
$("#importActivityModal").modal("show");
}
}
});
});
});
function queryActivityByConditionForPage(pageNo,pageSize) {
//收集参数
var name=$("#query-name").val();
var owner=$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//var pageNo=1;
//var pageSize=10;
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type:'post',
dataType:'json',
success:function (data) {
//显示总条数
//$("#totalRowsB").text(data.totalRows);
//显示市场活动的列表
//遍历activityList，拼接所有行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="";
htmlStr+="";
htmlStr+=""+obj.name+"";
htmlStr+=""+obj.owner+"";
htmlStr+=""+obj.startDate+"";
htmlStr+=""+obj.endDate+"";
htmlStr+="";
});
$("#tBody").html(htmlStr);
//取消"全选"按钮
$("#chckAll").prop("checked",false);
//计算总页数
var totalPages=1;
if(data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else{
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数，显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号,相当于pageNo
rowsPerPage:pageSize,//每页显示条数,相当于pageSize
totalRows:data.totalRows,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks:5,//最多可以显示的卡片数
showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo:true,//是否显示记录的信息，默认true--显示
//用户每次切换页号，都自动触发本函数;
//每次返回切换页号之后的pageNo和pageSize
onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
//js代码
//alert(pageObj.currentPage);
//alert(pageObj.rowsPerPage);
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
×
创建市场活动
所有者*
${u.name}
名称*
开始日期
结束日期
成本
描述
关闭
保存
×
修改市场活动
所有者*
${u.name}
名称*
开始日期
结束日期
成本
描述
市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等
关闭
更新
×
导入市场活动
请选择要上传的文件：[仅支持.xls]
重要提示
操作仅针对Excel，仅支持后缀名为XLS的文件。
给定文件的第一行将视为字段名。
请确认您的文件大小不超过5MB。
日期值以文本形式保存，必须符合yyyy-MM-dd格式。
日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。
默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。
建议您在导入真实数据之前用测试文件测试文件导入功能。
关闭
导入
市场活动列表
名称
所有者
开始日期
结束日期
查询
创建
修改
删除
上传列表数据（导入）
下载列表数据（批量导出）
下载列表数据（选择导出）
名称
所有者
开始日期
结束日期
|