可编辑的jquery表格插件
来源：互联网 发布：js 计算时间间隔 毫秒 编辑：程序博客网 时间：2024/05/01 17:25
/*可编辑的表格插件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
- 可编辑的jquery表格插件
- 可编辑的jquery表格插件
- jquery 可编辑的表格
- jquery 可编辑的表格
- JQuery【可编辑的表格】
- JQuery可编辑的表格
- jquery可编辑表格
- JQuery 可编辑表格
- jquery可编辑表格
- jquery 可编辑表格
- jQuery Handsontable【jQuery插件-一个非常酷的可编辑表格】
- 利用JQuery制作可编辑的表格
- jquery可编辑的表格代码
- Jquery可编辑的表格示例代码
- jquery创建可编辑的动态表格
- jQuery之可编辑表格的实现
- jQuery实现可编辑的表格
- JQuery实战：可编辑的表格
- eclipse3.7汉化方法
- 一个简单的多线程运用例子
- ucos中的三种临界区管理机制
- 天下父母-恩情
- Algorithm头文件简介
- 可编辑的jquery表格插件
- 用U盘安装ubuntu系统
- VirtualBox里的四种networking modes
- Linux timer example
- 通过进程ID获取基地址
- NEC红外遥控协议理解与实现
- Linux内嵌汇编
- oracle 游标使用
- linux tar 备份命令 【转载】
