可编辑的jquery表格插件
16lz
2021-01-22
/*可编辑的表格插件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 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;}
<!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
更多相关文章
- 如何在选择单选按钮时显示文本字段
- bootstrap入门【按钮式下拉菜单，输入框组】
- 在AngularJS中轻松控制dom - 单击按钮，然后将焦点设置为输入元素
- 无法从按钮onclick事件ASP.NET 4调用Javascript函数
- 隐藏加载更多记录按钮ASP.net MVC Ajax Javascript
- 在内容可编辑DIV中的选定文本周围包装bb代码
- 如何更改我的按钮文字？
- 单选按钮单击，隐藏/显示不工作
- 在Internet Explorer中使用sprited按钮和selection.createRange（）