在做项目的过程中,肯定是涉及到用户的,而用户的一些基本信息,用户应该是可以作修改的,对于这个功能一般都叫做编辑资料和保存,下面看个简单的例子吧。
首先就把页面搭建好,这里就简单的搭建了一个,代码如下图所示:
就是简单的一个form表单,再有一些label标签和input标签,还有select标签,然后就是给select标签和input标签都添加了disabled属性,让它们禁用,再剩下的就是两个按钮了,一个编辑和保存,最后再都写一些简单的css样式,页面就简单搭建好了。
效果如下图所示:
这样看上去也像是简单的个人资料了,现在可以看到那select标签和input标签都是没有值的,而且也无法输入值,下面要实现的就是当点击编辑按钮的时候,就能输入值,而且编辑按钮换成保存按钮,再点击保存就可以将值暂时保存到页面。下面就来看下如何实现的吧。代码如下图所示:
看完代码以后发现其实也很简单,只是用了prop()、css()两个方法就实现了。主要就是利用prop()方法获取到disabled属性,然后将其设为空值,就可以让select标签和input标签启用了。再看下面的代码就是和上面的反过来了,启用以后就再禁用,样式也设置回去。
下面就看看点击编辑以后启用的select标签和input标签,如下图所示:
这样也就可以输入值了。然后再点击保存就又将其禁用了,下面看看效果,如下图所示:
这样就完成了简单的编辑和保存,不过这只是在网页上的效果,要真正的修改保存,还是需要涉及到数据库,就要到控制器写方法,然后再到视图调用,这样就能实现真正的编辑和保存了。以上只是一个简单的例子,可供大家学习参考。