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 相关文章推荐
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
Vue.js用法详解
Nov 13 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
基于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
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
js常见表单应用技巧
2008/01/09 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python和opencv实现抠图
2018/07/18 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
ipad上运行python的方法步骤
2019/10/12 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
制定岗位职责的原则
2013/11/08 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
银行竞聘报告范文
2014/11/06 职场文书
女方离婚起诉书
2015/05/18 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android