`
lzqustc
  • 浏览: 211087 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Checkbox实现多对多关系

阅读更多

在很多情况下,会遇到表的多对多关系,例如套餐和产品,一个套餐拥有多个产品,而一个产品又可以属于多个套餐,那么在编辑套餐时,你可能会用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-->
分享到:
评论

相关推荐

    javascript实现checkbox多级选择

    Checkbox,也就是复选框,通常用于让用户从多个选项中选择一个或多个。在这个场景下,"多级选择"通常指的是分组或者层级结构的复选框,比如类别树或者导航菜单。 首先,我们需要理解基本的HTML Checkbox元素。一个...

    checkbox tree 带checkbox的树

    这种组件结合了树形结构和复选框的功能,用户可以通过选择或取消选择节点来对数据进行多选操作,使得在层级关系复杂的数据组织中能够方便地进行批量操作。 **树形结构(Tree Structure)**: 树形结构是数据结构的...

    两层嵌套的checkbox记录选中状态

    这个场景通常出现在数据结构复杂,需要展示层次关系的时候,例如在ListView中嵌套一个Gridview,而Gridview内部再包含Checkbox。这种设计可以有效地展示大量数据并保持良好的用户体验。 **一、ListView与GridView**...

    vue基于element-ui的三级CheckBox复选框功能的实现代码.zip

    在实现三级复选框时,通常需要处理嵌套关系,即一个复选框的选择可能会影响其子复选框的状态。 首先,我们需要在 Vue 组件的模板中设置这些元素。例如: ```html &lt;el-checkbox-group v-model="checkedList"&gt; &lt;el-...

    带checkBox的treeView

    在IT领域,`带checkBox的treeView`是一种常见的用户界面元素,它结合了树状数据结构和复选框的功能,通常用于展现具有层级关系的数据,并允许用户进行选择操作。这样的设计使得用户能够方便地对各个层次的数据进行...

    Android流式布局实现多行Checkbox功能.zip

    在我们开发过程中,我们有的时候会碰到这么一种需求,就是需要单选,但是呢?得多行显示要选的内容item,常规做法使用...这就有点郁闷了,没关系,今天我们来提供一种新的实现方式,那就是流式布局来实现类似功能。

    自定义iOS中的Checkbox

    同时,控制器还需要处理Checkbox间的互斥关系,确保在一组单选框中只有一个被选中。 在实际开发中,可能会遇到以下挑战: - **响应式设计**:为了适配不同尺寸的屏幕和设备,需要确保Checkbox的布局和大小能够自动...

    CheckBox分级选中 复选框 上下级 联动

    通过`&lt;input type="checkbox"&gt;`创建一个复选框,用户可以勾选或取消以表示对某项内容的选择。我们可以为每个复选框设置一个`value`属性来标识其唯一性,以及一个`checked`属性来控制初始状态。 接下来,我们考虑...

    flex advancedDataGrid 中如何实现带checkbox的树

    综上所述,实现Flex AdvancedDataGrid中带复选框的树形结构涉及数据模型的设计、HierarchicalData的使用、AdvancedDataGrid的配置以及事件处理等多个方面。通过灵活应用这些技术,我们可以创建出功能强大且易于操作...

    jstree_checkbox

    用户可以通过勾选这些复选框来选择或取消选择特定的节点,从而实现对数据树的多选操作。 2. **层级关联**:节点的选择不仅限于单个节点,还可以根据配置实现父节点与子节点的关联。例如,如果父节点被选中,其所有...

    checkbox二级联动-亲测有效

    本案例中的"checkbox复选框"就是这样一个应用场景,通过JavaScript或者jQuery来实现复选框之间的联动效果。 首先,我们来看"checkbox复选框"的基本概念。复选框(Checkbox)是HTML中的一种表单元素,用户可以用来...

    带checkbox的树

    总结,"带checkbox的树"是一个结合了树形结构和复选框功能的交互组件,其核心在于通过JavaScript(可能是jQuery)实现节点的交互逻辑和复选状态管理。个人自制的版本可能具有独特的功能和优化,适应特定的使用场景。...

    checkbox树形结构

    它结合了树形视图(Tree View)和复选框(Checkbox)的特性,为用户提供了一种多级选择的方式,使得用户可以对一组层次化的数据进行逐项选择或批量操作。 树形结构是一种数据表示方式,它通过节点和边来表示具有...

    CheckBoxTree

    下面我们将深入探讨CheckBoxTree的概念、用途、实现以及与Z-Tree的关系。 1. CheckBoxTree的基本概念: CheckBoxTree是将树状结构的每个节点与一个复选框关联起来,用户可以通过点击复选框来选择或取消选择整个...

    checkbox树形展开效果

    "checkbox树形展开效果"是这种概念的一个具体应用,它结合了多选框(checkbox)与树形结构,让用户能够以图形化的方式操作和选择具有层次关系的项目。 在实现"checkbox树形展开效果"时,我们通常会用到HTML、CSS和...

    Tree checkbox Demo

    Tree checkbox组件结合了树形结构和复选框的功能,它允许用户在树状结构中选择一个或多个节点,并且支持选择整个分支(全选/全不选)。这种组件通常具有以下功能: - 递归选择:当父节点被选中时,所有子节点自动...

    CheckBox是否选中

    - 如果多个CheckBox有互斥关系,使用Radio Button而非CheckBox。 - 使用有意义的文本标签,解释每个CheckBox的作用。 综上所述,“CheckBox是否选中”不仅是获取用户输入的基本操作,还涉及到事件驱动编程的关键...

    checkbox 树 速度超快

    总结来说,"checkbox树 速度超快"可能是一个高效、轻量级的JavaScript实现,它的设计和实现体现了前端开发中的性能优化、代码组织和用户体验等多个重要方面。对于开发者而言,深入理解并掌握此类组件的实现原理和...

    Android2.2 r1 API 中文文档系列(10) —— CheckBox

    这种继承关系意味着开发者可以通过设置不同的属性来自定义**CheckBox** 的外观和行为。 #### 知识点二:CheckBox的使用场景 **CheckBox** 在Android应用中主要用于以下场景: 1. **多选功能**:在需要用户选择多...

Global site tag (gtag.js) - Google Analytics