editable.js jquery 기반 테이블 편집 플러그인_jquery

내 생각은 이렇습니다.
1. 모든 테이블에 편집 및 삭제 기능을 추가할 수 있습니다. 기능은 독립적입니다.
2. 테이블 편집을 클릭하는 등의 편집 및 취소 기능을 자동으로 완료할 수 있습니다. 콘텐츠가 자동으로 편집 상자, 드롭다운 상자 등이 됩니다. 취소를 클릭하면 편집 상태가 종료됩니다.
3. 삭제 및 확인(예: 업데이트) 이벤트 추가 - 서버측 삭제 및 업데이트 코드만 추가하면 됩니다.
4. 사용자 정의 기능 편집 가능한 열과 편집 불가능한 열 설정 - 사용자 정의 편집 기능을 용이하게 합니다.

다음은 제가 구현한 함수 코드입니다:
editable.js

코드 복사 코드는 다음과 같습니다.

/*
코드: editable.js
버전: v1.0
날짜: 2011/10/21
작성자: lyroge@foxmail.com
사용법:
$("table").editable({ 선택기는 테이블 또는 tr을 선택할 수 있습니다
head: true, 제목이 있는지 여부
noeditcol: [1, 0], 열을 편집할 수 없음
편집 열 구성: colindex: 열 인덱스
edittype: 편집 중에 표시되는 요소 0: 입력 1: 확인란 2: 선택
ctrid: 연결된 요소의 ID edittype=2인 경우 선택 요소를 설정해야 합니다
css: 요소 스타일
editcol: [{ colindex: 2, edittype: 2, ctrid: "sel",css:""}],
onok: function () {
return true; 또는 결과에 따라 false
},
ondel: function () {
return true; 결과에 따라 true 또는 false 반환
}
}); 🎜>(함수($) {
$.fn.editable = 함수(옵션) {
옵션 = 옵션 || {};
opt = $.extend({}, $.fn.editable .defaults, options);
trs = [];
$.each(this, function () {
if (this.tagName.toString().toLowerCase() == "테이블")
$(this).find("tr").each(function () {
trs.push(this);
})
}
else if (this.tagName) .toString().toLowerCase() == "tr") {
trs.push(this);
}
})
$trs = $(trs); ($trs.size() = = 0 || (opt.head && $trs.size() == 1))
false 반환
var 버튼 = "편집 삭제확인 취소";
$trs.each(function (i, tr) {
if (opt.head && i == 0) {
$(tr).append("") ;
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 != 정의되지 않음) {
$.each(opt.editcol, function (j, obj) {
if (obj.colindex == i) {
css = obj.css ? "class='" obj. css "'" : "";
if (obj.edittype == 정의되지 않음 || obj.edittype == 0) {
$(td).data("v", t); (td).html("")
}
else if (obj.edittype == 2) { / /select
if (obj.ctrid == 정의되지 않음) {
alert('선택 요소 ID ctrid를 지정하십시오')
return
}
$(td).empty( ).append($ ("#" obj.ctrid).clone().show())
$(td).find("option").filter(":contains('" t "') ").attr( "selected", true);
}
/* 입력 이외의 요소의 편집 동작을 확장하고 여기에서 선택할 수 있습니다*/
}
});
}
else {
$(td).data("v", t)
$(td).html("");
}
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
false 반환;
}); ;
$trs.find(".del").click(function () {
$tr = $(this).closest("tr");
if (선택. 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)
}
/* 확인 입력 이외의 요소를 확장하고 여기를 선택하여 동작을 확인합니다*/
})
$tr.find(".onok, .cancl, .edit, .del").toggle ();
}
return false;
})
$trs.find(".cancl").click(function () {
$tr = $(this). 가장 가까운("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() == "선택") {
$(td).html(c.options[c.selectedIndex].text)
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* 여기에서 입력 및 선택 이외의 요소 취소 동작을 확장할 수 있습니다*/
} );
$ tr.find(".onok, .cancl, .del").toggle()
return false
}; .fn.editable.defaults = {
head: false,
/*
비어 있으면 모든 열을 편집할 수 있으며 기본값은 다음과 같이 텍스트 상자 편집
입니다.
{{colindex:' ', edittype:'', ctrid:'', css:''}, ...}
edittype 0:input 1:checkbox 2:select
*/
// editcol:{},
/*
편집할 수 없는 열을 설정합니다. 기본값은 비어 있습니다.
다음 형식:
[0,2,3,...]
* /
noeditcol: [] ,
onok: function () {
alert("기본 onok 클릭 이벤트")
return true;
},
ondel: function ( ) {
alert(" del 클릭 이벤트의 기본값입니다.")
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