JFinal自定义指令配合JS 完成AjaxPortal模式：一个页面多个Html片段加载

最新推荐文章于 2023-09-15 13:18:05 发布

原创

最新推荐文章于 2023-09-15 13:18:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jfinal

项目中需要在一个页面加载多个子表的增删改查操作，不使用自带刷新功能的表格和前端框架。通过AjaxPortal模式，利用jQuery封装ajax工具库，自定义JFinal模板引擎指令，实现Html片段的Ajax加载并Append到指定区域，完成局部刷新。通过调整指令参数控制加载行为，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目背景：一个页面上关联了多个子表的信息，需要同时在一个界面上读取出来，如果是单纯的读取显示没有任何交互的话，可以直接后台读取数据，前端页面循环渲染显示就OK，但是项目需求是需要与页面上子表数据有CURD操作交互，看下图：

前提：项目里不使用自带数据加载和刷新功能的table。就使用普通的table，也不使用Vue.js这种前端框架。

需要在一个界面上实现各子表的增删改查，单个Table的数据区域Html片段自行更新，就需要用到AjaxPortal模式。

AjaxPortal模式简介：

使用ajax加载Html片段Append到指定的DIV区域，完成局部刷新效果。

实现细节：

1、JavaScript 基于Jquery封装ajax加载Html片段的工具库

/**
 * 自动Ajax加载内容的Portal
 */
;(function($){
    $.extend($.fn, {
	ajaxPortal:function(replaceBody,url){
		return this.each(function(){
			var portal=$(this);
			var l_url="";
			if(url){
				l_url=url;
			}else{
				l_url=portal.data("url")
			}
			if(l_url.indexOf("?")!=-1){
				l_url=l_url+"&t="+new Date().getTime();
			}else{
				l_url=l_url+"?t="+new Date().getTime();
			}
			var autoload=portal.data("autoload");
			if(autoload==undefined){
				autoload=true;
			}
			if((replaceBody==undefined&&autoload)||(replaceBody!=undefined)){
				$.get(l_url,function(html){
					if(replaceBody){
						portal.empty().html(html);
					}else{
						portal.append(html);
					}
					
			});
					
			}
		});
	}
});
})(jQuery);

2、上面js库