重构PHP通用查询系统之3----jquery datatable表格如何双击修改？

上一章讲了使用jquery datatable后台读取数据后生成表格，实现了排序、搜索和分页功能。现在我们学习一下，如何双击单元格，可以编辑该单元格数据，编辑完点单元格外任意地方，自动提交保存到数据库的方法。

这个对于普通HTML表格也是一样的，只需要有JQ即可。原理是：双击->保存该单元格对象->给单元格添加input->输入->离开单元格ajax保存。

具体过程请看完整代码：

//双击修改
myTable.on("dblclick","td",function(){
if($(this).children("input").length>0){
return false;
}
tdDom = $(this);//保存点击数据为全局变量
var tdPreText = $(this).text();//保存初始值
var lie = tdDom.prevAll().length;//第几列
var zdjson = "";
var zdsz = zdjson.split(","); //字段数组
var zd = zdsz[lie];//双击td所在列名，1234对应数据库4567
//console.log(zd);
if(zd == undefined){
jQuery.alertWindow("该列禁止修改");
}else{
$(this).html("").find("input").val(tdPreText);//给td设置宽度和给input设置宽度并赋值
var inputDom = $(this).find("input");
inputDom.blur(function(){//失去焦点的时候重新赋值
var bm = "";
var newText = $(this).val();//修改后的值
var id = tdDom.parent().children('td').eq(0).text();//行id
var lie = tdDom.prevAll().length;//第几列
var zdjson = "";
var zdsz = zdjson.split(","); //字段数组
var zd = zdsz[lie];//双击td所在列名，1234对应数据库4567
$(this).remove();
if(newText == tdPreText){
console.log(zd);
tdDom.text(tdPreText);//没有修改,赋值回原值
}else if(zd == undefined){
tdDom.text(tdPreText);//禁止修改列,赋值回原值
alert('该列禁止修改');
}else{
tdDom.text(newText);//更新前端显示，没有更改则不更新
//ajax传递到后台更新数据库
$.ajax({
url:'/admin/Tableupdate',
data:{'bm':bm,'id':id,'zd':zd,'zdnr':newText},
type:'POST',
dataType:'json',
success:function(data){
console.dir(data)
if(data == 1){
jQuery.alertWindow("保存成功");
}else{
jQuery.alertWindow("保存失败");
}
}
});
}
});
}
});

另外，因为数据库中有json格式的字符串，用于存在数组，因此，双击该单元格时，需要弹出模态框，让用户选择：

这个实现过程是，先判断单元格是否是json数据，如果是，则弹出模态框，模态框代码：

    
        
            
                ×
                多选框,按住ctrl可多选