如何進行table實時編輯函數(shù)封裝

如何進行table實時編輯函數(shù)封裝，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

功能介紹:

該函數(shù)只需要傳入兩個參數(shù)即可實現(xiàn)表格的實時編輯編輯后文本框失去焦點或按回車即可發(fā)送異步請求修改如果檢查到?jīng)]有修改則不會發(fā)請求服務(wù)器接收的參數(shù)固定為_id title con該函數(shù)修改失敗的提示依賴layer插件可自行修改依賴

設(shè)置介紹:

html中給需要編輯的td單元格加上name屬性即可讓該單元格可編輯tr需要設(shè)置name 屬性放置后臺表的id作為修改條件

/** 雙擊編輯表格單元格* obj object 需要點擊的表格單元格* url 需要請求的地址* callback 傳入需要添加的html元素并返回元素的jq對象* id int 需要修改的列的id* title text 需要修改的字段名 不設(shè)置則不能編輯該單元格* con text 需要修改的字段對應(yīng)的內(nèi)容* */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元素和對應(yīng)的選中邏輯        var saveObj;        if(callback) {            saveObj = callback($(this), id, con, title);        }else{            //不設(shè)置回調(diào)則使用默認值            $(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發(fā)請求修改            $.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();            }        }    });}

新增功能:

增加回調(diào)來設(shè)置更多的標簽,例如,在回調(diào)中設(shè)置點擊添加一個select 標簽,并返回設(shè)置的對象做后續(xù)操作

callback 參數(shù)列表:

1. obj 當前點擊的

td

2. 單元格

jquey

3. 對象用來添加設(shè)置單元格的html標簽樣式id 需要修改的

tr

4. 列的id即數(shù)據(jù)庫主鍵idcon 需要修改的字段對應(yīng)的內(nèi)容title 需要修改的字段名 不設(shè)置則不能編輯該單元格

調(diào)用實例:

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'>增值服務(wù)</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");            });

看完上述內(nèi)容，你們掌握如何進行table實時編輯函數(shù)封裝的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！