表格的编辑插件 editable.js

经常写程序总会对数据进行编辑、删除功能,虽然不难,代码不多,你是如何重用这个功能的呢?

我的思路是这样的:

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

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

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

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


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

editable.js 代码
  1 /*
2 code: editable.js
3 version: v1.0
4 date: 2011/10/21
5 author: lyroge@foxmail.com
6 usage:
7 $("table").editable({ selector 可以选择table或者tr
8 head: true, 是否有标题
9 noeditcol: [1, 0], 哪些列不能编辑
10
11 编辑列配置:colindex:列索引
12 edittype:编辑时显示的元素 0:input 1:checkbox 2:select
13 ctrid:关联元素的id 如edittype=2, 那么需要设置select的元素
14 css:元素的样式
15 editcol: [{ colindex: 2, edittype: 2, ctrid: "sel",css:""}],
16 onok: function () {
17 return true; 根据结果返回true or false
18 },
19 ondel: function () {
20 return true; 根据结果返回true or false
21 }
22 });
23 */
24
25 (function ($) {
26 $.fn.editable = function (options) {
27 options = options || {};
28 opt = $.extend({}, $.fn.editable.defaults, options);
29
30 trs = [];
31 $.each(this, function () {
32 if (this.tagName.toString().toLowerCase() == "table") {
33 $(this).find("tr").each(function () {
34 trs.push(this);
35 });
36 }
37 else if (this.tagName.toString().toLowerCase() == "tr") {
38 trs.push(this);
39 }
40 });
41
42 $trs = $(trs);
43 if ($trs.size() == 0 || (opt.head && $trs.size() == 1))
44 return false;
45
46 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>";
47
48 $trs.each(function (i, tr) {
49 if (opt.head && i == 0) {
50 $(tr).append("<td></td>");
51 return true;
52 }
53 $(tr).append(button);
54 });
55
56 $trs.find(".onok, .cancl").hide();
57 $trs.find(".edit").click(function () {
58 $tr = $(this).closest("tr");
59 $tds = $tr.find("td");
60 $.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
61 if ($.inArray(i, opt.noeditcol) != -1)
62 return true;
63 var t = $.trim($(td).text());
64 if (opt.editcol != undefined) {
65 $.each(opt.editcol, function (j, obj) {
66 if (obj.colindex == i) {
67 css = obj.css ? "class='" + obj.css + "'" : "";
68 if (obj.edittype == undefined || obj.edittype == 0) {
69 $(td).data("v", t);
70 $(td).html("<input type='text' value='" + t + "' " + css + " />");
71 }
72 else if (obj.edittype == 2) { //select
73 if (obj.ctrid == undefined) {
74 alert('请指定select元素id ctrid');
75 return;
76 }
77 $(td).empty().append($("#" + obj.ctrid).clone().show());
78 $(td).find("option").filter(":contains('" + t + "')").attr("selected", true);
79 }
80 /* 可以在此处扩展input、select以外的元素编辑行为 */
81 }
82 });
83 }
84 else {
85 $(td).data("v", t);
86 $(td).html("<input type='text' value='" + t + "' />");
87 }
88 });
89 $tr.find(".onok, .cancl, .edit, .del").toggle();
90 return false;
91 }); ;
92
93 $trs.find(".del").click(function () {
94 $tr = $(this).closest("tr");
95 if (opt.ondel()) {
96 $tr.remove();
97 }
98 return false;
99 });
100
101 $trs.find(".onok").click(function () {
102 $tr = $(this).closest("tr");
103 $tds = $tr.find("td");
104 if (opt.onok()) {
105 $.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
106 var c = $(td).children().get(0);
107 if (c != null)
108 if (c.tagName.toLowerCase() == "select") {
109 $(td).html(c.options[c.selectedIndex].text);
110 }
111 else if (c.tagName.toLowerCase() == "input") {
112 $(td).html(c.value);
113 }
114 /* 可以在此处扩展input、select以外的元素确认行为 */
115 });
116 $tr.find(".onok, .cancl, .edit, .del").toggle();
117 }
118 return false;
119 });
120
121 $trs.find(".cancl").click(function () {
122 $tr = $(this).closest("tr");
123 $tds = $tr.find("td");
124 $.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
125 var c = $(td).children().get(0);
126 if (c != null)
127 if (c.tagName.toLowerCase() == "select") {
128 $(td).html(c.options[c.selectedIndex].text);
129 }
130 else if (c.tagName.toLowerCase() == "input") {
131 $(td).html(c.value);
132 }
133 /* 可以在此处扩展input、select以外的元素取消行为 */
134 });
135 $tr.find(".onok, .cancl, .edit, .del").toggle();
136 return false;
137 });
138 };
139
140 $.fn.editable.defaults = {
141 head: false,
142 /*
143 如果为空那么所有的列都可以编辑,并且默认为文本框的方式编辑
144 如下形式:
145 {{colindex:'', edittype:'', ctrid:'', css:''}, ...}
146 edittype 0:input 1:checkbox 2:select
147 */
148 //editcol:{},
149 /*
150 设置不可以编辑的列,默认为空
151 如下形式:
152 [0,2,3,...]
153 */
154 noeditcol: [],
155 onok: function () {
156 alert("this's default onok click event");
157 return true;
158 },
159 ondel: function () {
160 alert("this's default on del click event");
161 return true;
162 },
163 editcss: "edit",
164 delcss: "del",
165 onokcss: "onok",
166 canclcss: "cancl"
167 };
168 })(jQuery);


下面来看下插件的效果

 1.数据表格

 2.添加编辑功能

 1         $(function () {
2 $("table").editable({
3 head: true, //有表头
4 noeditcol: [0], //第一列不可编辑
5 editcol: [{ colindex: 1 }, { colindex: 2, edittype: 2, ctrid: "sel"}], //配置表格的编辑列 ctrid:为关联的dom元素id
6 onok: function () {
7 return false; //返回false表示失败,dom元素不会有变化
8 },
9 ondel: function () {
10 return true; //返回false表示成功,dom元素相应有变化
11 }
12 });
13 });


3.添加编辑后的效果

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


文件源码editable.rar

原文地址:https://www.cnblogs.com/lyroge/p/2222484.html