漂亮的HABTM列表条目 [英] Pretty HABTM List Entry

问题描述

我有一个食谱，项目和单位表/模型。我有一个HABTM与食谱和项目的关系，并且我在添加/编辑食谱时得到默认的多重选择框。 （我使用Bake的大部分的一切）。问题是我需要将数量和单位与每个项目关联。

我希望的UI示例： b
$ b

它的一个重要组成部分是能够添加/删除/编辑单个项目。我想象看提交的表单数据，并使用一些jquery和克隆将工作。

当前模型（缩写为相关内容，即删除用户/注释等）：

p>

  class Item extends AppModel {
 var $ name ='Item'; 
 
 // id：int 
 // name：varchar 
 // unit_id：int 
 
 var $ belongsTo = array（
' Unit'=> array（
'className'=>'Unit'，
'foreignKey'=>'unit_id'
），
）; 
 
 var $ hasAndBelongsToMany = array（
'Recipe'=> array（
'className'=>'Recipe'，
'joinTable'=> 'recipes_items'，
'foreignKey'=>'item_id'，
'associationForeignKey'="'recipe_id'，
）
）; 
} 
  

。

  class Recipe extends AppModel {
 var $ name ='recipe'; 
 var $ displayField =name; 
 
 // id：int 
 // name：varchar 
 
 
 var $ hasAndBelongsToMany = array（
'Item'=> array（
'className'=>'Item'，
'joinTable'=>'recipes_items'，
'foreignKey'=>'recipe_id'，
'associationForeignKey '=>'item_id'，
）
）; 
} 
  

。

  class RecipesItem extends AppModel {
 var $ name ='RecipesItem'; 
 
 // id：int 
 //数量：int 
 // unit_id：int 
 // recipe_id：int 
 // item_id：int 
 
 
 
 var $ belongsTo = array（
'Unit'=> array（
'className'=>'Unit'，
'foreignKey'=>'unit_id'
），
'Recipe'=> array（
'className'=>'Recipe'，
'foreignKey' >'recipe_id'
），
'Item'=> array（
'className'=>'Item'，
'foreignKey'=>'item_id' 
）
）; 
} 
  

解决方案

将选择标签转换为更酷的东西。

这里是jquery-multiselect插件，我使用了很多。

更多信息：
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

I have a Recipe, Item, and Units table/model. I have a HABTM relationship with Recipe and Item, and I get the default multiple-select box when adding/editing Recipe. (am using Bake for everything for the most part). The problem is I need to associate quantities and units with each Item.

Sample of UI I'm hoping for:

A big component of it is the ability to add/delete/edit the individual items. I imagine looking at the submitted form data, and using some jquery and clone would work. But I was wondering if someone already created a Behavior perhaps for this already?

Current Models (shortened to the relevant stuff, ie removed users/notes/etc):

class Item extends AppModel {
    var $name = 'Item';

// id : int
// name : varchar
// unit_id : int

    var $belongsTo = array(
        'Unit' => array(
            'className' => 'Unit',
            'foreignKey' => 'unit_id'
        ),
    );

    var $hasAndBelongsToMany = array(
        'Recipe' => array(
            'className' => 'Recipe',
            'joinTable' => 'recipes_items',
            'foreignKey' => 'item_id',
            'associationForeignKey' => 'recipe_id',
        )
    );
}

.

class Recipe extends AppModel {
        var $name = 'recipe';
        var $displayField = "name";

// id : int
// name : varchar


        var $hasAndBelongsToMany = array(
            'Item' => array(
                'className' => 'Item',
                'joinTable' => 'recipes_items',
                'foreignKey' => 'recipe_id',
                'associationForeignKey' => 'item_id',
            )
        );
    }

.

class RecipesItem extends AppModel {
    var $name = 'RecipesItem';

// id : int
// quantity : int
// unit_id : int
// recipe_id : int
// item_id : int



    var $belongsTo = array(
        'Unit' => array(
            'className' => 'Unit',
            'foreignKey' => 'unit_id'
        ),
        'Recipe' => array(
            'className' => 'Recipe',
            'foreignKey' => 'recipe_id'
        ),
        'Item' => array(
            'className' => 'Item',
            'foreignKey' => 'item_id'
        )
    );
}

解决方案

You have to use javascript to "transform" the select tag into something "cooler".

Here is the jquery-multiselect plugin which I use quite a bit. You can easily set it up to replace all of your multi selects with 1 line of code.

More info here: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

这篇关于漂亮的HABTM列表条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！