js实现可编辑表格二

http://www.jb51.net/article/28642.htm

/我的思路是这样的：

1.对任何一个 table, tr 都可以添加编辑、删除功能——功能独立

2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态

3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以

4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能

下面是我实现的功能代码：

editable.js

复制代码代码如下:

/*

code: editable.js

version: v1.0

date: 2011/10/21

author: lyroge@foxmail.com

usage:

$("table").editable({ selector 可以选择table或者tr

head: true, 是否有标题

noeditcol: [1, 0], 哪些列不能编辑

编辑列配置：colindex：列索引

edittype：编辑时显示的元素 0：input 1：checkbox 2：select

ctrid：关联元素的id 如edittype=2， 那么需要设置select的元素

css:元素的样式

editcol: [{ colindex: 2, edittype: 2, ctrid: "sel",css:""}],

onok: function () {

return true; 根据结果返回true or false

},

ondel: function () {

return true; 根据结果返回true or false

}

});

*/

(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 = "<td><a href='#' class='" + opt.editcss + "'>编辑</a> <a href='#' class='" + opt.delcss + "'>删除</a><a href='#' class='" + opt.onokcss + "'>确定</a> <a href='#' class='" + opt.canclcss + "'>取消</a></td>";

$trs.each(function (i, tr) {

if (opt.head && i == 0) {

$(tr).append("<td></td>");

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("<input type='text' value='" + t + "' " + css + " />");

}

else if (obj.edittype == 2) { //select

if (obj.ctrid == undefined) {

alert('请指定select元素id ctrid');

return;

}

$(td).empty().append($("#" + obj.ctrid).clone().show());

$(td).find("option").filter(":contains('" + t + "')").attr("selected", true);

}

/* 可以在此处扩展input、select以外的元素编辑行为 */

}

});

}

else {

$(td).data("v", t);

$(td).html("<input type='text' value='" + t + "' />");

}

});

$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);

}

/* 可以在此处扩展input、select以外的元素确认行为 */

});

$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);

}

/* 可以在此处扩展input、select以外的元素取消行为 */

});

$tr.find(".onok, .cancl, .edit, .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("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表示成功，dom元素相应有变化

}

});

});

3.添加编辑后的效果



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

文件源码：editable.rar