彈窗顯示數據

功能：點擊按鈕，彈窗顯示從數據庫中獲得的信息（採用jfinal框架）

1.首先是頁面部分，在button中綁定syllabusId，用於js使用。

<button syllabusId = "${syllabus.id}" class="remark">查看備註</button>

2.後臺代碼

/**
     * 根據課程大綱編號查找重點筆記
     */
    public void getKeynoteById() {
        Long syllabusId = getParaToLong("syllabusId");
        //根據syllabusId查找syllabus
        ExamCourseSyllabus syllabus = webCourseSyllabusService.getKeynoteById(syllabusId);
        if (syllabus.getStr("keynote")!=null) {
            //由於在界面顯示時沒法辨別\r\n，因此要替換\r\n成<br/>
            String keynote = (syllabus.getStr("keynote")).replaceAll("\r\n", "<br/>");
            syllabus.set("keynote", keynote);
            //renderJson返回的必須是對象
            renderJson(syllabus);
        } else {
            syllabus.set("keynote", "暫無內容");
            renderJson(syllabus);
        }
    }

3.JS部分

<script src="${base}/resources/web/js/jquery-1.11.3.min.js"></script>
<script src="${base}/resources/web/plugins/bootbox/bootbox.min.js"></script>

$(".remark")
    .on("click", function(e){
        var $this = $(this);
        var $keynote = "";
        //不要執行與事件關聯的默認動做,若是默認動做會使得表單提交（button處於form表單中），表單提交時會使彈窗消失
        e.preventDefault();
                    
        $.post("${base}/syllabusmng/getKeynoteById", {
            //syllabusId是向方法中傳遞的參數
            //this.attr是從button中拿到的值（屬於jQuery的內容）
            "syllabusId": $this.attr("syllabusId"),
        }, function(data) {
            //data的實際內容是從後臺傳遞過來的syllabus，keynote是其屬性，將值賦給$keynote
            $keynote = data.keynote;
            bootbox.dialog({
                message: $keynote,
                title: "備註",
                dataType: "html",
                buttons: {
                cancel: {
                    label: "關閉",
                    className: "btn-default"
                }
            },
        });
    });
});