界面加载完后，数据都为静态，如果需要局部刷新页面部分模块，使用ajax加载，然后动态拼接到界面，这种实现大部分时间能够实现。但是，最主要的需要静态刷新的是界面表格的刷新。推荐使用下面的两种方式
一、使用tmpl
在 https://github.com/BorisMoore/jquery-tmpl 下载 jquery.tmpl.min.js 导入项目，目前已上传至"文件"
1、导入js
<script type="text/javascript" src="<%=basePath %>js/common/jquery.tmpl.min.js"></script>2、jsp界面定义表格：tbody定义id，用于template添加
<table>
<!-- 表头（列名） -->
<tr>
<td> ... </td>
...
</tr>
<tbody id="tableTemple">
<!-- 通过id将决赛中的模板拼接到 tbody 上 -->
</tbody>
</table>3、单独定义一个js，用于拼接模板
<script id="dataTemplate" type="text/x-jquery-tmpl"> <！-- id用来绑定 -->
{{each(i,detailList) msg}} //定义详见 c
<tr class="(i+1)%2==1?'':'grey'"> //判断单双行，区别显示不同的样式
<td>{{= i+1}}</td> //显示行号
<td>{{= detailList.investor}}</td>
<td>{{= detailList.roleType}}</td>
<td>{{= detailList.isLeadInvestor}}</td>
<td>{{= detailList.investorAmount}}</td>
<td>{{= detailList.paymentRate}}</td>
<td>{{= detailList.backAmount}}</td>
<td>{{= detailList.status}}</td>
</tr>
{{/each}}
</script>4、拼接模板到表格
两种情况：a、第一次加载界面时使用模板，第一步不查询，加载界面的时候异步请求
b、第一次加载结束后，分页跳转或者带条件查询
<script>
//界面加载时调用
$(function(){
addData();
})
//调用ajax查询
function addData(){
$.ajax({
url:'',
data:'',
type:'post'
success: function(data){
//返回实体为json，结构为 data.data.pageResult.list[]
$('#tableTemple').empty(); //清空表格tbody
$('#dataTemplate').tmpl({msg,data.data.pageResult})
.appendTo('#tableTemple') //绑定
},
});
}
</script>list集合添加别名
$('#dataTemplate').tmpl({msg,data.data.pageResult.list})
{{each(i,detailList) msg}}
<tr>
<td>{{= i+1}}</td>
...
</tr>
{{/each}}list集合不添加别名
$('#dataTemplate').tmpl(data.data.pageResult)
{{each(i,detailList) list}}
<tr>
<td>{{= i+1}}</td>
...
</tr>
{{/each}}
二、表格部分使用单独的界面，然后include
原理：1、分别创建index.jsp和list.jsp，index.jsp为全部展示界面，list.jsp主要放表格部分，index.jsp中include界面list.jsp
2、在controller中写一个单独查询数据的方法 getPage（参数...），参数接收包含 查询条件、分页信息；
3、第一次跳转，界面指向 index.jsp，需要包含 getPage（）；
4、接下来 查询条件、分页跳转指向 list.jsp
index.jsp
<!DOCTYPE html>
<%@ page pageEncoding="UTF-8" %>
<%@ include file="../common/global.jsp" %>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>${PU_TITLE}</title>
</head>
<body class="page-header-fixed">
<%@ include file="../common/header.jsp" %>
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<%@ include file="../common/left.jsp" %>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper page_change">
<div class="page-content">
<!-- BEGIN DASHBOARD STATS -->
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="portlet box light-white">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-film"></i><span class="break"></span>
发布编辑员管理 > 编辑员管理
</div>
</div>
<div id="sample_1_wrapper" class="dataTables_wrapper" role="grid">
<div class="row">
<div class="col-md-12">
<form id="param_search_form" data-url="${BASE }/sys/editor/editor/list">
<div style="width: 98%;float:left;">
<label>名称:
<input type="text" name="loginName" aria-controls="sample_1" class="form-control input-inline" style="width:170px;">
</label>
<label>编辑组:
<select id="groupId" name="groupId" style="width:80px;height:33px;border:1px solid #E5E5E5;">
<option value="" >全部</option>
<c:forEach items="${GroupNameEnums}" var="o">
<option value="${o.id }" >${o.groupName }</option>
</c:forEach>
</select>
</label>
<label>状态:
<select id="status" name="status" style="width:80px;height:33px;border:1px solid #E5E5E5;">
<option value="" >全部</option>
<c:forEach items="${OperatorPropStatusEnums}" var="o">
<option value="${o.id }" >${o.name }</option>
</c:forEach>
</select>
</label>
<button type="button" id="sample_editable_4_new" class="btn light blue param_list_query">
<!-- 搜索查询 --> 查询<i class="fa fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<div id="data_list">
<%@ include file="editor_list.jsp" %>
</div>
</div>
</div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
</div>
</div>
<!-- END DASHBOARD STATS -->
<div class="clearfix">
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<%@ include file="../common/footer.jsp" %>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<%@ include file="../common/script.jsp" %>
<script src="${BASE}/www/lib/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="${BASE}/www/js/commonPage.js" type="text/javascript"></script>
<script src="${BASE}/www/js/user/user.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
App.init(); // initlayout and core plugins
$("#ext-diction-insert").click(function(){
Guduo.showZDialog("${BASE }/sys/editor/editor/addUI", 850, 600)
});
});
var _sysPms = {
editUI : function(url){
Guduo.showZDialog(url,850,600);
},
edit : function(){
$('#edit_form').ajaxForm({
type: 'post',
url: $("#edit_form").data("url"),
dataType: 'html',
beforeSubmit: function() {
return $('#edit_form').validationEngine('validate',{
promptPosition:"topLeft",
scroll:false
});
},
success: function(res) {
if(res=="SUCCESS"){
showInfo("修改成功!",function(){parent.location.reload()});
}else{
showInfo(res);
}
}
});
},
del : function(param){
array = param.split(",");
if (array[1] > 0) {
//利用对话框返回的值 （true 或者 false）
if (confirm("用户有未完成任务"+ array[1] +"个，确定要删除吗？")) {
$.ajax({
type : 'post',
url : '${BASE }/sys/editor/editor/del',
data : {
"userId" : array[0]
},
success : function(res) {
if (res == "SUCCESS") {
showInfo("删除成功", function() {
parent.location.reload();
});
} else if (res == "FALSE") {
showInfo("删除失败", function() {
parent.location.reload();
});
} else {
alert(res);
}
}
});
}
} else {
if (confirm("您确定删除此项")) {
$.ajax({
type : 'post',
url : '${BASE }/sys/editor/editor/del',
data : {
"userId" : array[0]
},
success : function(res) {
if (res == "SUCCESS") {
showInfo("删除成功", function() {
parent.location.reload();
});
} else if (res == "FALSE") {
showInfo("删除失败", function() {
parent.location.reload();
});
} else {
alert(res);
}
}
});
}
}
}
}
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>list.jsp
<%@ page pageEncoding="UTF-8" %>
<%@ include file="../common/global.jsp" %>
<c:set var="pageList" value="${page.recordList}"/>
<div class="table-scrollable">
<table class="table table-striped table-bordered table-hover dataTable" id="sample_1" aria-describedby="sample_1_info">
<thead>
<tr>
<!-- <th class="table-checkbox" style="text-align:center; width: 23px;">
<div class="checker"><span><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"></span></div>
</th> -->
<th style="text-align:center; width: 23px;">
<!-- 序号 -->序号
</th>
<th style="text-align:center; width: 100px;">
操作
</th>
<th style="text-align:center; width: 100px;">
编辑员
</th>
<th style="text-align:center; width: 100px;">
姓名
</th>
<th style="text-align:center; width: 100px;">
任务数量
</th>
<th style="text-align:center; width: 100px;">
所属编辑组
</th>
<th style="text-align:center; width: 100px;">
状态
</th>
<th style="text-align:center; width: 100px;">
组长
</th>
<th style="text-align:center; width: 150px;">
创建时间
</th>
</tr>
</thead>
<tbody>
<c:forEach var="data" items="${pageList}" varStatus="i">
<tr class="gradeX odd">
<%-- <td style="text-align:center">
<div class="checker"><span><input type="checkbox" class="checkboxes" value="${data.id}"></span></div>
</td> --%>
<td style="text-align:center">${(page.currentPage-1)*page.numPerPage + i.count}</td>
<td style="text-align:center">
<z:permission value="pms:editor:edit">
<a href="#" onclick="_sysPms.editUI('${BASE }/sys/editor/editor/editUI?userId=${data.id}','修改')" style="color:blue"> 修改 </a>
</z:permission>
<z:permission value="pms:editor:del">
<c:if test="${data.id != data.groupLeaderId}">
| <a href="#" onclick="_sysPms.del('${data.id},${data.task}')" style="color:blue"> 删除 </a>
</c:if>
</z:permission>
<z:permission value="pms:editor:accept">
<c:if test="${data.distributionStatus == 2}">
| <a href="#" onclick="Guduo.buttonCommon('${BASE }/sys/editor/editor/accept?userId=${data.id}','接受')" style="color:blue"> 接受 </a>
</c:if>
</z:permission>
<z:permission value="pms:editor:stop">
<c:if test="${data.distributionStatus == 1}">
| <a href="#" onclick="Guduo.buttonCommon('${BASE }/sys/editor/editor/stop?userId=${data.id}','停止')" style="color:blue"> 停止 </a>
</c:if>
</z:permission>
</td>
<td style="text-align:center">${data.loginName }</td>
<td style="text-align:center">${data.realName }</td>
<td style="text-align:center">${data.task }</td>
<td style="text-align:center">${data.groupName }</td>
<td style="text-align:center">
<c:forEach items="${OperatorPropStatusEnums}" var="e">
<c:if test="${data.distributionStatus ne null and data.distributionStatus eq e.id}">${e.name}</c:if>
</c:forEach>
</td>
<td style="text-align:center">${data.userName}</td>
<td style="text-align:center"><f:formatDate value="${data.createTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<tag:pager_backstage id="list_page" pager="${page}"/>
Controller
/*
* 进入查询页面
*/
@RequestMapping("/index")
public ModelAndView index(Model model) {
getPage(model);
return new ModelAndView("/editor/index");
}
@RequestMapping("/list")
public ModelAndView list(Model model) {
model.addAttribute("bsMenu", "sys.editor.editor");
getPage(model);
return new ModelAndView("/editor/list");
}
/*
* 分页查询列表
*/
public void getPage(Model model) {
try{
Map<String, Object> paramMap=new HashMap<String, Object>();// 业务条件查询参数
String loginName = getString("loginName");//登录名称
String groupId = getString("groupId");//组名
String status = getString("status");//状态（1：接收分配，2：停止分配）
if(StringUtils.isNotBlank(loginName)){
paramMap.put("loginName", loginName);
}
if(StringUtils.isNotBlank(groupId)){
paramMap.put("groupId", groupId);
}
if(StringUtils.isNotBlank(status)){
paramMap.put("status", status);
}
super.pageBean = userEditorgroupRelationService.editorlistPage(getPageParam(), paramMap);
//组查询条件
Map<String, Object> parameter = new HashMap<String, Object>();
parameter.put("flag", "0");//删除标志（0：启用，1：删除）
List<EditorGroup> groupList = editorGroupService.findEditorGroup(parameter);
model.addAttribute("page",pageBean);
model.addAttribute("param",paramMap); // 回显查询条件值
model.addAttribute("OperatorPropStatusEnums", OperatorPropStatusEnum.values());
model.addAttribute("GroupNameEnums", groupList);
}catch(Exception e){
e.printStackTrace();
// log.error("==> list exception",e);
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
