在很多情况下,会遇到表的多对多关系,例如套餐和产品,一个套餐拥有多个产品,而一个产品又可以属于多个套餐,那么在编辑套餐时,你可能会用checkbox,列出所有的产品,供其选择,下面就通过实例来实现这个应用:
①、Model里设计关系
class Package< ActiveRecord::Base
has_and_belongs_to_many :products
end
class Product < ActiveRecord::Base
has_and_belongs_to_many :packages
end
②、手工建表packages_products
+---------------- +--------- +------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------------- +--------- +------+-----+---------+-------+
| package_id | int(11) | NO | MUL | NULL | |
| product_id | int(11) | NO | MUL | NULL | |
| product_amount | int(11) | NO | | 1 | |
| options | int(11) | YES | | NULL | |
+-----------------+----------+------+-----+---------+-------+
补充:多对多关系的另一种定义方法:关键字 :through
class PackProduct< ActiveRecord::Base
belongs_to :product
belongs_to :package
end
class Package< ActiveRecord::Base
has_many :pack_products
has_many :products, :through =>:pack_products
end
class Product < ActiveRecord::Base
has_many :pack_products
has_many :packages, :through =>:pack_products
end
③、在packages的edit视图里显示checkbox
%table{:border=> '0'}
- i = 0
- for product in Product.find( :all )
- if i % 9 == 0
%tr
%td
= check_box_tag "package[product_ids][ ]",
product.id, @package.products.include?(product)
= link_to product.name , product
- i = i+1
注:这里首先是用了Haml模板,所以蓝色部分最好写成一行,其次为了让每行(%tr)只显示10个选项,用了个比较笨的方法,就是计数器 i 。最后,看到 product_ids属性是package的has_and_belongs_to_many自动生成的 。
④、 修改PackageController的update方法
def update
params[:package][:product_ids] ||= [ ]
@package = Package.find(params[:id])
.....................
end
注意:update方法需要先使用params[:product][:product_ids] ||= [ ]来将product_ids清空不然当我们取消所有的productCheckbox时,后台sql不会传递空的product_ids数组,而是不传递product_ids参数这样会导致取消不了productCheckbox。
参考资料: http://hideto.iteye.com/blog/107422
<!--EndFragment-->
分享到:
相关推荐
Checkbox,也就是复选框,通常用于让用户从多个选项中选择一个或多个。在这个场景下,"多级选择"通常指的是分组或者层级结构的复选框,比如类别树或者导航菜单。 首先,我们需要理解基本的HTML Checkbox元素。一个...
这种组件结合了树形结构和复选框的功能,用户可以通过选择或取消选择节点来对数据进行多选操作,使得在层级关系复杂的数据组织中能够方便地进行批量操作。 **树形结构(Tree Structure)**: 树形结构是数据结构的...
这个场景通常出现在数据结构复杂,需要展示层次关系的时候,例如在ListView中嵌套一个Gridview,而Gridview内部再包含Checkbox。这种设计可以有效地展示大量数据并保持良好的用户体验。 **一、ListView与GridView**...
在实现三级复选框时,通常需要处理嵌套关系,即一个复选框的选择可能会影响其子复选框的状态。 首先,我们需要在 Vue 组件的模板中设置这些元素。例如: ```html <el-checkbox-group v-model="checkedList"> <el-...
在IT领域,`带checkBox的treeView`是一种常见的用户界面元素,它结合了树状数据结构和复选框的功能,通常用于展现具有层级关系的数据,并允许用户进行选择操作。这样的设计使得用户能够方便地对各个层次的数据进行...
在我们开发过程中,我们有的时候会碰到这么一种需求,就是需要单选,但是呢?得多行显示要选的内容item,常规做法使用...这就有点郁闷了,没关系,今天我们来提供一种新的实现方式,那就是流式布局来实现类似功能。
同时,控制器还需要处理Checkbox间的互斥关系,确保在一组单选框中只有一个被选中。 在实际开发中,可能会遇到以下挑战: - **响应式设计**:为了适配不同尺寸的屏幕和设备,需要确保Checkbox的布局和大小能够自动...
通过`<input type="checkbox">`创建一个复选框,用户可以勾选或取消以表示对某项内容的选择。我们可以为每个复选框设置一个`value`属性来标识其唯一性,以及一个`checked`属性来控制初始状态。 接下来,我们考虑...
综上所述,实现Flex AdvancedDataGrid中带复选框的树形结构涉及数据模型的设计、HierarchicalData的使用、AdvancedDataGrid的配置以及事件处理等多个方面。通过灵活应用这些技术,我们可以创建出功能强大且易于操作...
用户可以通过勾选这些复选框来选择或取消选择特定的节点,从而实现对数据树的多选操作。 2. **层级关联**:节点的选择不仅限于单个节点,还可以根据配置实现父节点与子节点的关联。例如,如果父节点被选中,其所有...
本案例中的"checkbox复选框"就是这样一个应用场景,通过JavaScript或者jQuery来实现复选框之间的联动效果。 首先,我们来看"checkbox复选框"的基本概念。复选框(Checkbox)是HTML中的一种表单元素,用户可以用来...
总结,"带checkbox的树"是一个结合了树形结构和复选框功能的交互组件,其核心在于通过JavaScript(可能是jQuery)实现节点的交互逻辑和复选状态管理。个人自制的版本可能具有独特的功能和优化,适应特定的使用场景。...
它结合了树形视图(Tree View)和复选框(Checkbox)的特性,为用户提供了一种多级选择的方式,使得用户可以对一组层次化的数据进行逐项选择或批量操作。 树形结构是一种数据表示方式,它通过节点和边来表示具有...
下面我们将深入探讨CheckBoxTree的概念、用途、实现以及与Z-Tree的关系。 1. CheckBoxTree的基本概念: CheckBoxTree是将树状结构的每个节点与一个复选框关联起来,用户可以通过点击复选框来选择或取消选择整个...
"checkbox树形展开效果"是这种概念的一个具体应用,它结合了多选框(checkbox)与树形结构,让用户能够以图形化的方式操作和选择具有层次关系的项目。 在实现"checkbox树形展开效果"时,我们通常会用到HTML、CSS和...
Tree checkbox组件结合了树形结构和复选框的功能,它允许用户在树状结构中选择一个或多个节点,并且支持选择整个分支(全选/全不选)。这种组件通常具有以下功能: - 递归选择:当父节点被选中时,所有子节点自动...
- 如果多个CheckBox有互斥关系,使用Radio Button而非CheckBox。 - 使用有意义的文本标签,解释每个CheckBox的作用。 综上所述,“CheckBox是否选中”不仅是获取用户输入的基本操作,还涉及到事件驱动编程的关键...
总结来说,"checkbox树 速度超快"可能是一个高效、轻量级的JavaScript实现,它的设计和实现体现了前端开发中的性能优化、代码组织和用户体验等多个重要方面。对于开发者而言,深入理解并掌握此类组件的实现原理和...
这种继承关系意味着开发者可以通过设置不同的属性来自定义**CheckBox** 的外观和行为。 #### 知识点二:CheckBox的使用场景 **CheckBox** 在Android应用中主要用于以下场景: 1. **多选功能**:在需要用户选择多...