如何进行table实时编辑函数封装

如何进行table实时编辑函数封装，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

功能介绍:

该函数只需要传入两个参数即可实现表格的实时编辑编辑后文本框失去焦点或按回车即可发送异步请求修改如果检查到没有修改则不会发请求服务器接收的参数固定为_id title con该函数修改失败的提示依赖layer插件可自行修改依赖

设置介绍:

html中给需要编辑的td单元格加上name属性即可让该单元格可编辑tr需要设置name 属性放置后台表的id作为修改条件

/** 双击编辑表格单元格* obj object 需要点击的表格单元格* url 需要请求的地址* callback 传入需要添加的html元素并返回元素的jq对象* id int 需要修改的列的id* title text 需要修改的字段名 不设置则不能编辑该单元格* con text 需要修改的字段对应的内容* */function editor(obj,url,callback) {    var table = arguments[0]?arguments[0]:$("table tr td");    var postUrl = arguments[1]?arguments[1]:'';    table.dblclick(function () {        var con = $.trim($(this).text());        var id = $.trim($(this).parent().attr("name"));        var title = $.trim($(this).attr("name"));        if(!title){            return false;        }        //放置的html元素和对应的选中逻辑        var saveObj;        if(callback) {            saveObj = callback($(this), id, con, title);        }else{            //不设置回调则使用默认值            $(this).html("<input type='text' class='update' value='"+con+"' name='"+id+"' title='"+title+"'>");            saveObj = $(".update");        }        //默认返回对象        if(!saveObj){            saveObj = $(".update");        }        //获得真实val值        var setVal = saveObj.val();        //获取文本框焦点        saveObj.focus();        //全选输入框中的文字        saveObj.select();        //失去焦点事件        saveObj.blur(function () {            var text = $(this).val();            if(text == setVal){                $(this).parent().html(con);                return false;            }            var id = $(this).attr("name");            var title = $(this).attr("title");            //todo发请求修改            $.post(postUrl, {_id: id, title: title, con: text}, function (res) {                if (res.status) {                    return location.reload();                }                return dialog.error(res.info,function () {                    location.reload();                });            });        });        //回车快捷完成编辑        $(window).keyup(function (e) {            var code = e.keyCode;            if(code === 13){                var blur = saveObj.is(":focus");                if(blur === false){                    return false;                }else{                    saveObj.blur();                }            }        });    });    enter();}//弹窗回车确认function enter(obj) {    var cli = arguments[0]?arguments[0]:0;    $(window).keyup(function (e) {        if(e.keyCode === 13){            var btn = $(".layui-layer-btn0");            var len = btn.length;            if(len<=0) {                if(cli != 0) {                    obj.click();                }            }else{                btn.click();            }        }    });}

新增功能:

增加回调来设置更多的标签,例如,在回调中设置点击添加一个select 标签,并返回设置的对象做后续操作

callback 参数列表:

1. obj 当前点击的

td

2. 单元格

jquey

3. 对象用来添加设置单元格的html标签样式id 需要修改的

tr

4. 列的id即数据库主键idcon 需要修改的字段对应的内容title 需要修改的字段名 不设置则不能编辑该单元格

调用实例:

editor($("table tr td"),url,function (obj,id,con,title) {                //title为type的时候需要添加一个select 否则只需要input框                if(title == 'type') {                    obj.html("<select class='update' name='" + id + "' title='" + title + "'><option value='1'>果实</option><option value='0'>增值服务</option></select>");                    if (con == "果实") {                        $($(".update").get(0).options[0]).attr("selected", true);                    } else {                        $($(".update").get(0).options[1]).attr("selected", true);                    }                }else{                    obj.html("<input type='text' class='update' value='"+con+"' name='"+id+"' title='"+title+"'>");                }                return $(".update");            });

看完上述内容，你们掌握如何进行table实时编辑函数封装的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！