ruby-on-rails - 如何过滤依赖于网格或表单（netzke）中其他组合框的组合框？

Question

领域模型：type1、type2、type3 和植物。

$ rails g model type1 name:string
$ rails g model type2 name:string
$ rails g model type3 type1:references type2:references name:string
$ rails g model plant type1:references type2:references type3:references name:string

在植物的网格面板中，将有三个组合框列：type1、type2 和 type3。Type3 取决于 type1 和 type2。选择type1和type2中的任何一个时如何过滤type3组合框？

Answer 1

我是 Rails 和 Netzke 的新手，但这就是我解决问题的方法。

首先，如果 Type3 依赖于 Type1 和 Type2，那么在 Plant 中应该只引用 Type3。

所以，而不是

rails g model plant type1:references type2:references type3:references name:string

利用

rails g model plant type3:references name:string

您始终可以使用 Netzke 的__（双下划线）表示法来引用 type1 和 type2。这是我的植物网格版本。我不允许内联编辑，除了大多数琐碎的模型。

class Plants < Netzke::Basepack::Grid
  def configure(c)
    super
    c.model = 'Plant'
    c.persistence = true
    c.columns = [
      { name: :type3__type1__name, header: 'Type 1'},
      { name: :type3__type2__name, header: 'Type 2'},
      { name: :type3__name, header: 'Type 3'},
      { name: :name, header: 'Plant Name' }
    ]
    c.enable_edit_inline = false
    c.enable_add_inline = false
  end

  def preconfigure_record_window(c)
    super
    c.form_config.klass = PlantForm
  end
end

要连接组合框，您需要：

1. 定义 type3 组合的范围，使其数据依赖于 type1 和 type2 ID。

   #Example scope definition
   scope: {type1_id: component_session[:type1_id],
           type2_id: component_session[:type2_id]}
   

2. 为 type1 和 type2 组合定义侦听器（参见js_configure方法）。侦听器将检测 type1 和 type2 的任何变化，并准备 type3 以在下次被选中时刷新其数据。

3. 端点和会话变量用于 ID 交换。

   //JavaScript code
   //Definition of listener function for type1 combo
   var handleType1Change = function() {
   
     //Type3 value is no longer valid
     type3Combo.clearValue();
   
     //Setting lastQuer to null will force data refresh for type3 combo
     //next time it gets selected.
     type3Combo.lastQuery = null;
   
     //Call endpoint to define session variable with ID of type1 combo
     this.selectType1({type1_id: type1Combo.value});
   };
   
   #Ruby code
   #The endpoint is called from handleType1Chnage listener to
   #set session variable with selected ID in type1 combo.
   endpoint :select_type1 do |params, this|
     component_session[:type1_id] = params[:type1_id]
   end
   

这是我的植物表格的完整代码：

class PlantForm< Netzke::Basepack::Form
  def configure(c)
    super
    c.model = 'Plant'
    c.title = 'Plant'
    c.items = [
      {
        field_label: 'Type1',
        xtype: :combo,
        store: Type1.select([:id, :name]).map { |x| [x.id, x.name] },
        id: 'type1Combo',
        #Sets the value for type1 in case change form is opened
        value: record && record.id ? record.type3.type1_id : nil
      },
      {
        field_label: 'Type2',
        xtype: :combo,
        store: Type2.select([:id, :name]).map { |x| [x.id, x.name] },
        id: 'type2Combo',
        #Sets the value for type2 in case change form is opened
        value: record && record.id ? record.type3.type2_id : nil
      },
      { 
        field_label: 'Type3', 
        name: :type3__name,
        id: 'type3Combo',
        data_store: {auto_load: false},
        scope: {type1_id: component_session[:type1_id],
                type2_id: component_session[:type2_id]}
      },
      { field_label: 'Name', name: :name }
    ]
  end

  js_configure do |c|
    c.init_component = <<-JS
      function() {
        this.callParent();

        var type1Combo = this.getComponent('type1Combo');
        var type2Combo = this.getComponent('type2Combo');
        var type3Combo = this.getComponent('type3Combo');

        var handleType1Change = function() {
          type3Combo.clearValue();
          type3Combo.lastQuery = null; //force data refresh in type3 combo
          this.selectType1({type1_id: type1Combo.value});
        };

        var handleType2Change = function() {
          type3Combo.clearValue();
          type3Combo.lastQuery = null;
          this.selectType2({type2_id: type2Combo.value});
        };

        type1Combo.addListener('select', handleType1Change, this);
        type2Combo.addListener('select', handleType2Change, this);
      }
    JS
  end

  endpoint :select_type1 do |params, this|
    component_session[:type1_id] = params[:type1_id]
  end

  endpoint :select_type2 do |params, this|
    component_session[:type2_id] = params[:type2_id]
  end

end