局部更新"/>
Beetl 提供俩种方式来显示实现局部更新
2019独角兽企业重金招聘Python工程师标准>>>
提供俩种方式来显示用户列表
第一种采用beetl-ajax,进入该页面能立即看到第一页数据，下一页后异步加载html片段
第二种采用经典的json方式，进入该页面后，发起ajax请求，异步加载第一页数据。下一页后异步加载json数据再用JS转成html片段
代码在:
性能测试感觉差不多，至于开发效率，我更喜欢beetl-ajax 这种模板引擎占主导方式（我不喜欢太多的js）
<html>
<head>
<script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script>
<script src="${ctxPath}/resource/js/time.js"></script>
<script>
$(document).ready(function(){loadTable(1);$(document).on('click','.page',function(){var action = $(this).html();var current = parseInt($("#current").html());var page = current;if(action=="next"){page++;}else{page--;}loadTable(page);});});function loadTable(page){startTime();$.post("beetlajax_data.html",{'page':page},function(result){$("tbody").children().remove();var array = eval('(' + result + ')'); for(var i=0;i<array.length;i++){var item = array[i];var tr = "<tr><td>"+item.id+"</td><td>"+item.name+"</td></tr>";$(tr).appendTo("tbody");//$("tbody").appendTo(tr);}endTime();});$('#current').html(page);}</script>
</head>
<body>
这是一个jsonajax测试页面,加载时间是: ${date(),'yyyy-MM-dd:hh:mm:ss'}
<p>
<div id="table-container" ><table><thead><tr><td width=100>id</td><td width=100>姓名</td></tr></thead><tbody></tbody></table>当前页面<span id="current">1</span><span style="width:20px"></span>
<a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a>
<br/>
耗时<span id="time" ></span></div>
</body>
</html>
<html>
<head>
<script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script>
<script src="${ctxPath}/resource/js/time.js"></script>
<script>
$(document).ready(function(){$(document).on('click','.page',function(){var action = $(this).html();var current = parseInt($("#current").html());var page = current;if(action=="next"){page++;}else{page--;}//加载html,table-container的内容将从后台加载startTime();$("#table-container").load("beetlajax.html?ajaxCmd=userTable",{"page":page},function(){endTime(); });});});</script>
</head>
<body>
这是一个beetl-ajax测试页面,加载时间是: ${date(),'yyyy-MM-dd:hh:mm:ss'}
<p>
<div id="table-container" >
<%
#ajax userTable: {
%><table><tr><td width=100>id</td><td width=100>姓名</td></tr><%for(user in users){%><tr><td>${user.id}</td><td>${user.name}</td></tr><%}%>
</table>当前页面<span id="current">${page!1}</span><span style="width:20px"></span>
<a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a>
<%
}
%>
</div>
耗时<span id="time" ></span>
</body>
</html>
第三种 方式
后端直接生成好，前端更新 dom 节点
xtqd.js
$(function () {var query = {systemName:'',sceneId:'',departmentId: '',netId: ''}$('#search').click(function (){var systemName = $("#searchData").val().trim();query.systemName=systemName;search()})function search() {var data=query;$.ajax({type: 'post',url: "/daping/query ",data:query,dataType: 'json',cache: false,success: function (response) {$(".floors-list .floor").empty();$(".floors-list .floor").append(response.systemDetail);
// $(".jf-reply-list > li:last-child").before(ret.replyItem);
// alert("zwh");},error: function (res) {console.log('数据加载失败，请检查网络是否通畅');}});}$('.scene .cate_detail_con .cate_detail_con_lk').click(function (){$(this).addClass('active').siblings().removeClass('active');query.sceneId = $(this).attr('data-id');search()})$('.department .cate_detail_con .cate_detail_con_lk').click(function (){$(this).addClass('active').siblings().removeClass('active');query.departmentId = $(this).attr('data-id');search()})$(' .cate_detail_con .cate_detail_con_lk').click(function (){$(this).addClass('active').siblings().removeClass('active');queryId = $(this).attr('data-id');search()})
})
xtqd.html
<!DOCTYPE html>
<html>
<head><meta name="robots" content="all"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="keywords" content="中国电科-智慧城市指挥中心"/><meta name="description" content="中国电科-智慧城市指挥中心"/><title>中国电科-智慧城市指挥中心-系统清单</title><link href="/assets/img/favicon.ico" rel="icon" type="image/x-icon" /><link href="/assets/css/layout.css" rel="stylesheet" type="text/css"/><link href="/assets/css/reset.css" rel="stylesheet" type="text/css"/><link href="/assets/css/ftqzhcsxtqd.css" rel="stylesheet" type="text/css"/>
<!--让IE6、IE7、IE8、IE9支持html5和css3开始-->
<!--[if lt IE 9]>
<script src="/assets/js/html5.js" type="text/javascript" language="javascript"></script>
<script src="/assets/js/selectivizr.js" type="text/javascript" language="javascript"></script>
<script src="/assets/js/PIE.js" type="text/javascript" language="javascript"></script><![endif]-->
<!--让IE6、IE7、IE8、IE9支持html5和css3结束--> <!--IE6支持png图片透明开始--><!--[if IE 6]><script src="/assets/js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js" type="text/javascript"></script><script type="text/javascript">DD_belatedPNG.fix('a, div, ul, img, input, span');</script><![endif]-->
<!--IE6支持png图片透明结束--><!--自定义js文件开始--><!--自定义js文件结束--> <script type="text/javascript" src="/assets/jquery/jquery.min-v1.12.4.js"></script><script type="text/javascript" src="/assets/js/jfinal-com-v1.0.js?v=16"></script></head>
<body>
<!--页面开始-->
<div class="page page_a bg"> <!--头部开始--> <div class="page_top bg"><a class="title" target="" href="index.html" title="福田区智慧城市智慧中心"></a></div> <!--头部结束--><!--系统清单开始--> <div class="system-list-area"><div class="condition-screen"><div class="condition-screen-wrap bg"><div class="condition-screen-title"><i class="icon icon-screen bg"></i>条件筛选</div><div class="search"><a class="search-btn" href="javascript:void(0)" id="search" title="搜索">搜索</a><span class="search-value-bg bg"><i class="icon icon-search bg"></i><input id="searchData" name="" type="text" value="" /></span></div></div> </div> <div class="screen-area"> <ul class="cate-menu"><li class="cate-menu-item scene"><div class="cate-detail"><dl class="cate_detail_item"><dt class="cate_detail_tit">场景类型：</dt><dd class="cate_detail_con"><a href="javascripte:void(0)" class="cate_detail_con_lk" flag="a1" title="全部">全部</a>#for(s : sceneList)<a href="javascripte:void(0)" data-id="#(s.value)" class="cate_detail_con_lk" flag="a1" title="#(s.name)">#(s.name)</a>#end</dd> </dl> </div> </li><li class="cate-menu-item department"><div class="cate-detail"><dl class="cate_detail_item"><dt class="cate_detail_tit">所属部门：</dt><dd class="cate_detail_con"><a href="javascripte:void(0)" class="cate_detail_con_lk" flag="a3" title="全部">全部</a>#for(s : departmentList)<a href="javascripte:void(0)" data-id="#(s.id)" class="cate_detail_con_lk" flag="a3" title="#(s.name)">#(s.name)</a>#end</dd></dl></div> </li> <li class="cate-menu-item net"><div class="cate-detail"><dl class="cate_detail_item"><dt class="cate_detail_tit">网络类型：</dt><dd class="cate_detail_con"><a href="javascripte:void(0)" class="cate_detail_con_lk" flag="a4" title="全部">全部</a>#for(s : dictList)<a href="javascripte:void(0)" data-id="#(s.value)" class="cate_detail_con_lk" flag="a4" title="#(s.name)">#(s.name)</a>#end</dd></dl> </div> </li> </ul></div><div class="floors-list"><div class="floor"><h3 class="floorhd">接入系统</h3><div class="cells flex">#for(s : systemInList)<div class="cell" title="#(s.name)"><div class="cell__hd">#(s.name)</div><div class="cell__bd"><div class="department"><span>所属部门：</span><span>#(s.departmentname)</span></div><div class="platform"><span>所属场景：</span><span>#(s.scene)</span></div></div><div class="cell__ft">#for(net:ss)<span class="service-livelihood">#(net.name)</span>#end</div></div>#end</div></div></div> </div> <!--系统清单结束-->
</div>
<!--页面结束-->
<script src="/assets/js/xtqd.js" type="text/javascript"></script></body>
</html>
DapingController
package com.jfinal.club.daping;import java.util.List;import com.jfinal.aop.Inject;
import com.jfinal.club._admin.systemin.SystemInService;
import com.jfinal.clubmon.model.Department;
import com.jfinal.clubmon.model.Dicts;
import com.jfinal.clubmon.model.SystemIn;
import com.jfinal.club.department.DepartmentService;
import com.jfinal.core.Controller;
import com.jfinal.kit.Ret;public class DapingController extends Controller {@InjectSystemInService srv;@InjectDepartmentService departmentService;/*** 显示大屏界面*/public void index() {render("index.html");}/*** 显示系统清单*/public void xtqd() {//场景类型List<Dicts> sceneList=srv.getCommonDictList("value, name","systemin","scene");setAttr("sceneList", sceneList);//所属部门List<Department> departmentList=departmentService.getDepartmentList();setAttr("departmentList", departmentList); //网络类型List<Dicts> dictList=srv.getCommonDictList("value, name","systemin","net");setAttr("dictList", dictList); String systemName = getPara("systemName"); String sceneId = getPara("sceneId"); String departmentId = getPara("departmentId"); String netId = getPara("netId"); List<SystemIn> getSystemInList=srv.getSystemInList(systemName,sceneId,departmentId,netId);setAttr("systemInList", getSystemInList);render("xtqd.html");}/*** 显示系统清单*/public void query() {String systemName = getPara("systemName"); String sceneId = getPara("sceneId"); String departmentId = getPara("departmentId"); String netId = getPara("netId"); List<SystemIn> getSystemInList=srv.getSystemInList(systemName,sceneId,departmentId,netId);Ret ret= Ret.ok("systemInList", getSystemInList);// 用模板引擎生成 HTML 片段 systemDetailString systemDetail = renderToString("systemDetail.html", ret);ret.set("systemDetail", systemDetail);renderJson(ret);}}
systemDetail.html
<h3 class="floorhd">接入系统</h3>
<div class="cells flex">#for(s : systemInList)<div class="cell" title="#(s.name)"><div class="cell__hd">#(s.name)</div><div class="cell__bd"><div class="department"><span>所属部门：</span><span>#(s.departmentname)</span></div><div class="platform"><span>所属场景：</span><span>#(s.scene)</span></div></div><div class="cell__ft">#for(net:ss)<span class="service-livelihood">#(net.name)</span>#end</div></div>#end
</div>
参考官方文档
- 4.12. 整合ajax的局部渲染技术
转载于:
更多推荐
Beetl 提供俩种方式来显示实现局部更新
发布评论