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

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

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

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

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

 

GIF.gif

需要在一个界面上实现各子表的增删改查,单个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库

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值