页面的笔记本加载完成了，接下来就是点击笔记本显示将笔记显示，同时把笔记在右边的编辑器中，同时把编辑后的笔记更新。
注：这个项目的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提示保存笔记失败
