editable.js 基于jquery的表格的编辑插件
editable.js 基于jquery的表格的编辑插件
发布时间:2016-12-30 来源:查字典编辑
摘要:我的思路是这样的:1.对任何一个table,tr都可以添加编辑、删除功能——功能独立2.可以自动的完成编辑、取消功能,如点击编辑,表格内容自...

我的思路是这样的:

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='#' + opt.editcss + "'>编辑</a> <a href='#' + opt.delcss + "'>删除</a><a href='#' + opt.onokcss + "'>确定</a> <a href='#' + 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.数据表格

editable.js 基于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.js 基于jquery的表格的编辑插件2

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

文件源码:editable.rar

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类