来看看怎么通过a标签打开一个对话框

前言:也许这是一个很简单的动作,你似乎觉得这没什么,的确,在我完成了这个功能后,我觉得也很简单。

这里写图片描述

弹出框后面是一个table,点击单元格中的修改连接,就可以弹出对话框,并且能够将数据传递到页面前端。

页面

<a href="${ctx}/project/editProjectReback/${deal_item.id}" target="dialog" width="600">修改</a>

注意:

  1. 参数target
  2. width

js封装

//dialogs
	$("a[target=dialog]", $p).each(function(){
		$(this).click(function(event){
			var $this = $(this);
			var title = $this.attr("title") || $this.text();
			var options = {};
			var w = $this.attr("width");
			var h = $this.attr("height");
			if (w) options.width = w;
			if (h) options.height = h;
			options.title = title;
			options.contentType = "ajax";
			options.showButton = eval($this.attr("showButton") || "false");
			options.showCancel = eval($this.attr("showCancel") || "false");
			options.showOk = eval($this.attr("showOk") || "false");
			options.type = "wee";
			options.onopen = eval($this.attr("onopen") ||  function() {});
			options.boxid = "pop_ajax_dialog";

			var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
			YUNM.debug(url);
			if (!url.isFinishedTm()) {
				$.showErr($this.attr("warn") || YUNM.msg("alertSelectMsg"));
				return false;
			}
			$.weeboxs.open(url, options);
			return false;
		});

注意:

  1. 此处仍然借用了DWZ的代码,通过将a标签上的参数传递给weebox弹出框。
  2. url,用来使weebox内部通过ajax请求发送到服务端。

页面初始化时

让以上代码执行以下就好

weebox内部

else if (self.options.contentType == "ajax") {
				self.ajaxurl = self._content;
				self.setContent('<div class="dialog-loading"></div>');
				self.show();

				$.ajax({
					type : "post",
					url : self.ajaxurl,
					success : function(data) {
						self._content = data;
						self.setContent(self._content);
						self.onopen();
						self.focus();
						if (self.options.position == 'center') {
							self.setCenterPosition();
						}
					},
					error : YUNM.ajaxError
				})
			} 

注意:这里使用ajax请求获取到服务端数据

jfinal

	@Before(DealsInterceptor.class)
	public void editProjectReback() {
	
		if (dealItem != null) {
			setAttr("deal_item", dealItem);
			
			render("add_reback.jsp");
		}
	}

render到对应的页面,并且将参数“deal_item”传递到页面上。

add_reback.jsp

<textarea class="form-control required" rows="3" placeholder="报内容" name="description">${deal_item.description}</textarea>

结语:这串处理对我的整个项目有了很大的启示,接下来,我也将要对我原来的项目做法进行一些修改。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默王二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值