如何在GWT celltable 2.3中创建依赖的dropndown / selection cell?

时间:2013-01-26 06:48:08

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

我正在使用gwt2.3 celltable。

在我的手册中,将会有多列中的多列依赖。

离。名称和地址列是相关的 名称和地址列包含我的自定义选择单元格。

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

当Name单元格包含jon时,我想设置US&英国地址小区

如果用户将名称单元格更改为tom,那么我想设置india&中国地址小区

如果用户将Name cell更改为steve,那么我想设置japana&地址单元格中的不丹

我希望在名称单元格选择发生变化时更改地址单元格中的相关数据。

我怎么能做到这一点?是否有任何示例代码或指针?

提前致谢。

4 个答案:

答案 0 :(得分:2)

此解决方案适用于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的值是否已更改并根据需要更新seletion值。例如:

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

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

答案 1 :(得分:0)

或者您可以执行类似创建自定义单元格的操作,该单元格具有可在该特定列的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问题

答案 2 :(得分:0)

这是我对DynamicSelectionCell的实现。

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

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

对于表格中的每一行 $ i ,将呈现存储在密钥 $ i 的Map中的选项。

适用于DataGrid,CellTable。

<强> CODE

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 :(得分:0)

Varun Tulsian的答案非常好,但代码不完整。

DynamicSelectionCell存储每一行​​&#39;地图中的选项。当单元格更新或呈现自身时,它会将您的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);
}
}