editable.js jqueryベースのテーブル編集plugin_jquery

私のアイデアは次のとおりです:
1. 任意のテーブル tr に編集機能と削除機能を追加できます。これらの機能は独立しています。
2. テーブルの [編集] をクリックするなど、編集機能とキャンセル機能を自動的に完了できます。コンテンツは自動的に編集ボックス、ドロップダウン ボックスなどになります。[キャンセル] をクリックして編集状態を終了します
3. 削除イベントと確認 (更新) イベントを追加します - 独自のサーバー側の削除コードと更新コードを追加するだけです
4. カスタマイズ機能 編集可能な列と編集不可能な列を設定します - カスタマイズされた編集機能を容易にするため

以下は私が実装した関数コードです:
editable.js

コードをコピー コードは次のとおりです:

/*
コード: editable.js
バージョン: v1.0
日付: 2011/10/21
作成者: lyroge@foxmail.com
使用法:
$("table").editable({ selector は table または tr を選択できます
head: true、タイトルの有無
noeditcol: [1, 0]、どの列は編集できません
Edit列構成:colindex: 列インデックス
edittype: 編集中に表示される要素 0: 入力 1: チェックボックス 2: 選択
ctrid: 関連する要素の ID edittype=2 の場合、select 要素 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.size() = = 0 || (opt.head && $trs.size() == 1))
return false;
var button = "編集 削除OK キャンセル";
$trs. each(function (i, tr) {
if (opt.head && i == 0) {
$(tr).append("") ;
true を返します;
$(tr).append(button)
}); ;
$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 == unknown) {
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();
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 input以外の要素を展開してここを選択して動作を確認します*/
$tr.find(".onok, .cancl, .edit, .del").toggle ();
}
return false;
$trs.find(".cancl").click(function () {
$tr = $(this).最も近い("tr") ;
$tds = $tr.find("td");
$.each($tds.filter(" ($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);
}
/* input と select 以外の要素のキャンセル動作はここで拡張できます*/
} );
$ tr.find(".onok,
").toggle();
$ .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 click イベントのデフォルトです");
return
},
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表示成功，dom元素相应有变化
}
});
});

3.添加编辑后的效果

注：另外可以配置编辑功能中的几个按钮样式，详见代码咯 ；)
文件源码：editable.rar