## Task详情
### 1.显示详情内容
~~~javascript
$(function(){
$(function(){
function lg(a){
console.log(a);
}
/*对象数组*/
var task_list = undefined;
/* 添加按钮*/
var $form_add_task = $('.add-task');
/*删除按钮*/
var $delete_task_trigger;
/* 详情按钮*/
var $task_detail_trigger;
var $task_detail=$('.task-detail');
/*面纱*/
var $task_detail_mask = $('.task-detail-mask');
//加载默认数据
init();
/*点击面纱，隐藏详情*/
$task_detail_mask.on('click',hide_task_detail);
$form_add_task.on('submit',function(e){
var new_task = {};
//禁用默认行为
e.preventDefault();
/*获取新task的值*/
var $input = $(this).find('input[name=content]');
new_task.content = $input.val();
/*判空*/
if(!new_task.content) return;
console.log(new_task);
/*存入新task*/
/*var result = add_task(new_task);*/
if(add_task(new_task)){
// render_task_list();
/*添加后把input清空*/
$input.val('');
}
});
function listen_task_detail(){
$task_detail_trigger.on('click',function(){
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
lg(index);
show_task_detail(index);
});
}
function show_task_detail(index){
/*渲染详情数据*/
render_task_detail(index);
$task_detail.show();
$task_detail_mask.show();
}
function hide_task_detail(){
$task_detail.hide();
$task_detail_mask.hide();
}
function render_task_detail(index){
if(index ==undefined || !task_list[index]) return;
var item = task_list[index];
var tpl =
'<div class="content">'+
item.content+
'</div>'+
'<div>'+
'<div class="desc">'+
'<textarea value="'+item.desc+'" name="" rows="" cols=""></textarea>'+
'</div>'+
'</div>'+
'<div class="remind">'+
'<input type="date"/>'+
'</div>';
$task_detail.html('');
$task_detail.html(tpl);
}
/*新增task方法*/
function add_task(new_task){
/*将Task推入task_list*/
task_list.push(new_task);
/*更新localStorage*/
store.set('task_list',task_list);
refresh_task_list();
return true;
lg(store.get('task_list'));
}
/*删除按钮绑定监听,在render task list中调用*/
function listen_task_delete(){
/* 删除操作的监听*/
$delete_task_trigger.on('click',function(){
/* 刪除需要索引，所以先取得索引值*/
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
var tmp = confirm('确定删除吗？');
tmp ? delete_task(index):null;
});
}
/*更新task_list方法*/
function refresh_task_list(){
store.set('task_list',task_list);
render_task_list();
}
/*删除task方法*/
function delete_task(index){
/*如果没有index或者在tasklist中不存在，直接返回 */
if(!index || !task_list[index]) return;
delete task_list[index];
refresh_task_list();
}
/*初始化数据方法*/
function init(){
task_list = store.get('task_list')||[];
lg(task_list);
if(task_list.length){
for(var i =0;i<task_list.length;i++){
if(task_list[i]==null){
delete task_list[i];
}
}
/*将存储的数据渲染到页面上*/
render_task_list();
}
}
function render_task_list(){
/*tasklist容器*/
var $task_list = $('.task-list');
$task_list.html('');
/*循环遍历tasklist*/
for(key in task_list){
var item = task_list[key];
var $task = render_task_item(item,key);
$task_list.append($task);
}
$delete_task_trigger = $('.action.delete');
$task_detail_trigger = $('.action.detail');
listen_task_delete();
listen_task_detail();
}
function render_task_item(data,index){
/*判空*/
if(!data||!index) return;
var list_item_tpl =
'<div class="task-item" data-index="'+index+'">'+
'<span><input type="checkbox"/></span>'+
'<span class="task-content">'+data.content+'</span>'+
'<span class="fr">'+
'<span class="action delete">删除</span>'+
'<span class="action detail">详细</span>'+
'</span>'+
'</div>';
return $(list_item_tpl);
}
});
})
~~~
### 2.Task更新
~~~javascript
$(function(){
function lg(a){
console.log(a);
}
var $form_add_task = $('.add-task');
/* 删除按钮*/
var $task_delete_trigger;
var task_list = undefined;
/*详情按钮*/
var $task_detail_trigger;
var $task_detail = $('.task-detail');
/* 面纱*/
var $task_detail_mask = $('.task-detail-mask');
var current_index;
/*更新的表单*/
var $update_form;
var $task_detail_content;
/* 修改内容的隐藏输入框*/
var $task_detail_content_input;
//加载默认数据
init();
$form_add_task.on('submit',on_add_task_form_submit);
/*点击面纱，隐藏详情*/
$task_detail_mask.on('click',hide_task_detail);
function on_add_task_form_submit(e){
var new_task = {};
//禁用默认行为
e.preventDefault();
/*获取新task的值*/
var $input = $(this).find('input[name=content]');
new_task.content = $input.val();
/*判空*/
if(!new_task.content) return;
console.log(new_task);
/*存入新task*/
/*var result = add_task(new_task);*/
if(add_task(new_task)){
/*aad_task方法中已经刷新过页面*/
// render_task_list();
/*添加后把input清空*/
$input.val('');
}
}
function listen_task_detail(){
$task_detail_trigger.on('click',function(){
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
lg(index);
show_task_detail(index);
});
}
/* 查看Task详情*/
function show_task_detail(index){
/*渲染详情数据*/
render_task_detail(index);
current_index = index;
$task_detail.show();
$task_detail_mask.show();
}
/* 更新详情*/
function update_task(index,data){
if(!task_list[index]) return;
task_list[index] = data;
refresh_task_list();
}
function hide_task_detail(){
$task_detail.hide();
$task_detail_mask.hide();
}
function render_task_detail(index){
if(index ==undefined || !task_list[index]) return;
var item = task_list[index];
var tpl = '<form>'+
'<div class="content">'+
item.content+
'</div>'+
'<div><input style="display:none;" type="text" name="content" value="'+item.content+'"></div>'+
'<div>'+
'<div class="desc">'+
'<textarea name="desc">'+item.desc+'</textarea>'+
'</div>'+
'</div>'+
'<div class="remind">'+
'<input name="remind_date" type="date" value="'+item.remind_date+'"/>'+
'</div>'+
'<div><button type="submit">更新</button></div>'+
'</form>';
$task_detail.html('');
$task_detail.html(tpl);
$update_form = $task_detail.find('form');
$task_detail_content = $update_form.find('.content');
$task_detail_content_input = $update_form.find('[name=content]');
$task_detail_content.on('dblclick',function(){
$task_detail_content_input.show();
$task_detail_content.hide();
})
$update_form.on('submit',function(e){
e.preventDefault();
/*修改的data*/
var data ={};
data.content = $(this).find('[name=content]').val();
data.desc = $(this).find('[name=desc]').val();
data.remind_date = $(this).find('[name=remind_date]').val();
console.log('data',data);
update_task(index,data);
hide_task_detail();
})
}
/*删除按钮绑定监听*/
function listen_task_delete(){
/* 删除操作的监听*/
$task_delete_trigger.on('click',function(){
/* 刪除需要索引，所以先取得索引值*/
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
var tmp = confirm('确定删除吗？');
tmp ? delete_task(index):null;
});
}
/*新增task方法*/
function add_task(new_task){
/*将Task推入task_list*/
task_list.push(new_task);
/*更新localStorage*/
// store.set('task_list',task_list);
refresh_task_list();
return true;
}
/*更新task_list方法*/
function refresh_task_list(){
store.set('task_list',task_list);
render_task_list();
}
/*删除task方法*/
function delete_task(index){
/*如果没有index或者在tasklist中不存在，直接返回 */
if(!index || !task_list[index]) return;
delete task_list[index];
refresh_task_list();
}
/*初始化数据方法*/
function init(){
/*没有值就设置为空数组*/
task_list = store.get('task_list')||[];
if(task_list.length){
render_task_list();
}
lg(task_list);
}
/*把task-list渲染到页面上*/
function render_task_list(){
/*tasklist容器*/
var $task_list = $('.task-list');
$task_list.html('');
/*循环遍历tasklist*/
for(var i=0;i<task_list.length;i++){
var $task = render_task_item(task_list[i],i);
$task_list.append($task);
}
$task_delete_trigger = $('.action.delete');
$task_detail_trigger = $('.action.detail');
listen_task_delete();
listen_task_detail();
}
/*渲染单条*/
function render_task_item(data,index){
/*判空*/
if(!data||!index) return;
var list_item_tpl =
'<div class="task-item" data-index="'+index+'">'+
'<span><input type="checkbox"/></span>'+
'<span class="task-content">'+data.content+'</span>'+
'<span class="fr">'+
'<span class="action delete">删除</span>'+
'<span class="action detail">详细</span>'+
'</span>'+
'</div>';
return $(list_item_tpl);
}
});
~~~
