【问题标题】:How to create dependant dropndown/selection cell In GWT celltable 2.3?如何在 GWT celltable 2.3 中创建依赖下拉/选择单元格?
【发布时间】:2013-01-26 06:48:07
【问题描述】:

我正在使用 gwt2.3 单元格表。

在我的单元格表中,有几列是依赖的。

例如。名称和地址列是依赖的 名称和地址列包含我的自定义选择单元格。

在名称列中:1 个单元格包含 jon,tom,steve

当名称单元格包含 jon 时,我想在地址单元格中设置美国和英国

如果用户将名称单元格更改为 tom,那么我想在地址单元格中设置印度和中国

如果用户将名称单元格更改为 steve,那么我想在地址单元格中设置 japana 和 bhutan

当名称单元格选择更改时,我想更改地址单元格中的依赖数据。

我怎样才能做到这一点?有任何示例代码或指针吗?

【问题讨论】:

  • 你的解释很难理解...你想改变Cell,在你改变选择的时候?
  • @Sam 我相信是的。 Vaibhav,我们尝试了类似的解决方案,但代码变得令人难以置信的糟糕!!!
  • @Vaibhav 我尝试了同样的方法,但它没有用!!!!!!。因为很难区分单个 Dom Element of Row。我根据需要更改了列行为。即第一行第一列更改影响第二列,或者可以是任何列作为代码。然后选择其他行,第一行保持原样。并且第一行的所有更改都已过去。
  • 您的问题不清楚:您有两列,每列都包含一个下拉列表,并且您希望当您从第一个下拉列表中选择一个选项时,它会更改第二个下拉列表中的可用值,是对?你为下拉菜单制作了一个自定义单元格吗?
  • @qwertzguy #1 是的,我为下拉菜单制作了 customSelectionCell

标签: javascript gwt dom-events custom-cell gwt-celltable


【解决方案1】:

此解决方案适用于 GWT 2.5,但它可能适用于 2.3。 我认为最好的是在更改第一列的选择时修改 RecordInfo 元素。您可以在您的 CustomSelectionCell 中执行类似的操作:

@Override
public void onBrowserEvent(Context context, Element parent, C value, NativeEvent event, ValueUpdater<C> valueUpdater) {
    super.onBrowserEvent(context, parent, value, event, valueUpdater);
    if (BrowserEvents.CHANGE.equals(event.getType())) {
        Xxxxx newValue = getSelectedValueXxxxx();
        valueUpdater.update(newValue);
    }
}

然后在您使用单元格的地方添加一个像这样的 fieldUpdater,它将使用新值更新 RecordInfo 并要求重绘该行:

column.setFieldUpdater(new FieldUpdater<.....>() {
    ....
    recordInfo.setXxxxx(newValue);
    cellTable.redrawRow(index);
    ....
});

这将调用另一个 CustomSelectionCell 的渲染,在那里您将能够检查 RecordInfo 的值是否已更改并根据需要更新选择值。示例:

@Override
public void render(Context context, C value, SafeHtmlBuilder sb) {
    if (!value.getXxxxx().equals(this.lastValue)) {
        this.items = loadItemsForValueXxxx(value.getXxxxx());
    }
    .... // Your usual render.
}

当您更改项目以设置默认选定项目时要小心。

【讨论】:

  • 能否提供样例demo+代码,很好玩/实验
  • 不,很抱歉我没有时间重新创建项目并重新编码您的 CustomSelectionCell 等。但是集成这些 sn-ps 代码对您来说应该不会太难.
  • @qwertzguy:你能解释一下我正在尝试做同样的事情吗?我知道如何更新选择单元格列表,但不知道如何在另一列的字段更新器上触发选择单元格的渲染方法。
  • @AnkitSingla 您需要在“另一列”上使用 setFieldUpdater(第二个代码 sn-p)。调用 cellTable.redrawRow(index) 将触发所有列的渲染。
  • @qwertzguy :我有地图 , List>>,第一个选择列包含地图的键集,我想根据第 1 列的选择更新第二个选择列列表。问题是它更新所有行我只想更新当前行。
【解决方案2】:

这是我的 DynamicSelectionCell 实现。

DynamicSelectionCell 允许您为同一个 GWT 表中的不同行呈现不同的选项。

使用单个 DynamicSelectionCell 对象并使用 addOption 方法为每一行添加选项。选项存储在 Map 中,Key 为行号。

对于表中的每一行 $i,都会呈现存储在 Map 中键 $i 的选项。

适用于 DataGrid、CellTable。

代码

public class DynamicSelectionCell extends AbstractInputCell<String, String> {

    public TreeMap<Integer, List<String>> optionsMap = new TreeMap<Integer, List<String>>();
    interface Template extends SafeHtmlTemplates {
        @Template("<option value=\"{0}\">{0}</option>")
        SafeHtml deselected(String option);

        @Template("<option value=\"{0}\" selected=\"selected\">{0}</option>")
        SafeHtml selected(String option);
    }

    private static Template template;

    private TreeMap<Integer, HashMap<String, Integer>> indexForOption = new TreeMap<Integer, HashMap<String, Integer>>();

    /**
     * Construct a new {@link SelectionCell} with the specified options.
     *
     * @param options the options in the cell
     */
    public DynamicSelectionCell() {
        super("change");
        if (template == null) {
            template = GWT.create(Template.class);
        }
    }

    public void addOption(List<String> newOps, int key){
        optionsMap.put(key, newOps);
        HashMap<String, Integer> localIndexForOption = new HashMap<String, Integer>();
        indexForOption.put(ind, localIndexForOption);
        refreshIndexes();
    }

    public void removeOption(int index){        
        optionsMap.remove(index);
        refreshIndexes();
    }

