editable.js 基于jquery的表格的编辑插件


Posted in Javascript onOctober 24, 2011

我的思路是这样的:
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.数据表格

editable.js 基于jquery的表格的编辑插件
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的表格的编辑插件
注:另外可以配置编辑功能中的几个按钮样式,详见代码咯 ;)
文件源码:editable.rar

Javascript 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 #Javascript
css值转换成数值请抛弃parseInt
Oct 24 #Javascript
更优雅的事件触发兼容
Oct 24 #Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 #Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 #Javascript
关于javascript function对象那些迷惑分析
Oct 24 #Javascript
文本框根据输入内容自适应高度的代码
Oct 24 #Javascript
You might like
Views rows style模板重写代码
2011/05/16 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python实现FTP文件传输的实例
2019/07/07 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python实现的分层随机抽样案例
2020/02/25 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
天游软件面试
2013/11/23 面试题
大学生应聘自荐信
2013/10/11 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
银行委托书范本
2014/04/04 职场文书
服装发布会策划方案
2014/05/22 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS