学了一段时间的JQUERY,正好项目要添加个小功能,于是自报奋勇来担认UI设计。本来想找个表格的插件,发现大多太笨重,我要的功能挺简单的,于是就想自己做一个得了,费话少说先上图片
功能很简单就是用AJAX动态修改一行里的一个字段,比如选中一行点击“修改单位”时,这一行的单位编号字段就最成可编辑的,右边出来个保存按钮,修改完后点保存就行。如果选中另一行,当前可编辑的字段都变成不可编辑的。
我的实现方法是:在需要编辑的字段位置放一个div和一个input来回切换。本来我是想用一个input就行了,改变其CSS和属性也能实现,可其中还有个select,怎么改变其css都无法去掉右边的三角,为了风格统一都用div切换了,上代码
HTML代码:
<tr>
<td><input name="radiobutton" type="radio" class="radiobutton" value="<bean:write name='card' property='sn'/>"></td>
<td><bean:write name='card' property='sn'/><input name="sn" type="hidden" id="sn" value="<bean:write name='card' property='sn'/>"></td>
<td><div id="hiddenuid"><bean:write name='card' property='u_id'/></div><input name="uid" type="text" maxlength="6" class="hiddenInput" id="uid" value="<bean:write name='card' property='u_id'/>"></td>
<td><script>document.write(showFlag("<bean:write name='card' property='flag'/>",false))</script>
</td>
<td><bean:write name='card' property='duration'/></td>
<td><div id="hiddendate"><bean:write name='card' property='expiredate'/></div><input name="date" type="text" class="hiddenInput" id="date" value="<bean:write name='card' property='expiredate'/>" size="10"></td>
<td><bean:write name='card' property='createdate'/></td>
<td><input name="button" type="button" class="saveInput" id="save" value="保存"></td>
</tr>
<td width="76"><input name="button5" type="button" id="modifyUID" value="修改单位 "></td>
<td width="91"><input name="button4" type="button" id="modifyFlag" value="是否激活"></td>
<td width="41"><input name="button3" type="button" id="modifyDate" value="续费"></td>
<td width="38"><input name="button2" type="button" id="delSN" value="删除"></td>
jquery代码
var index; //初始化 $(function(){ index=$('input:checked').parent().parent(); //初始化index变量,刚开始的行 $('.listTable tr:gt(0):even').addClass('alt');//隔行变颜色 $('#modifyUID').click(function(){ //为"修改单位"邦定事件 if(isChecked()){ showInput('uid'); } }); $('#modifyFlag').click(function(){ //为"是否激活"邦定事件 if(isChecked()){ showInput('flag'); } }); $('#modifyDate').click(function(){ //为"续费"邦定事件 if(isChecked()){ $('input:checked').parent().parent().find('#date').calendar(); //邦定日历 showInput('date'); } }); $('.saveInput').click(function(){ //为"保存"邦定事件 saveUpdate(this); }); $('#delSN').click(function(){ //为"删除"邦定事件 if(isChecked()){ delSN(); } }); $('.radiobutton').click(function(){ //当选择其它行时,隐藏当前行中的表单 cancelHiddenInput($(index).parent().parent()); index = this; }); $('.radiobutton').each(function(){ //如果单选框没有值则为disabled if($(this).val()==''){ $(this).attr('disabled','disabled'); } }); $('input[@name=uid]').change(function(){ if(this.lenght>6){ return false; } }); }); //是否有一条记录选择 isChecked = function(){ if($('input:checked').length==0){ alert('请先选择一条记录!'); return false; } return true; } //隐藏表单 saveHidenInput=function(tr){ tr.find('.showInput').attr('class','hiddenInput'); tr.find('#save').css('visibility','hidden'); tr.find('#hiddenflag').html(showSelect(tr.find('#flag').val())).removeAttr('class'); tr.find('#hiddenuid').html(tr.find('#uid').val()).removeAttr('class'); tr.find('#hiddendate').html(tr.find('#date').val()).removeAttr('class'); } cancelHiddenInput = function(tr){ tr.find('.showInput').attr('class','hiddenInput'); tr.find('#save').css('visibility','hidden'); tr.find('#uid').val(tr.find('#hiddenuid').html()); tr.find('#date').val(tr.find('#hiddendate').html()); tr.find('div[id*=hidden]').removeAttr('class'); } //显示表单 showInput=function(id){ var tr = $('input:checked').parent().parent(); var showInput = tr.find('#'+id); var hiddenInput = tr.find('#hidden'+id); tr.find('#save').css('visibility','visible'); showInput.attr('class','showInput'); hiddenInput.attr('class','hiddenInput'); } //保存方法 saveUpdate=function(id){ var tr = $(id).parent().parent(); var sn = tr.find('#sn').val(); var uid = tr.find('#uid').val(); var flag = tr.find('#flag').val(); var date = tr.find('#date').val(); var olddate = tr.find('#hiddendate').html(); if(uid.length>6){ alert('单位编号不能大于6位!'); return false; }else if(date<olddate){ alert('续费后日期不能小于原来日期!'); return false; } $.ajax({ type:'post', url:'adminCardDYKJMgrAction.do', datatype:'json', data:'action=modifyCard&u_id='+uid+'&flag='+flag+'&expiredate='+date+'&sn='+sn, success:function(){ saveHidenInput(tr); }, error:function(){ alert('系统出现错误,保存失败!'); } }); } //删除方法 delSN = function(){ if(confirm('是否要删除!')){ var tr = $('input:checked').parent().parent(); var sn = tr.find('#sn').val(); $.ajax({ type:'post', url:'adminCardDYKJMgrAction.do', datatype:'json', data:'action=delCard&snid='+sn, success:function(){ tr.remove(); }, error:function(){ alert('系统出现错误,删除失败!'); } }); } } showSelect = function(flag){ var str; if(flag=='1'){ str='已激活'; }else{ str='未激活'; } return str; } function showFlag(id,y){ var str; var str2; if(id=='0'){ str=str+'<option value="">请选择</option>'; str=str+'<option value="0" selected="selected">未激活</option>'; str=str+'<option value="1">已激活</option>'; str2='<div id="hiddenflag">未激活</div>'; }else if(id=='1'){ str=str+'<option value="">请选择</option>'; str=str+'<option value="0">未激活</option>'; str=str+'<option value="1" selected="selected">已激活</option>'; str2='<div id="hiddenflag">已激活</div>'; }else{ str=str+'<option value="" selected="selected">请选择</option>'; str=str+'<option value="0">未激活</option>'; str=str+'<option value="1">已激活</option>'; str2='<div id="hiddenflag"></div>'; } str=str+'</select>'; if(y==true){ return '<select name="flag" id="flag">'+str; }else{ return str2+'<select name="flag" id="flag" class="hiddenInput">'+str; } }
总结:写的有些粗糙,不过功能都实现了,这个代码不能直接用,因为代码不全,而且后台java代码没有。只做学习用。
感觉jquery的查询功能太爽了,越来越喜戏它了