可编辑表格

editable.js基于jquery的表格的编辑插件作者：字体：[增加减小]类型：转载时间：2011-10-24我要评论经常写程序总会对数据进行编辑、删除功能，虽然不难，代码不多，你是如何重用这个功能的呢我的思路是这样的：1.对任何一个table,tr都可以添加编辑、删除功能——功能独立2.可以自动的完成编辑、取消功能，如点击编辑，表格内容自动变成编辑框、下拉框等，点击取消结束编辑状态3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能下面是我实现的功能代码：editable.js代码如下:/*code:editable.jsversion:v1.0date:2011/10/21author:[e-mail]:$(table).editable({selector可以选择table或者trhead:true,是否有标题noeditcol:[1,0],哪些列不能编辑编辑列配置：colindex：列索引edittype：编辑时显示的元素0：input1：checkbox2：selectctrid：关联元素的id如edittype=2，那么需要设置select的元素css:元素的样式editcol:[{colindex:2,edittype:2,ctrid:sel,css:}],onok:function(){returntrue;根据结果返回trueorfalse},ondel:function(){returntrue;根据结果返回trueorfalse}});*/(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);});}elseif(this.tagName.toString().toLowerCase()==tr){trs.push(this);}});$trs=$(trs);if($trs.size()==0||(opt.head&&$trs.size()==1))returnfalse;varbutton=tdahref='#'class='+opt.editcss+'编辑/aahref='#'class='+opt.delcss+'删除/aahref='#'class='+opt.onokcss+'确定/aahref='#'class='+opt.canclcss+'取消/a/td;$trs.each(function(i,tr){if(opt.head&&i==0){$(tr).append(td/td);returntrue;}$(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)returntrue;vart=$.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(inputtype='text'value='+t+'+css+/);}elseif(obj.edittype==2){//selectif(obj.ctrid==undefined){alert('请指定select元素idctrid');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(inputtype='text'value='+t+'/);}});$tr.find(.onok,.cancl,.edit,.del).toggle();returnfalse;});;$trs.find(.del).click(function(){$tr=$(this).closest(tr);if(opt.ondel()){$tr.remove();}returnfalse;});$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){varc=$(td).children().get(0);if(c!=null)if(c.tagName.toLowerCase()==select){$(td).html(c.options[c.selectedIndex].text);}elseif(c.tagName.toLowerCase()==input){$(td).html(c.value);}/*可以在此处扩展input、select以外的元素确认行为*/});$tr.find(.onok,.cancl,.edit,.del).toggle();}returnfalse;});$trs.find(.cancl).click(function(){$tr=$(this).closest(tr);$tds=$tr.find(td);$.each($tds.filter(:lt(+($tds.size()-1)+)),function(i,td){varc=$(td).children().get(0);if(c!=null)if(c.tagName.toLowerCase()==select){$(td).html(c.options[c.selectedIndex].text);}elseif(c.tagName.toLowerCase()==input){$(td).html(c.value);}/*可以在此处扩展input、select以外的元素取消行为*/});$tr.find(.onok,.cancl,.edit,.del).toggle();returnfalse;});};$.fn.editable.defaults={head:false,/*如果为空那么所有的列都可以编辑，并且默认为文本框的方式编辑如下形式：{{colindex:'',edittype:'',ctrid:'',css:''},...}edittype0:input1:checkbox2:select*///editcol:{},/*设置不可以编辑的列，默认为空如下形式：[0,2,3,...]*/noeditcol:[],onok:function(){alert(this'sdefaultonokclickevent);returntrue;},ondel:function(){alert(this'sdefaultondelclickevent);returntrue;},editcss:edit,delcss:del,onokcss:onok,canclcss:cancl};})(jQuery);2.添加编辑功能复制代码代码如下:$(function(){$(table).editable({head:true,//有表头noeditcol:[0],//第一列不可编辑editcol:[{colindex:1},{colindex:2,edittype:2,ctrid:sel}],//配置表格的编辑列ctrid:为关联的dom元素idonok:function(){returnfalse;//返回false表示失败，dom元素不会有变化},ondel:function(){returntrue;//返回false表示成功，dom元素相应有变化}});});