可编辑的jquery表格插件

转自：http://blog.csdn.net/luoyeyu1989/article/details/7201345

注意：

.live() was introduced in jQuery 1.3, therefore it won't work with earlier versions.

.live() has also since been deprecated in jQuery 1.7 onwards.

The alternatives are .on() and .delegate()

See related question jQuery 1.9 .live() is not a function on how to migrate existing code.

代码中使用的是jquery 1.5 所以可以使用.live函数

用on绑定未来元素：

//放在$(function(){})里才有效
$(document).on("click", "#testDiv", function(){
//此处的$(this)指$( "#testDiv")，而非$(document)
});

绑定已有元素和未来元素

$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
//对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete！");
$(this).remove();
});
});

[javascript] view plain copy

/*可编辑的表格插件v1.0*/
/*author:尘絮缘 xcl date:2011-12-02*/
/*update:2011-12-05*/
/*qq:80213876 */
/*说明：
双击行编辑，再双击则保存
更多参数，请参照最下方的：defaults
*/
var tableListInfo = {
init: function(options) {
options = $.extend(tableListInfo.defaults, options); //这里其实就是合并多个对象为一个。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
//滑过变色
$(options.tableClass).hover(function() {
$(this).addClass(options.trHoverClass);
}, function() {
$(this).removeClass(options.trHoverClass);
});
//设置奇数行和偶数行的样式
$(options.tableClass + ":odd").addClass(options.trOddClass);
$(options.tableClass + ":even").addClass(options.trEvenClass);
//单击选中
$(options.tableClass).live("click", function() {
$(this).hasClass(options.trSelectedClass) ? $(this).removeClass(options.trSelectedClass) : $(this).addClass(options.trSelectedClass);
return false;
});
//全选
$(options.selectAllClass).live("click", function() {
$(options.tableClass).addClass(options.trSelectedClass);
return false;
});
//全不选
$(options.selectNothingClass).live("click", function() {
$(options.tableClass).removeClass(options.trSelectedClass);
return false;
});
//反选
$(options.selectOtherClass).live("click", function() {
$(options.tableClass).each(function() {
$(this).hasClass(options.trSelectedClass) ? $(this).removeClass(options.trSelectedClass) : $(this).addClass(options.trSelectedClass);
});
return false;
});
//删除
$(options.delClass).live("click", function() {
var ids = [];
var trObjs = [];
$(options.tableClass).each(function() {
if ($(this).hasClass(options.trSelectedClass)) {
ids.push($(this).attr(options.idAttr));
trObjs.push($(this));
}
});
if (ids.length > 0) {
if (options.delCallBack != null) {
var str=options.delCallBack(ids, trObjs).split(",");//删除失败的ID数组
for (var i = 0; i < trObjs.length; i++)
{
var flag=1;
for(var m=0;m<str.length;m++)
{
if(trObjs[i].attr(options.idAttr)==str[m])//删除失败的行
{
flag=0;break;
}
}
if(flag==1)
{
trObjs[i].fadeTo("normal", 0.6, function() {$(this).remove();});
}
}
}
}
return false;
});
//编辑
$(options.editClass).live("click", function() {
var ids = [];
var trObjs = [];
$(options.tableClass).each(function() {
if ($(this).hasClass(options.trSelectedClass)) {
ids.push($(this).attr(options.idAttr));
trObjs.push($(this));
}
});
if (ids.length > 1) {
alert(options.trEditMsg);
return false;
}
else if (ids.length == 1) {
if (options.editCallBack != null) {
options.editCallBack(ids, trObjs);
}
}
return false;
});
//单击“全部取消编辑”按钮
$(options.cancleAllClass).live("click", function() {
$(options.tableClass + " .cancleEditCurrentTr").click();
return false;
});
//单击行后面的"取消编辑"
$("a.cancleEditCurrentTr").live("dblclick", function(event) {
event.stopPropagation();
return false;
}).live("click", function(event) {
$parnetTr = $(this).closest("tr");
$parnetTr.html(unescape($parnetTr.attr("oldInfo"))).removeAttr("oldInfo");
event.stopPropagation();
return false;
});
//双击tr（事件切换，双击编辑，再双击则保存）
$(options.tableClass).live("dblclick", function(event) {
if ($(this).attr("oldInfo") == undefined) {//当前tr不在编辑状态
$(this).attr("oldInfo", escape($(this).html())); //保存未编辑时的tr的html
//生成可编辑的tr
if (options.trSaveCallBack != null) {
if(options.tdEnableEditClass=="") return false;
$currentTds=$(this).find("td"+options.tdEnableEditClass)
$currentTrLineTr = $(this);
$currentTds.each(function(i) {
var v = $.trim($(this).text());
$(this).html("<input type=\"text\" " + options.tdEditInputAttr + " class=\"" + options.tdEditInputClass + "\" value=\"" + v + "\"/>");
if (i == $currentTds.length - 1)//如果是最后一个td，则在后面生成一个按钮“取消编辑”
{
$($currentTds[i]).find("." + options.tdEditInputClass).after("<a href=\"javascript:void(0);\" class=\"cancleEditCurrentTr\">" + options.cancleBtnText + "</a>");
}
});
}
}
else { //保存tr回调数据
//提取当前行的每列数据，并存到数组中。
var trValue = [];
$(this).find("td").each(function() {
if ($(this).find(":input").length > 0)//如果该列中有input，则提取出来
{
trValue.push($.trim(escape($($(this).find(":input")[0]).val())));
}
else {
trValue.push($.trim(escape($(this).text())));
}
});
if (options.trSaveCallBack($(this).attr(options.idAttr), trValue) == 1) {
//保存成功
$(this).removeAttr("oldInfo");
$(this).find("td").each(function(i) {
$(this).html(unescape(trValue[i]));
});
}
else {//保存失败
//$(this).html(unescape($(this).attr("oldInfo"))).removeAttr("oldInfo");
}
}
event.stopPropagation();
return false;
});
//单击全部保存
$(options.saveAllClass).live("click", function() {
if (options.trSaveAllCallBack != null) {
var currentEditObjs = [];
var ids = [];
for (var i = 0; i < $(options.tableClass).length; i++) {
if ($($(options.tableClass)[i]).attr("oldInfo") != undefined) {
currentEditObjs.push($($(options.tableClass)[i]));
ids.push($($(options.tableClass)[i]).attr(options.idAttr));
}
}
if(currentEditObjs.length==0)return false;
var failIds = (options.trSaveAllCallBack(ids, currentEditObjs)).split(","); //返回的是保存失败的id集合（用|分隔的字符串）
for (var m = 0; m < currentEditObjs.length; m++) {
var flag = 0;
for (var f = 0; f < failIds.length; f++) {
//失败
if (failIds[f] == currentEditObjs[m].attr(options.idAttr)) {
//currentEditObjs[m].html(unescape(currentEditObjs[m].attr("oldInfo"))).removeAttr("oldInfo");
flag = 1;
break;
}
}
if (flag == 1) continue;
//提取当前行的每列数据，并存到数组中。
var trValue = [];
currentEditObjs[m].find("td").each(function() {
if ($(this).find(":input").length > 0)//如果该列中有input，则提取出来
{
trValue.push($.trim(escape($($(this).find(":input")[0]).val())));
}
else {
trValue.push($.trim(escape($(this).text())));
}
});
currentEditObjs[m].removeAttr("oldInfo");
currentEditObjs[m].find("td").each(function(i) {
$(this).html(unescape(trValue[i]));
});
}
}
return false;
});
},
defaults: {//注意样式和选择器
tableClass: ".tableList tr:gt(0)", //表格容器class
trHoverClass: "trHover", //滑过的样式
trSelectedClass: "trSelected", //选中的样式
delClass: ".delSelected", //删除按钮class
editClass: ".editSelected", //编辑按钮class
selectAllClass: ".selectAll", //全选按钮class
selectNothingClass: ".selectNothing", //全不选按钮class
selectOtherClass: ".selectOther", //反选按钮class
idAttr: "ref", //存放ID的行属性
delCallBack: null, //删除回调函数(ids:ref的属性值集合；trObjs:要删除的行jq对象数组)
editCallBack: null, //编辑回调函数(ids:ref的属性值集合；trObjs:要编辑的行jq对象数组)
trSaveCallBack: null, //双击正在编辑的tr保存回调函数(id:当前行的ref的属性值；trObj:要编辑的tr的jq对象)
trSaveAllCallBack: null, //全部保存回调函数(ids:当前行的ref的属性值；trObjs:要编辑的tr的jq对象)
tdEnableEditClass: ".enableEdit", //为""则每个td都不可以编辑，如果不为空，则指定class的td能编辑
tdEditInputClass: "EditInput", //正在编辑列中的Input的样式
tdEditInputAttr: "", //正在编辑列中的Input的其它属性，格式："name='xxx' id='xx'"
trOddClass: "trOdd", //奇数行样式
trEvenClass: "trEven", //偶数行样式
trEditMsg: "只能选一项进行编辑！", //如果选了多条记录进行编辑时的提醒语
cancleBtnText: "取消编辑", //当编辑tr时,后面的取消按钮的文字
cancleAllClass: ".cancleEditAll", //全部取消按钮class
saveAllClass: ".saveEditAll"//全部保存按钮class
}
}