    private void refreshIndexes(){
        int ind=0;
        for (List<String> options : optionsMap.values()){
            HashMap<String, Integer> localIndexForOption = new HashMap<String, Integer>();
            indexForOption.put(ind, localIndexForOption);
            int index = 0;
            for (String option : options) {
                localIndexForOption.put(option, index++);
            }
            ind++;
        }
    }

    @Override
    public void onBrowserEvent(Context context, Element parent, String value,
            NativeEvent event, ValueUpdater<String> valueUpdater) {
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        String type = event.getType();
        if ("change".equals(type)) {
            Object key = context.getKey();
            SelectElement select = parent.getFirstChild().cast();
            String newValue = optionsMap.get(context.getIndex()).get(select.getSelectedIndex());
            setViewData(key, newValue);
            finishEditing(parent, newValue, key, valueUpdater);
            if (valueUpdater != null) {
                valueUpdater.update(newValue);
            }
        }
    }

    @Override
    public void render(Context context, String value, SafeHtmlBuilder sb) {
        // Get the view data.
        Object key = context.getKey();
        String viewData = getViewData(key);
        if (viewData != null && viewData.equals(value)) {
            clearViewData(key);
            viewData = null;
        }

        int selectedIndex = getSelectedIndex(viewData == null ? value : viewData, context.getIndex());
        sb.appendHtmlConstant("<select tabindex=\"-1\">");
        int index = 0;
        try{
        for (String option : optionsMap.get(context.getIndex())) {
            if (index++ == selectedIndex) {
                sb.append(template.selected(option));
            } else {
                sb.append(template.deselected(option));
            }
        }
        }catch(Exception e){
            System.out.println("error");
        }
        sb.appendHtmlConstant("</select>");
    }

    private int getSelectedIndex(String value, int ind) {
        Integer index = indexForOption.get(ind).get(value);
        if (index == null) {
            return -1;
        }
        return index.intValue();
    }
} 

【讨论】:

    【解决方案3】:

    Varun Tulsian 的回答很好,但是代码不完整。

    DynamicSelectionCell 将每行的选项存储在地图中。当单元格更新或呈现自身时,它会将 Context 中的行索引与地图中匹配的行列表相匹配。

    对于后代,请参阅下面的简化和更新版本:

    public class DynamicSelectionCell extends AbstractInputCell<String, String> {
    
    interface Template extends SafeHtmlTemplates {
        @Template("<option value=\"{0}\">{0}</option>")
        SafeHtml deselected(String option);
    
        @Template("<option value=\"{0}\" selected=\"selected\">{0}</option>")
        SafeHtml selected(String option);
    }
    
    private static Template template;
    
    /**
     *  key: rowIndex
     *  value: List of options to show for this row
     */
    public TreeMap<Integer, List<String>> optionsMap = new TreeMap<Integer, List<String>>();
    
    /**
     * Construct a new {@link SelectionCell} with the specified options.
     *
     */
    public DynamicSelectionCell() {
        super("change");
        if (template == null) {
            template = GWT.create(Template.class);
        }
    }
    
    public void addOptions(List<String> newOps, int rowIndex) {
        optionsMap.put(rowIndex, newOps);
    }
    
    public void removeOptions(int rowIndex) {
        optionsMap.remove(rowIndex);
    }
    
    @Override
    public void onBrowserEvent(Context context, Element parent, String value,
                               NativeEvent event, ValueUpdater<String> valueUpdater) {
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        String type = event.getType();
        if ("change".equals(type)) {
            Object key = context.getKey();
            SelectElement select = parent.getFirstChild().cast();
            String newValue = optionsMap.get(context.getIndex()).get(select.getSelectedIndex());
            setViewData(key, newValue);
            finishEditing(parent, newValue, key, valueUpdater);
            if (valueUpdater != null) {
                valueUpdater.update(newValue);
            }
        }
    }
    
    @Override
    public void render(Context context, String value, SafeHtmlBuilder sb) {
        // Get the view data.
        Object key = context.getKey();
        String viewData = getViewData(key);
        if (viewData != null && viewData.equals(value)) {
            clearViewData(key);
            viewData = null;
        }
    
        int selectedIndex = getSelectedIndex(viewData == null ? value : viewData, context.getIndex());
        sb.appendHtmlConstant("<select tabindex=\"-1\">");
        int index = 0;
        try {
            for (String option : optionsMap.get(context.getIndex())) {
                if (index++ == selectedIndex) {
                    sb.append(template.selected(option));
                } else {
                    sb.append(template.deselected(option));
                }
            }
        } catch (Exception e) {
            System.out.println("error");
        }
        sb.appendHtmlConstant("</select>");
    }
    
    private int getSelectedIndex(String value, int rowIndex) {
        if (optionsMap.get(rowIndex) == null) {
            return -1;
        }
        return optionsMap.get(rowIndex).indexOf(value);
    }
    }
    

    【讨论】:

      【解决方案4】:

      或者您可以执行一些操作,例如创建一个自定义单元格,其中包含您可以在该特定列的 getValue 中调用的方法

      final DynamicSelectionCell selection = new DynamicSelectionCell("...");
          Column<GraphFilterCondition, String> operandColumn=new Column<GraphFilterCondition, String>(selection) {
              @Override
              public String getValue(FilterCondition object) {
                  if(object.getWhereCol()!=null){
                       ((DynamicSelectionCell)this.getCell()).addOptions(new String[]{">","<",">="});
                  }
                  if(object.getWhereCondition()!=null){
                      return object.getWhereCondition().getGuiName();
                  }
                  return "";
              }
          };
      

      我猜这应该可行。

      也检查这个other问题

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-04-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-06-17
        相关资源
        最近更新 更多