N级级联下拉列表 的实现思路
2007-07-27 12:51
232 查看
所谓N级级联下拉列表,就是由多个选择下拉列表组成的一组用来展示/选择某种信息的组件。
举个例子:
我们想选择中国的某个县,那么我们先会选择省,这时被选中的“省”的所有地市就应该被列出来了;这时我们选择一个地市,那么同样此时被选中的地市的所有县就会被列出来了。然后我们就可以选到我们需要的县了。
其实这个组件有一个更好的替代方法,那就是树结构。我认为以树的形式展示会更好写。
先不管它有没有存在的价值,反正我已经写完了,是那种利用ajax写的那种动态读取接连信息的。
好风以前还写了一棵树结构的选择组件,但不是动态的读取数据,是一次性的读取。还不大完善,以后争取完善吧(能够做成动态读取的就好了……)。
先说一下我的思路,
思路很简单:
1 有数据就必须有查询,那么查询语句存放在什么地方?当然是服务器端了,我用的是xml进行配置。
有查询就必须有参数,参数我也是在配置文件中配置的;
2 既然用到了ajax,那么就不可能没有脚本,这个组件中的脚本部分很简单,根据改变的option的值以及所属selector的序号向服务器端发送查询请求,然后将查询到的值填充到各个selector中去。
3 服务器端有点复杂:首先得分析配置文件吧?然后根据传递进来的查询参数(可选的)组织查询语句,并返回查询结果;然后进行下一级数据的查询,直到最底层。最后将数据统一起来返回给客户端。
实现:
实现起来没什么难的地方,就是麻烦些。
看一下配置文件:
[align=left]<mutiSelect-mapping>[/align]
[align=left] <params>[/align]
[align=left] <param name="param1" />[/align]
[align=left] </params>[/align]
[align=left] [/align]
[align=left] <selector serialNum="0" >[/align]
[align=left] <sql>[/align]
[align=left] SELECT m.value as value,m.name as label FROM mutitest m where m.fid='null' and m.id=':::param1: '[/align]
[align=left] </sql>[/align]
[align=left] </selector>[/align]
[align=left] <selector serialNum="1" >[/align]
[align=left] <sql>[/align]
[align=left] SELECT m.value as value,m.name as label FROM mutitest m where m.fid='::0::'[/align]
[align=left] </sql>[/align]
[align=left] </selector>[/align]
[align=left] <selector serialNum="2" >[/align]
[align=left] <sql>[/align]
[align=left] SELECT m.value as value,m.name as label FROM mutitest m where m.fid='::1::'[/align]
[align=left] </sql>[/align]
[align=left] </selector>[/align]
</mutiSelect-mapping>
其实看过配置文件后,我的开发思路基本上就很明了了。
举个例子:
我们想选择中国的某个县,那么我们先会选择省,这时被选中的“省”的所有地市就应该被列出来了;这时我们选择一个地市,那么同样此时被选中的地市的所有县就会被列出来了。然后我们就可以选到我们需要的县了。
其实这个组件有一个更好的替代方法,那就是树结构。我认为以树的形式展示会更好写。
先不管它有没有存在的价值,反正我已经写完了,是那种利用ajax写的那种动态读取接连信息的。
好风以前还写了一棵树结构的选择组件,但不是动态的读取数据,是一次性的读取。还不大完善,以后争取完善吧(能够做成动态读取的就好了……)。
先说一下我的思路,
思路很简单:
1 有数据就必须有查询,那么查询语句存放在什么地方?当然是服务器端了,我用的是xml进行配置。
有查询就必须有参数,参数我也是在配置文件中配置的;
2 既然用到了ajax,那么就不可能没有脚本,这个组件中的脚本部分很简单,根据改变的option的值以及所属selector的序号向服务器端发送查询请求,然后将查询到的值填充到各个selector中去。
3 服务器端有点复杂:首先得分析配置文件吧?然后根据传递进来的查询参数(可选的)组织查询语句,并返回查询结果;然后进行下一级数据的查询,直到最底层。最后将数据统一起来返回给客户端。
实现:
实现起来没什么难的地方,就是麻烦些。
看一下配置文件:
[align=left]<mutiSelect-mapping>[/align]
[align=left] <params>[/align]
[align=left] <param name="param1" />[/align]
[align=left] </params>[/align]
[align=left] [/align]
[align=left] <selector serialNum="0" >[/align]
[align=left] <sql>[/align]
[align=left] SELECT m.value as value,m.name as label FROM mutitest m where m.fid='null' and m.id=':::param1: '[/align]
[align=left] </sql>[/align]
[align=left] </selector>[/align]
[align=left] <selector serialNum="1" >[/align]
[align=left] <sql>[/align]
[align=left] SELECT m.value as value,m.name as label FROM mutitest m where m.fid='::0::'[/align]
[align=left] </sql>[/align]
[align=left] </selector>[/align]
[align=left] <selector serialNum="2" >[/align]
[align=left] <sql>[/align]
[align=left] SELECT m.value as value,m.name as label FROM mutitest m where m.fid='::1::'[/align]
[align=left] </sql>[/align]
[align=left] </selector>[/align]
</mutiSelect-mapping>
其实看过配置文件后,我的开发思路基本上就很明了了。
相关文章推荐
- Ajax实现级联下拉列表
- Ajax+SSM实现四级联下拉列表
- 用Knockoutjs与Asp.net MVC实现级联下拉列表
- Android 实现下拉列表级联
- 用Ajax技术和dwr框架两种方式实现下拉列表的级联效果
- 如何在SharePoint2007中实现下拉列表(DropDownList)的级联菜单效果
- JavaScript解析XML实现两级级联下拉列表
- JavaScript XML实现两级级联下拉列表
- asp.net实现省市区级联下拉列表并保存状态
- MVC3学习:利用mvc3+ajax实现级联下拉列表框
- js技术实现html页面解析xml文档的级联下拉列表操作
- Ajax详解及其案例分析之如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表
- Jquery实现简单的级联下拉列表 (省市)
- javascript实现级联下拉列表功能
- JavaScript实现下拉列表的级联
- 使用knockoutjs 实现级联下拉列表
- 级联下拉列表 ajax实现(两种方式)
- JavaScript解析XML实现两级级联下拉列表
- mvc用ViewData实现下拉列表的级联
- iOS开发中QQ好友列表下拉显示全部好友实现思路