JFinal自定义模板指令AjaxPortal

Stella981
• 阅读 139

JFinal自定义模板指令AjaxPortal

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

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

JFinal自定义模板指令AjaxPortal

需要在一个界面上实现各子表的增删改查,单个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库搞定后,在没有自定义JFinal模板引擎指令之前,是可以直接使用html的,代码如下:

3、上面Html标签写完 页面上调用一下js就能实现自动加载html片段了

$("#myAjaxPortal").ajaxPortal();

JFinal自定义指令扩展之后 可以不写html了,先来看看 自定义指令如何调用

#ajaxPortal("你的action Url","project_growth_portal")

#ajaxPortal("你的action Url","project_thingrecord_portal")

#ajaxPortal("你的action Url","project_detail_portal")

说明:一共有三个参数的,第一个是URL地址,第二个参数是给这个DIV Portal设置一个ID,第三个是指定是否默认自动执行加载

经过封装可以实现,一个参数的时候默认自动加载 ID不要,两个参数的时候 指定了ID和URL 默认自动加载 三个参数就是完全自己决定是否自动执行加载。

上代码吧:

import java.io.IOException; import com.jfinal.template.Directive; import com.jfinal.template.Env; import com.jfinal.template.expr.ast.Expr; import com.jfinal.template.expr.ast.ExprList; import com.jfinal.template.io.Writer; import com.jfinal.template.stat.ParseException; import com.jfinal.template.stat.Scope;   public class AjaxPortalDirective extends Directive {          private Expr portalIdExpr;     private Expr urlExpr;     private Expr autoLoadExpr;     private int paraNum;          public void setExprList(ExprList exprList) {         this.paraNum = exprList.length();         if (paraNum > 3) {             throw new ParseException("Wrong number parameter of #ajaxPortal directive, three parameters allowed at most", location);         }                  if (paraNum == 1) {             this.urlExpr  = exprList.getExpr(0);         } else if (paraNum == 2) {             this.urlExpr  = exprList.getExpr(0);             this.portalIdExpr = exprList.getExpr(1);         } else if (paraNum == 3) {             this.urlExpr  = exprList.getExpr(0);             this.portalIdExpr = exprList.getExpr(1);             this.autoLoadExpr = exprList.getExpr(2);         }     }          public void exec(Env env, Scope scope, Writer writer) {         if (paraNum == 0) {             outputNothing(env, writer);         } else if (paraNum == 1) {             outputNormalAjaxPortal(env, scope, writer);         } else if (paraNum == 2) {             outputNormalAjaxPortalWithPortalId(env, scope, writer);         } else if (paraNum == 3) {             outputFullAjaxPortal(env, scope, writer);         }     }     /**      * 输出空字符      * @param env      * @param writer      */     private void outputNothing(Env env, Writer writer) {              }     /**      * 输出自动加载的仅指定Url的ajaxPortal代码      * @param env      * @param scope      * @param writer      */     private void outputNormalAjaxPortal(Env env,Scope scope, Writer writer) {         Object value=this.urlExpr.eval(scope);         if(value!=null){             try {                 writer.write("

");             } catch (IOException e) {                 e.printStackTrace();             }         }              }     /**      * 输出自动加载的带有portalId和url的ajaxPortal代码      * @param env      * @param scope      * @param writer      */     private void outputNormalAjaxPortalWithPortalId(Env env,Scope scope, Writer writer) {         Object url=this.urlExpr.eval(scope);         Object portalId=this.portalIdExpr.eval(scope);         if(url!=null&&portalId!=null){             try {                 writer.write("
");             } catch (IOException e) {                 e.printStackTrace();             }         }              }     /**      * 输出带有portalId和url的ajaxPortal代码      * 可以设置是否自动加载      * @param env      * @param scope      * @param writer      */     private void outputFullAjaxPortal(Env env,Scope scope, Writer writer) {         Object url=this.urlExpr.eval(scope);         Object portalId=this.portalIdExpr.eval(scope);         Object autoload=this.autoLoadExpr.eval(scope);         if(url!=null&&portalId!=null&&autoload!=null){             try {                 writer.write("
");             } catch (IOException e) {                 e.printStackTrace();             }         }              }                }

总结:自定义指令可以配合HTML和JS 完成很多强大功能做出很好的用户体验。

这就是AjaxPortal自定义指令的代码,文章里发的是截图,如果需要全部demo源码,请关注【JFinal学院】公众号:jfinalxueyuan。

回复:ajaxportal 关键词 获取源码下载地址。

JFinal自定义模板指令AjaxPortal

JFinal学院QQ群:362557641

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Stella981 Stella981
1年前
Django之Django模板
1、问:html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012082616:00:00,但是页面显示的却是Aug.26,2012,4p.m.答:为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td{{dayrecord.p\_time|date:
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_34035044 helloworld_34035044
6个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue