editable.js jquery-based table editing plug-in_jquery

My idea is this:
1. For any table, tr, you can add editing and deletion functions - the functions are independent
2. You can automatically complete the editing and cancellation functions, such as clicking edit, the table content will automatically It becomes an edit box, drop-down box, etc., click Cancel to end the editing state
3. Add deletion and confirmation (i.e. update) events - just add your own server-side deletion and update code
4. Ability to customize Set editable columns and non-editable columns - to facilitate customized editing functions

The following is the function code I implemented:
editable.js

Copy Code The code is as follows:

/*
code: editable.js
version: v1.0
date: 2011/10/21
author: lyroge@foxmail.com
usage:
$("table").editable({ selector can select table or tr
head: true, whether there is a title
noeditcol: [1, 0], which columns cannot be edited
Edit column configuration: colindex: column index
edittype: element displayed during editing 0: input 1: checkbox 2: select
ctrid: id of the associated element If edittype=2, then you need to set the select element
css: element Style
editcol: [{ colindex: 2, edittype: 2, ctrid: "sel",css:""}],
onok: function () {
return true; Return true or false according to the result
},
ondel: function () {
return true; returns true or false according to the result
}
});
*/
(function ($) {
$.fn.editable = function (options) {
options = options || {};
opt = $.extend({}, $.fn.editable.defaults, options);
trs = [];
$.each(this, function () {
if (this.tagName.toString().toLowerCase() == "table") {
$(this). find("tr").each(function () {
trs.push(this);
});
}
else if (this.tagName.toString().toLowerCase() == "tr") {
trs.push(this);
}
});
$trs = $(trs);
if ($trs.size() = = 0 || (opt.head && $trs.size() == 1))
return false;
var button = "Edit DeleteOK Cancel";
$trs. each(function (i, tr) {
if (opt.head && i == 0) {
$(tr).append("");
return true;
}
$(tr).append(button);
});
$trs.find(".onok, .cancl").hide();
$trs.find(".edit").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td") ;
$.each($tds.filter(":lt(" ($tds.size() - 1) ")"), function (i, td) {
if ($.inArray(i , opt.noeditcol) != -1)
return true;
var t = $.trim($(td).text());
if (opt.editcol != undefined) {
$.each(opt.editcol, function (j, obj) {
if (obj.colindex == i) {
css = obj.css ? "class='" obj.css "'" : "";
if (obj.edittype == undefined || obj.edittype == 0) {
$(td).data("v", t);
$(td). html("");
}
else if (obj.edittype == 2) { //select
if (obj.ctrid == undefined) {
alert('Please specify the select element id ctrid');
return;
}
$(td).empty().append($ ("#" obj.ctrid).clone().show());
$(td).find("option").filter(":contains('" t "')").attr( "selected", true);
}
/* You can extend the editing behavior of elements other than input and select here*/
}
});
}
else {
$(td).data("v", t);
$(td).html("");
}
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
return false;
}); ;
$trs.find(".del").click(function () {
$tr = $(this).closest("tr");
if (opt.ondel()) {
$tr.remove();
}
return false;
});
$trs.find(".onok").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
if (opt.onok()) {
$.each($tds .filter(":lt(" ($tds.size() - 1) ")"), function (i, td) {
var c = $(td).children().get(0);
if (c != null)
if (c.tagName.toLowerCase() == "select") {
$(td).html(c.options[c.selectedIndex].text) ;
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* OK Expand elements other than input and select here to confirm the behavior*/
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
}
return false;
});
$trs.find(".cancl").click(function () {
$tr = $(this).closest("tr") ;
$tds = $tr.find("td");
$.each($tds.filter(":lt(" ($tds.size() - 1) ")"), function (i, td) {
var c = $(td).children().get(0);
if (c != null)
if (c.tagName.toLowerCase() == "select") {
$(td).html(c.options[c.selectedIndex].text);
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* Cancel behavior of elements other than input and select can be extended here*/
});
$ tr.find(".onok, .cancl, .edit, .del").toggle();
return false;
});
};
$.fn.editable.defaults = {
head: false,
/*
If it is empty, all columns can be edited, and the default is text box editing
as follows:
{{colindex:' ', edittype:'', ctrid:'', css:''}, ...}
edittype 0:input 1:checkbox 2:select
*/
//editcol:{},
/*
Set the columns that cannot be edited, the default is empty
The following form:
[0,2,3,...]
*/
noeditcol: [] ,
onok: function () {
alert("this's default onok click event");
return true;
},
ondel: function () {
alert(" this's default on del click event");
return true;
},
editcss: "edit",
delcss: "del",
onokcss: "onok",
canclcss: "cancl"
})(jQuery);

플러그인의 효과를 살펴보겠습니다

1. 데이터 테이블

2. 편집 기능 추가

코드 복사 코드 다음과 같습니다:

$(function () {
$("table").editable({
head: true, //테이블 헤더가 있습니다
noeditcol: [0] , //첫 번째 열은 편집할 수 없습니다
editcol: [{ colindex: 1 }, { colindex: 2, edittype: 2, ctrid: "sel"}], //테이블의 편집 열 구성 ctrid: 연관된 dom 요소 ID입니다
onok: function () {
return false; //false를 반환하면 실패를 나타내며 dom 요소는 변경되지 않습니다.
},
ondel: function() {
return true; //성공을 나타내려면 false를 반환합니다.
}
})
});

3. 편집 효과 추가

참고: 편집 기능에서 여러 버튼 스타일을 구성할 수도 있습니다. 자세한 내용은 코드를 참조하세요.) 파일 소스 코드:

editable.rar