天天看點

來看看怎麼通過a标簽打開一個對話框

版權聲明:歡迎轉載,請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/48752317

前言:也許這是一個很簡單的動作,你似乎覺得這沒什麼,的确,在我完成了這個功能後,我覺得也很簡單。

彈出框後面是一個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>           

結語:這串處理對我的整個項目有了很大的啟示,接下來,我也将要對我原來的項目做法進行一些修改。

繼續閱讀