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 相关文章推荐
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
vue路由教程之静态路由
Sep 03 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
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
理解python正则表达式
2016/01/15 Python
python logging添加filter教程
2019/12/24 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
如何在django中实现分页功能
2020/04/22 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
必须要使用游标的SQL语句有那些
2012/05/07 面试题
大学生军训感想
2014/02/16 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
锦旗标语大全
2014/06/23 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS