如何進行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實時編輯函數封裝的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！