您的位置：首页 > 其它

实现列表双击可编辑，异步更新；实现删除的即时移除；

2013-12-18 17:18 411 查看


功能：实现列表双击可编辑，异步更新；实现删除的即时移除；

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>列表的双击修改异步更新，动态移除</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
//通过jQuery控制表格隔行换色，并鼠标悬停变色
$('tr:even:gt(0)').addClass('tr_even');    //默认偶数行背景色，无视标题行用:gt(0)
$('tr:odd').addClass('tr_odd');            //默认奇数数行背景色

/////////////////////////////////////////////////////////////////////////////////

/**
* 对title字段异步更新
*/
$('.title').dblclick(function(){
var tdTxtValue = $(this).html();              //$(this)指当前文本框，获取原来td单元格的文本值
var fieldName  = $(this).attr('class');       //class=字段名(比如title字段)
var dataid     = $(this).parent().attr('id'); //在于tr里的数据id
var tdInput    = '<input type="text" id="'+fieldName+dataid+'" value="'+tdTxtValue+'" />'; //input表单的id以“字段”+“数据id”命名
$(this).html(tdInput);                        //将td单元格内容换成文本框表单
$('#'+fieldName+dataid).focus().live('blur',function(event){
var editValue = $.trim($(this).val());    //$(this)指当前文本框，失去焦点时获取新编辑的文本框的值
$(this).parent().html(editValue);         //$(this)指当前文本框，失去焦点时再将td单元格用纯文本填充
if(editValue != tdTxtValue){
//如果内容被改变，就发送ajax异步更新
$.post('http://others.com/0_module/0/jQuery/listUpdate_Remove/UpdateRemove.php',{id:dataid,field:fieldName,value:editValue},function(data){
if(data.errno==0){
alert('修改成功');
}
});
}
});

});

});

/**
* 删除并移除本行
* @author martinzhang
* @param  thisObject 当前a标签对象
* @return none
*/
function removeTR(thisObject){
var thisObj = $(thisObject);                        //当前a标签对象
var dataId  = thisObj.parent().parent().attr('id'); //数据主键id
if(!confirm('删除后不可恢复，确实删除?')){
return false;
}
$.post('http://others.com/0_module/0/jQuery/listUpdate_Remove/UpdateRemove.php/Id/'+dataId,function(data){
if(data.errno==0){
//使a标签的父级(td)的父级(tr)淡出
thisObj.parent().parent().fadeOut('normal',function(){
//使a标签的父级(td)的父级(tr)移除
thisObj.parent().parent().remove();
});
}
},'json');
}
</script>
<style type="text/css">
th{background-color:#CCCCCC;}       /* 标题背景色 */
.tr_even{background-color:#fffff5}  /* 偶数行背景色 */
.tr_odd{background-color:#fffff5}   /* 奇数行背景色 */
.tr_even:hover,.tr_odd:hover{background-color:#CACACA;}      /* 通过CSS实现鼠标悬停高亮色 */
</style>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">

<tr>
<th>数据列</th>
<th>操作</th>
</tr>
<tr id="1">
<td class="title">11月69城新房价同比</td>
<td><a onclick="removeTR(this)" href="javascript:;">删除</a></td>
</tr>
<tr id="2">
<td class="title">山东等养殖场</td>
<td><a onclick="removeTR(this)" href="javascript:;">删除</a></td>
</tr>
<tr id="3">
<td class="title">秦始皇陵地下</td>
<td><a onclick="removeTR(this)" href="javascript:;">删除</a></td>
</tr>
<tr id="4">
<td class="title">动保组织曝光活体</td>
<td><a onclick="removeTR(this)" href="javascript:;">删除</a></td>
</tr>
<tr id="5">
<td class="title">广汽本田凌派长测总结</td>
<td><a onclick="removeTR(this)" href="javascript:;">删除</a></td>
</tr>

</table>

</body>
</html>


后端代码(PHP):

<?php
//...这里执行一系列数据库操作，更新数据，删除数据等，这里假设成功了......
echo json_encode(array('errno'=>0,'errmsg'=>$_POST));
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航