`
wanglian
  • 浏览: 69336 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

tree_select - 树形结构联动下拉框插件

    博客分类:
  • Ruby
阅读更多

树形结构经常遇到,比如"省-市-区"之类的.而在做页面时有时需要以联运下拉框的方式来显示.自己动手做还是挺麻烦的.Google了一下,居然没找到一个可用的工具.于是自己写了一个插件, 就叫tree_select. 放在github

目前主要功能有:
1 可自定义结构
2 可即时添加元素
3 表单辅助方法

先决条件:
tree_select 依赖 acts_as_tree 插件.

安装:

ruby script/plugin install git://github.com/wanglian/tree_select.git


使用:
1 定义结构

ruby ruby script/generate tree_select region Country State City


2 run migration

rake db:migrate


3 修改 routes.rb, 添加一行:

map.resources :regions


4 view中使用,确保包含了相关的JS文件

<%= javascript_include_tag :defaults %>


然后可在表单中这么用:

<% form_for @user do |f| %>
  ...
  <%= region_select "user[region_id]" %>
  ...
<% end %>


表单辅助方法有两个选项:

readonly - 是否允许即时添加元素
complete_must - 是否必须选择所有的下拉框.


示例有一个在这里

1
0
分享到:
评论
2 楼 adidaskebi123 2010-02-24  
什么样的效果呢?
是不是只有一个下拉框?树状显示呢?
你的示例好像不能看了!
1 楼 terrywen 2009-01-14  
不错 正好可以用 谢谢哦

相关推荐

    jQuery联动下拉框 jQuery optionTree

    optionTree插件是基于jQuery的一个扩展,它的设计目标是构建具有层级结构的联动下拉框。在一些复杂的表单中,比如地区选择、产品分类等,往往需要展示一种树状的层次关系,这时optionTree就能发挥出它的优势。它不仅...

    jsTreeSelect jquery 树形下拉菜单

    - `core`: 设置基本的树结构和行为,如数据源、是否允许编辑等。 - `checkbox`: 控制复选框的显示和行为,如三态模式、同级联动等。 - `plugins`: 添加额外的功能插件,如搜索、拖放、状态保存等。 - `themes`: ...

    为dwz扩展树形下拉框

    标题“为dwz扩展树形下拉框”指的是在DWZ(Dynamic Web Zone)框架中对树形下拉框功能的扩展。DWZ是一个基于jQuery的前端开发框架,主要用于构建富交互式的Web应用。这个扩展可能涉及到在原有的DWZ组件基础上增加或...

    解决layui 三级联动下拉框更新时回显的问题

    最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 &lt;&#37;--监听省份选择 --%&gt; form.on('select(uprovinceId)', function(data){ initCityList('change')...

    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    在这个组件中,`&lt;el-tree&gt;`是Element UI提供的树形控件,`data`属性接收树形结构数据,`node-key`用于唯一标识每个节点,`size`控制节点的大小,`highlight-current`高亮当前选中节点,`check-on-click-node`则在...

    封装element-ui下拉树状多选单选.zip

    在这个项目中,开发者可能已经处理了el-tree和el-select的联动,使得用户在树形结构中选择的项会反映在下拉框中,反之亦然。此外,组件还可能实现了模糊查询功能,允许用户通过输入关键字快速查找需要的节点,提高了...

    EXTJS 动态生成下来树形框

    在EXTJS中,我们通常使用`Ext.tree.Panel`或`Ext.widget('treepanel')`来创建树形结构,并结合`Ext.form.field.ComboBox`来构建下拉效果。下面将深入探讨实现这个功能的关键步骤和相关知识点: 1. **创建树形数据...

    java-数据库—省县区三级联动

    在三级联动中,JSP可能包含JavaScript代码,用于动态更新下拉框选项。 3. **Servlet或Controller**:Java的Servlet或者基于MVC(Model-View-Controller)框架的Controller层,如Spring MVC,负责接收请求,处理业务...

    基于layui的下拉列表的数据回显方法

    完成后,清空二级列表的内容,并将新获取的数据填充进去,最后调用layui的`form.render('select')`方法重新渲染下拉列表,以确保数据正确显示。 ```javascript form.on('select(quiz1)', function(data) { var pId...

    thinkPHP实现的省市区三级联动功能示例

    在开发Web应用时,省市区三级联动功能是一个常见的需求,特别是在处理地址信息时。这个功能允许用户依次选择省份、城市和区域,这三个选项之间存在层级关系。本文将介绍如何使用PHP框架ThinkPHP来实现这种功能。 ...

    easyui api示例教程

    4. **Tree**:树形控件适用于展示层次结构的数据。EasyUI 提供了展开/折叠节点、选择节点等功能。你可以通过 `data` 属性直接提供节点数据,或者使用 `load` 方法动态加载。`onClick` 事件可以捕获用户点击节点的...

Global site tag (gtag.js) - Google Analytics