QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合

 QFaces1.1新增了一个新的组件,修复了上一版中的Validator的一个错误,同时附带了Demo项目.
新增的组件我叫它超级联动: Linkage

为什么叫超级联动?

1.可以无限联动.
2.可以不用刷新页面.
3.几乎没有性能影响.
4.你不用改变现有的JSF组件.
5.而且使用还非常简单 : )

    <q:linkage for="country,province,city,area,street" listener="#{LinkageBean.listener}" />

for: 指定到页面其它selectOne组件的id,无个数限制
listener: 后台方法绑定,返回相应的选项列表就可以

    实际应用中我们经常会碰到需要级联选择的功能,比如:国家,省级,市级等的级联选择,这些实现起来并不容易,
并且要实现较好的兼容性也不是一件轻松的事情,如果要使用者再添加一大堆的javascript也是很麻烦的事情。
所以我尽量使用非侵入式的方式,将它实现得比较轻松自由,并且让使用者以最简单的方式使用,这是我的目标。
在不改变你的代码及逻辑的情况下,使用这个组件就可以将你页面中的所有selectOne组件变成拥有级联关系的!!
如果你感觉很神奇,那就去学一学JSF这个框架吧,实际上自定义组件才是JSF的精华, 这绝对是你发挥无限想象力的地方!

关于下载,安装,及使用,后面附有链接。

先看一下这个组件的效果图吧:
        
              图1                                    图2

以下是html页面源码,只要在第一级别提供选项就可以:
 1 <h:form>
 2     <!-- 国家,省份,城市,城区,街道 -->
 3     <h:selectOneMenu id="country"   value="#{LinkageBean.country}">
 4         <f:selectItem itemValue="" itemLabel="" />
 5         <f:selectItem itemValue="China" itemLabel="中国" />
 6     </h:selectOneMenu>
 7     <h:selectOneMenu id="province" value="#{LinkageBean.province}" />
 8     <h:selectOneMenu id="city" value="#{LinkageBean.city}"/>
 9     <h:selectOneMenu id="area" value="#{LinkageBean.area}"/>
10     <h:selectOneMenu id="street" value="#{LinkageBean.street}"/>
11             
12     <q:linkage for="country,province,city,area,street" listener="#{LinkageBean.listener}" />
13
14     <h:commandButton value="Submit" action="#{LinkageBean.action}" />
15     <h:outputText value="你的选择:#{LinkageBean.country}-#{LinkageBean.province}-#{LinkageBean.city}-#{LinkageBean.area}-#{LinkageBean.street}" />
16</h:form>

这样可以让你无限的添加 h:selectOne..., 这样你可以实现自己的无限级联。

下面是后台bean所绑定的一个侦听方法,该方法只是返回相应的选项列表而已

 1 public Items listener(Level level) {
 2         if (level.getLevel() == 0) { // 如果触发的是第一级(国别)的选择,返回省级列表
 3             Items items = new Items();
 4             if ("China".equals(level.getValue())) {
 5                 Item bj = new Item("bj""北京");
 6                 Item hn = new Item("hn""河南");
 7                 Item gd = new Item("gd""广东");
 8                 items.add(bj);
 9                 items.add(hn);
10                 items.add(gd);
11                 gd.setSelected(true);   // 设置默认值
12             }
13             return items;
14         } else if (level.getLevel() == 1) { // 如果触发的是第二级(省级)的选择
15             Items items = new Items();
16             if ("gd".equals(level.getValue())) {
17                 items.add(new Item("gz""广州"));
18                 items.add(new Item("sz""深圳"));
19                 items.add(new Item("st""汕头"));
20             }
21             if ("hn".equals(level.getValue())) {
22                 items.add(new Item("zz""郑州"));
23                 items.add(new Item("ly""洛阳"));
24                 items.add(new Item("kf""开封"));
25             }
26             return items;
27         } else if (level.getLevel() == 2) { // 如果触发的是第三级(市级)的选择
28             Items items = new Items();
29             if ("gz".equals(level.getValue())) {
30                 items.add(new Item("byq""白云区"));
31                 items.add(new Item("yxq""越秀区"));
32                 items.add(new Item("thq""天河区"));
33             }
34             return items;
35         } else if (level.getLevel() == 3) { // 如果触发的是第四级(区级)的选择
36             Items items = new Items();
37             if ("byq".equals(level.getValue())) {
38                 items.add(new Item("sc""沙涌"));
39                 items.add(new Item("tx""棠下"));
40                 items.add(new Item("bz""北站"));
41                 items.add(new Item("syl""三元里"));
42             }
43             return items;
44         }
45         // 第五个级别不用触发
46         return null;
47     }
这个方法看起来有点长,但是很简单,如果要实现更多的级联,就继续写 else if 或 switch吧. 当然这只是模拟,

