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

发布于2020-01-27 18:50:36  分类:前端   阅读( 54 ) 

上一章讲了使用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 = "<?php echo $zdjson;?>";
var zdsz = zdjson.split(","); //字段数组
var zd = zdsz[lie];//双击td所在列名,1234对应数据库4567
//console.log(zd);
if(zd == undefined){
jQuery.alertWindow("该列禁止修改");
}else{
$(this).html("<input type='text'>").find("input").val(tdPreText);//给td设置宽度和给input设置宽度并赋值
var inputDom = $(this).find("input");
inputDom.blur(function(){//失去焦点的时候重新赋值
var bm = "<?php echo $bm;?>";
var newText = $(this).val();//修改后的值
var id = tdDom.parent().children('td').eq(0).text();//行id
var lie = tdDom.prevAll().length;//第几列
var zdjson = "<?php echo $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数据,如果是,则弹出模态框,模态框代码:

<!-- 模态框2 多选框条件等 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModatxt" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModatxt">多选框,按住ctrl可多选</h4>
            </div>
            <div class="modal-body" id='dxknr'></div>
            <div class="modal-footer">
                <button type="button" id="gbdxk" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="dxkgg" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<button type="button" style="display:none;" id="dxk" data-toggle="modal" data-target="#myModal2">多选框</button>

JS代码要检测是否为Json字段,可以用函数,也可以检查列名。因这个项目列表字段是固定的,因此采用了检查列我的方式:

if(zd == 'cxtj' || zd == 'kfcxzd' || zd == 'kftbzd'){//需要对json字段进行处理
//ajax读取数据库,获取该表所有字段数组
$.ajax({
url:'/admin/hqzdAll',
data:{'bm':bm},
type:'POST',
dataType:'json',
success:function(data){
//console.dir(data)
if(data.stats == 200){
var zdsz = data.zdsz;
console.log(zdsz);
var first = "<select class='form-control' id='zdsz' multiple>";//多选html头部
var end = '</select>';//多选html尾部
var is_json = isJSON(tdPreText);//判断是否json字符串
if(is_json){
//是json格式,先转数组,再读取数据库,并将原来已选择的加selected状态
var obj=JSON.parse(tdPreText);
console.log(obj);
var middle = "";
for(i = 0,len=zdsz.length; i < len; i++) {
if(obj.includes(zdsz[i])){
//在数组中,加selected状态
middle = middle + "<option selected value=" + zdsz[i] + ">" + zdsz[i] + "</option>";
}else{
middle = middle + "<option value=" + zdsz[i] + ">" + zdsz[i] + "</option>";
}
}
var html = first + middle + end;
$('#dxknr').html(html);
$('#dxk').click();//点击弹出多选框
}

当然,如果是图片,视频等格式的数据,也可以加以判断,给出相应的交互项目给用户。

最后更新于:2020-01-27 18:50:36


上一篇: 重构PHP通用查询系统之2——jquery datatable插件如何使用,如何让表头自适应等?

下一篇: 重构PHP通用查询系统之4——html表格如何自定义右键菜单,实现编辑删除等功能?


  • 最新评论(共0条)
需要登录才能发表评论

加入组织

  • QQ
  • 1. 手Q扫左侧二维码

    2. 搜Q群:617719749

    3. 点击加入学习群

最新评论