java版云笔记（四）

页面的笔记本加载完成了，接下来就是点击笔记本显示将笔记显示，同时把笔记在右边的编辑器中，同时把编辑后的笔记更新。

　　注：这个项目的sql文件，需求文档，需要的html文件，jar包都可以去下载，下载地址为：http://download.csdn.net/download/liveor_die/9985846

笔记列表显示

　　前面我们把bookId通过下面的jq代码绑定在li上（笔记本的列表id=note_ul)

$li.data("bookId",bookId);//将值与jQuery对象元素绑定

　　通过点击笔记本触发加载笔记的事件

 $("#book_ul").on("click","li",loadBookNotes);

　　触发的js代码如下，同时把noteId绑定在li上

//根据笔记本ID加载笔记列表
function loadBookNotes(){
    //设置选中效果
    $("#book_ul a").removeClass("checked");
    $(this).find("a").addClass("checked");
    //获取请求参数
    var bookId = $(this).data("bookId");
    //发送Ajax请求
    $.ajax({
        url:path+"/note/loadnotes.do",
        type:"post",
        data:{"bookId":bookId},
        dataType:"json",
        success:function(result){
            if(result.status==0){
                var notes = result.data;//获取笔记信息
                //清除原有笔记列表信息
                $("#note_ul li").remove();
                //$("#note_ul").empty();
                //循环处理
                for(var i=0;i<notes.length;i++){
                    //获取笔记ID
                    var noteId = notes[i].cn_note_id;
                    //获取笔记标题
                    var noteTitle = notes[i].cn_note_title;
                    //创建一个笔记列表li元素
                    createNoteLi(noteId,noteTitle);
                }
            }
        },
        error:function(){
            alert("加载笔记列表失败");
        }
    });
};
//创建笔记列表
function createNoteLi(noteId,noteTitle){
	var sli = "";
	sli+='<li class="online">';
	sli+='  <a>';
	sli+='	<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
	sli+= noteTitle;
	sli+='	<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>';
	sli+='  </a>';
	sli+='  <div class="note_menu" tabindex="-1">';
	sli+='	<dl>';
	sli+='		<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>';
	sli+='		<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>';
	sli+='		<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>';
	sli+='	</dl>';
	sli+='  </div>';
	sli+='</li>';
	//将笔记ID绑定到li元素上
	var $li = $(sli);
	$li.data("noteId",noteId);
	//将li元素添加笔记列表ul中
	$("#note_ul").append($li);
};

发送Ajax请求

• 发送事件：笔记本li元素的单击
• 请求参数：笔记本ID
• 请求地址：/note/loadnotes.do

服务器端处理

/note/loadnotes.do
-->LoadNotesController.execute
-->NoteService.loadBookNotes
-->NoteDao.findByBookId
-->cn_note(查询)
-->返回JSON结果

cn_user(用户)
cn_notebook(笔记本,cn_user_id)
cn_note(笔记,cn_notebook_id,cn_user_id)

Ajax回调处理

• 成功：解析服务器返回的JSON结果,提取
  笔记信息,生成笔记li元素列表
• 失败：提示加载笔记列表失败

$(function(){
  //发送Ajax请求-->服务器端处理-->回调处理
  //给li绑定单击(可以给未来元素绑定on)
  父元素.on("事件类型",子元素,fn处理);
})

笔记加载到编辑器中

点击笔记将笔记的内容和标题显示到编辑器中。

 //点击笔记li加载笔记信息
    $("#note_ul").on("click","li",loadNote);

//根据笔记ID加载笔记信息
function loadNote(){
    //设置选中效果
    $("#note_ul a").removeClass("checked");
    $(this).find("a").addClass("checked");
    //获取请求参数
    var noteId = $(this).data("noteId");
    //发送Ajax请求
    $.ajax({
        url:path+"/note/load.do",
        type:"post",
        data:{"noteId":noteId},
        dataType:"json",
        success:function(result){
            if(result.status==0){
                //获取返回的笔记标题
                var title =result.data.cn_note_title;
                //获取返回的笔记内容
                var body =result.data.cn_note_body;
                body=body+"";
                //设置到编辑区
                $("#input_note_title").val(title);//设置笔记标题
                um.setContent(body);//设置笔记内容
            }
        },
        error:function(){
            alert("加载笔记信息失败");
        }
    });
};

发送Ajax请求

• 发送事件：笔记列表li元素的单击
• 请求参数：笔记ID
• 请求地址：/note/load.do

服务器端处理

/note/load.do
-->LoadNoteController.execute
-->NoteService.loadNote
-->NoteDao.findById
-->cn_note
-->返回JSON结果

Ajax回调处理

• success:解析返回的JSON结果,将标题和内容
  　　　　显示到编辑区位置
• error:alert("加载笔记信息失败");

更新笔记信息

点击保存笔记时，把编辑器中的文本信息获取到然后进行更新。

	//"保存按钮"的处理（更新笔记信息）
    $("#save_note").click(updateNote);

//更新笔记信息
function updateNote(){
    //获取请求参数
    var $li = $("#note_ul a.checked").parent();
    var noteId = $li.data("noteId");//笔记ID
    var noteTitle =$("#input_note_title").val().trim();//笔记标题
    var noteBody = um.getContent();//获取笔记内容
    //发送Ajax请求
    $.ajax({
        url:path+"/note/update.do",
        type:"post",
        data:{"noteId":noteId,"title":noteTitle,"body":noteBody},
        dataType:"json",
        success:function(result){
            if(result.status==0){
                //更新标题
                var str = "";
                str+='<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
                str+= noteTitle;
                str+='<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>';
                //将str替换到笔记li的a元素里
                $li.find("a").html(str);
                //提示成功
                alert(result.msg);
            }
        },
        error:function(){
            alert("保存笔记失败");
        }
    });
};

发送Ajax请求

• 发送事件："保存笔记"按钮的单击
• 请求参数：笔记ID,笔记标题,笔记内容
• 请求地址：/note/update.do

服务器端处理

/note/update.do
-->UpdateNoteController.execute
-->NoteService.updateNote
-->NoteDao.update(Note note)
-->cn_note(更新)
-->返回JSON结果

Ajax回调处理

• success:alert提示保存笔记成功
• error:alert提示保存笔记失败