弹窗显示数据

功能：点击按钮，弹窗显示从数据库中得到的信息（采用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"
                }
            },
        });
    });
});