[css] view plain copy

/*css hack by xcl 2011-12-01*/
.trHover{background:#eee!important;color:#f00;}
.trSelected{background:#9f6!important;color:#f00;}
.tableList{border:solid 1px #95b3d7;border-collapse:collapse;}
.tableList td{border:solid 1px #95b3d7;}
.trOdd{background:#F2FFFF;}
.trEven{background:#F0F5FF;}
.EditInput{width:80px;}

[html] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> table</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="table.min.js"></script>
<link href="table.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function() {
tableListInfo.init({ tableObj: ".tableList tr:gt(0)", tdEnableEditClass: ".enableEdit",
delCallBack: function(ids, trObjs) {
alert("1,3,4删除失败！");
return "1,3,4";//删除失败的id号
},
editCallBack: function(ids, trObjs) {
alert(ids +"\n"+trObjs[0].html());
},
trSaveCallBack: function(id, trVlaue) {
return 1;//保存成功则返回1
},
trSaveAllCallBack:function(ids,trObjs){
alert("10,11,13更新失败！");
return "10,11,13";//保存失败的ID号
}
});
})
</script>
</head>
<body>
<div>
<table class="tableList" style="width:100%;text-align:center;">
<tr>
<td width="25%">标题</td>
<td width="25%">标题</td>
<td width="25%">标题</td>
<td width="25%">标题</td>
</tr>
<tr ref="1">
<td>ASP.NET</td>
<td class="enableEdit">C#</td>
<td class="enableEdit">vb.net</td>
<td>mvc</td>
</tr>
<tr ref="2">
<td class="enableEdit">.NET</td>
<td class="enableEdit">C#</td>
<td class="enableEdit">vb.net</td>
<td class="enableEdit">mvc</td>
</tr>
<tr ref="3">
<td class="enableEdit">JAVA</td>
<td class="enableEdit">C#</td>
<td class="enableEdit">vb.net</td>
<td class="enableEdit">mvc</td>
</tr>
<tr ref="4">
<td class="enableEdit">C#</td>
<td class="enableEdit">C#</td>
<td class="enableEdit">vb.net</td>
<td class="enableEdit">mvc</td>
</tr>
<tr ref="5">
<td class="enableEdit">RUBY</td>
<td class="enableEdit">C#</td>
<td class="enableEdit">vb.net</td>
<td class="enableEdit">mvc</td>
</tr>
<tr ref="6"><td class="enableEdit">C++</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="6"><td class="enableEdit">MS</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="8"><td class="enableEdit">C</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="9"><td class="enableEdit">LOGO</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="10"><td class="enableEdit">JAVA EE</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="11"><td class="dis">OBJECT C</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="dis">mvc</td></tr>
<tr ref="12"><td class="enableEdit">WM</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="13"><td class="enableEdit">WPPP</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
<tr ref="14"><td class="enableEdit">TTTT</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr>
</table>
<div style="width:100%">
<a href="javascript:void(0);" class="selectAll">全选</a>
<a href="javascript:void(0);" class="selectNothing">全不选</a>
<a href="javascript:void(0);" class="selectOther">反选</a>
<a href="javascript:void(0);" class="editSelected">编辑已选项</a>
<a href="javascript:void(0);" class="delSelected">删除已选项</a>
<a href="javascript:void(0);" class="cancleEditAll">全部取消编辑</a>
<a href="javascript:void(0);" class="saveEditAll">全部保存编辑</a>
</div>
</div>
</body>
</html>

下载地址：http://ishare.iask.sina.com.cn/f/22778265.html

可编辑的jquery表格插件相关推荐

jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
jQuery 表格插件
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
Jquery 表格插件DataTables
[转]Jquery 表格插件DataTables 博客分类: Jquery jquerydatatablesjavascript 1.特性可变长度分页: 动态过滤: 多列排序,带数据类型检测功能: ...
15 个最佳的 jQuery 表格插件
现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows ...
jquery表格插件jqgrid
jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/ ...
ABP入门系列（14）——应用BootstrapTable表格插件
1. 引言之前的文章ABP入门系列(7)--分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台web分页,在后台管理系统中并不适用.后台管理系统中的数据展示一般都是使用一些表格插件来完成的.这 ...
常用表格插件附官网或中文网：
常用表格插件附官网或中文网: Datatables.EasyUI Datagrid 数据网格.pqgrid.jqGrid.bootstrap-table 一.Datatables 中文网:http:/ ...
jQuery 表格工具集
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...

可编辑的jquery表格插件

可编辑的jquery表格插件相关推荐

最新文章

热门文章