实际应用中你可以从数据库中取出数据,进行徇环。

以下是QFaces的下载地址,如果你在使用过程中遇到问题,可以与我联系!欢迎交流学习。

QFaces 下载页面 -- 基于JSF的Ajax增强框架。


-----------------以下是 linkage 这个组件的属性说明,只有两个属性而已:


属性

类型

说明

必需

for

String

指定到需要提供需入帮助的组件ID, 如:

for=”id1,id2,id3” 将需要变成多级联动的页面组件的id”,”号隔开.这时,id1,id2,id3将被变成三级联动.

级别依次为:0, 1, 2 (你可以在后台绑定的方法中获得用户的触发级别)

listener

Method

组件所绑定的后台侦听方法,方法签名如下:

Items listener(Level)

你可以从参数Level中获得用户当前触发的下拉框的级别,当前值及label


















好吧,再来一张,看看是否有淘宝购物时的感觉!

Linkage示例


- huliqing@huliqing.name
- http://www.huliqing.name

posted on 2008-11-20 15:48 huliqing 阅读(3316) 评论(8)  编辑  收藏 所属分类: JSF

评论

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-11-20 23:09 murainwood

丑陋的实现。后台就是后台,前台就是前台。JavaScript+HTML+Ajax提交,想做成什么就做成什么。反正是提交一串数据,服务器返回一串数据,多么简单和清晰。Java也好,静态索引文件也好,PHP也好,ASP也好,CGI 也好...明白其中HTTP的原理,明白HTML的原理,这种小玩意儿信手拈来,有必要这样做么?
前台就是前台,后台就是后台,能解耦,尽量解耦  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-11-21 00:14 huliqing

@murainwood
程序这东西本来就是0101构成的,你要是知道怎么排序0与1,你都可以自己信手打个操作系统出来。
你明白操作系统的原理,你会不会自己也搞个windows出来?
如果考虑时间,精力,效率,金钱,你一定不会去这么做。
做组件是为了简化开发过程!你不知道你每天都在使用组件么?
只是组件有好有差而已,我不认为这个组件就是很好的,如果你有更好的实现,我一定向你学习,当然!我是诚心的,我也希望自己每一天都是在进步, 而且我一定会做得更好!  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-11-21 09:33 myloon

楼顶的murainwood
说JavaScript+HTML+Ajax就可以,我觉得你根本就没有做过太多的项目,也只是小打小闹过,JavaScript+HTML+Ajax确实可以,但是你不觉得它浪费了更多的时间吗,那样跟CS程序有什么区别呢,你还不如直接用微软的工具拖出来个界面,打成ActiveX包嵌入到网页得了,比你的JavaScript+HTML+Ajax来的快,直接和数据库打交道,也不需要你写什么后台代码了,还要生成你的JavaScript+HTML+Ajax需要的一串数据,你觉得那样不烦吗,转来转去,就为了那串数据,打成ActiveX包吧也比你JavaScript+HTML+Ajax的安全,楼顶的murainwood就做你的JavaScript+HTML+Ajax梦吧。
我支持huliqing,继续努力,写出更好的组件!
  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-11-23 18:02 TiGERTiAN

@murainwood
楼顶的,你做项目如果都用JavaScript+HTML+Ajax,那只能说你们的应用“太复杂”了,没有办法用现成可用的控件来实现,况且楼主是写的JSF控件配合JSF一起用的,类似于asp.net,做开发的时候一般还是用现成的成熟些的控件多些的,项目经理不会允许你花自己写JavaScript+HTML+Ajax来完成网上到处都是解决方案的控件的。  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-11-24 14:48

我支持楼主的做法,jsf提供了一个很好的框架供我们去实现那么好的级联菜单,这是jsf这种新框架带给我们的礼物,要好好的学习啊!  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-11-25 15:21 LQL

您好,我想请教一下,那个到城市区域街道的联动数据,能发给我一份吗,
lql008@sina.com谢谢了。  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2008-12-20 17:56 Luby

我不想说了,JSF就是一个框架,但是JSF里又有很多子框架,用JSF不如用ASP.NET  回复  更多评论   

# re: QFaces1.1 -- 二级,三级,四级联动...,好吧,来个超级联动! JSF 与 Ajax可以这样完美的结合 2012-07-24 15:25 刘永全

public Items listener(Level level) {
我是新手,请问能不能看看整个的java代码这个函数不能独立运行吧????  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

公告

文章原创,欢迎转载
——转载请注明出处及原文链接

随笔分类(60)

随笔档案(33)

最新评论

评论排行榜