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 EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
js格式化时间的方法
Dec 18 Javascript
javascript断点调试心得分享
Apr 23 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
微信小程序后端(java)开发流程的详细步骤
Nov 13 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入门速成教程
2007/03/19 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
python计算方程式根的方法
2015/05/07 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python 构造三维全零数组的方法
2018/11/12 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python爬虫基础知识点整理
2020/06/02 Python
党委书记岗位职责
2013/11/24 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
座谈会主持词
2014/03/20 职场文书
供用电专业求职信
2014/07/07 职场文书
水利水电专业自荐信
2014/07/08 职场文书