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与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
js Date概念详细介绍
Nov 22 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
小程序实现抽奖动画
Apr 16 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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使用CURL获取302跳转后的地址实例
2014/05/04 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
JavaScript高级程序设计
2006/12/29 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Python中format()格式输出全解
2019/04/12 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python写程序统计词频的方法
2019/07/29 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
数据库的约束含义
2012/09/09 面试题
基层党建工作宣传标语
2014/06/24 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python