Question

我想在SmartGWT中向ListGrid的HeaderSpan添加一个按钮。我尝试使用'HeaderSpan.setAttribute（（String property，Object value））方法，但它不起作用。以下是我尝试过的示例： -

ListGrid countryGrid = new ListGrid();
HeaderSpan ident = new HeaderSpan("Identification", new String[]{"countryCode", "countryName"});
ident.setAttribute("control", new Button("Test"));
countryGrid.setHeaderSpans(ident);
countryGrid.draw();

请帮忙！

Answer 1

最后我找到了向HeaderSpan添加按钮的方法。下面是代码（为简洁而省略了import语句）： -

public class AdvancedListGrid extends ListGrid {
    public void setHeaderSpanButtons() {
        this.getAttribute("headerSpans");

        NodeList<Element> list = this.getElement().getElementsByTagName("td");
        int length = list.getLength();
        for(int index = 0; index < length; index++) {
            Element element = list.getItem(index);

            if(element.getInnerHTML().toString().equals("Identification")) {
                element.setInnerHTML(null);
                element.insertFirst(createHeaderSpanContents());
            }
        }
    }

    private Element createHeaderSpanContents() {
        HLayout hLayout = new HLayout();
        Button button = new Button("+");
        button.setHeight(20);
        button.setWidth(20);
        button.addClickHandler(new ClickHandler(){

            @Override
            public void onClick(ClickEvent event) {
                SC.say("Why did you click me?");
            }});

        Label title = new Label("Test Title");
        title.setWidth(70);
        title.setHeight(20);

        hLayout.addMember(button);
        hLayout.addMember(new LayoutSpacer());
        hLayout.addMember(title);

        return hLayout.getElement();
    }
}

客户端类将调用AdvancedListGrid.setHeaderSpanButtons（）方法向标题范围添加按钮。当然，您可以自定义方法以满足您的需求。

Answer 2

我正在测试它，因为我需要在HeaderSpan中放置一个日历。感谢您分享您的想法，虽然设置正确的导入需要一段时间，但它仍然有很大的帮助。

注释：setHeaderSpanButtons（）方法仅在设置了ListGrid的数据源时才有效。如果不是，则根本不显示标题。

改进：你可以在循环中添加一个中断，不需要循环整个NodeList：

if(element.getInnerHTML().toString().equals("Identification")) {
            element.setInnerHTML(null);
            element.insertFirst(createHeaderSpanContents());
            break;
        }

一个问题：这一行的目的是什么：

this.getAttribute("headerSpans");

最后，它对我不起作用 - 跨度始终保持为文本“识别”。有什么建议吗？

感谢。

Answer 3

你在IE上测试过吗？我在FF中测试过，它工作正常，但在IE中点击我的应用程序时遇到问题。据我所知，这是由于GWT和SmartGWT的混合。所以我想在这个例子中使用ToolStrip会更好：http://www.smartclient.com/smartgwt/showcase/#grid_appearance_preferences

Answer 4

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Node;
import com.google.gwt.dom.client.NodeList;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.grid.ListGrid;

public class AdvancedListGrid extends ListGrid {
    public AdvancedListGrid() {

        // Create the HeaderSpan with title "Identification"

        addDrawHandler(new DrawHandler(){

            @Override
            public void onDraw(DrawEvent event) {
                insertCalendar();
            }});
    }

    public void insertCalendar() {
        for(Element element : DOMUtils.getElementsByTagName("td")) {

            if(element.getInnerHTML().equals("Identification")) {
                createCalendar(element);

            }
        }
    }

    public void createCalendar(Element element) {
        DOMUtils.removeAllChildNodes(element);

        // Create the SmartGWT calendar object. Say the object cal.

        element.setInnerHTML(cal.getInnerHTML());
    }
}

class DOMUtils {
    public static void removeAllChildNodes(Element element) {
        NodeList<Node> childList = element.getChildNodes();
        for(int childIndex = 0; childIndex < childList.getLength(); childIndex++) {
            element.removeChild(childList.getItem(childIndex));
        }
    }

    public static Element[] getElementsByTagName(String tagName)
    {
        JavaScriptObject elements = getElementsByTagNameInternal(tagName);
        int length = getArrayLength(elements);
        Element[] result = new Element[length];
        for (int i=0; i<length; i++)
        {
            result[i] = getArrayElement(elements, i);
        }
        return result;
    }

    private static native JavaScriptObject getElementsByTagNameInternal(String tagName)/*-{
    return $doc.getElementsByTagName(tagName);
  }-*/;

    private static native int getArrayLength(JavaScriptObject array)/*-{
    return array.length;
  }-*/;

    private static native Element getArrayElement(JavaScriptObject array, int position)/*-{
    return (position>=0 && position<array.length?array[position]:null);
  }-*/;
}

Answer 5

这是在没有JSNI或DOM的情况下完成的：加载数据源时，此网格使用动态内容更新第二个span标头的内容。或者，如果内容是静态的，您可以使用“onDraw”而不是“dataArrived”

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.HeaderSpan;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.events.DataArrivedEvent;
import com.smartgwt.client.widgets.grid.events.DataArrivedHandler;

public class MyGrid extends ListGrid {

    private HeaderSpan          oneHeaderSpan = new HeaderSpan("span one", new String[] { "a", "b", "c" });
    private HeaderSpan          twoHeaderSpan = new HeaderSpan("span two", new String[] { "d", "e", "f" });
    final private static String ONE_SPAN_ID   = "span1";
    final private static String TWO_SPAN_ID   = "span2";

    public MyGrid() {

        setID("MyGrid");
        setHeight100();
        setWidth100();
        setDataSource(MyDS);
        setHeaderSpans(oneHeaderSpan, twoHeaderSpan);
        oneHeaderSpan.setAttribute("spanId", ONE_SPAN_ID);
        twoHeaderSpan.setAttribute("spanId", TWO_SPAN_ID);
        setHeaderHeight(50);

        addDataArrivedHandler(new DataArrivedHandler() {
            @Override
            public void onDataArrived(DataArrivedEvent event) {
                Canvas headerSpans = Canvas.getById(getID() + "_headerSpan");
                // getPeers() did not work for IE
                for (Canvas peer : headerSpans.getParentCanvas().getChildren()) {
                    if (peer.getAttribute("spanId") != null && peer.getAttribute("spanId").equals(TWO_SPAN_ID)) {
                        peer.addChild(createHeaderSpanContents(event));
                    }
                }
            }
        });
    }

    private Canvas createHeaderSpanContents(DataArrivedEvent event) {

        // Your favorite Canvas here:
        Button button = new Button();
        button.setLayoutAlign(Alignment.CENTER);
        button.setHeight100();
        button.setWidth100();
        button.setTitle("+");
        return button;
    }
}

如果您使用4.1d之前的smartgwt版本，则使用headerSpans.getParentElement（）。getChildren（））也可以。

如何在SmartGWT的HeaderSpan中添加按钮

5 个答案: