哎呀,虽然这个理论上来说不是太难,对各位大神来说很easy啊,但是还是纠结了我一个多小时滴,实现了还是很开心啊,我想实现这样一个效果,当点击修改时,页面从原来的不可编辑状态变成可编辑状态。前两天做对数据的修改时,使用的是跳到一个新的模板页,然后进行修改,可是这样做又要增加一个新的页面,而且不容易快速的找到想修改的项,也勉强算是用户体验性不高吧。今天使用的方法是这样的,当数据表中没有数据时,页面显示为空的文本框,当数据表中有数据时,则将数据表中的数据直接显示在相应位置,如图:
这个页面的代码实现我使用了thinkphp中的if标签实现的,当数据表中的某个属性值为空时则显示为文本框,不为空则调出来显示在页面中,代码如下
<if condition="$list.Schoolname neq ''">
<span name="name"><strong>{$list.Schoolname}</strong>
</span>
<else/>
<input type="text" name="name" class="inp"/></if>
使用if标签来判断我所需要的值是否为空。
condition="$xxx neq ''"
的意思是$xxx不为空,具体的可以参考thinkphp的手册,还可以调用自己的函数,这个我还没看......
现在假设每个属性都不为空,有需要对数据进行修改,当点击修改按钮时,原来不可编辑的部分全部变成文本框,而且之前的内容还显示在文本框中,如下图所示:
这里就使用到了JavaScript的方法了,
if condition="$list neq ''">
<a href="javascript:void(0)" class="edit" >[修改]</a>
</if>
点击修改时的html代码处理如上,
再在JavaScript中用if语句判断,有些显示多行输入文本控件,有些显示文本框,当然保存按钮也可以做相对处理(当点击修改时,才需要对修改的内容进行更改保存,不可编辑状态下不需要),
$('.edit').click(function(){
$('span').each(function(){
var value = $(this).text();
var name = $(this).attr('name');
if ((name=='version')){
$(this).after('<textarea rows="6" cols="50" name="'+name+'">'+value+'</textarea>');
}
else if((name=='submit')){
$(this).after('<input name="'+name+'" type="submit" class="sub" value="保存"/>');
}
else{
$(this).after('<input type="text" name="'+name+'" value="'+value+'" class="inp"/>');
}
$(this).remove();
})
})
JavaScript是个好东西啊,还是要好好学学
这都是自己的理解,如果有说的不对,请大家多多指教,谢谢