Question

我的任务是：带有列的数据绑定ListGrid。此列的标题应为“{{{{}}格式DD-MM-YYYY}的信息”+一个DateItem（仅限图标选择器），用户可以从中修改infoDate，默认为当前日期。根据所选日期，列中的值会发生变化。

所以，我从这个问题How to add button in HeaderSpan of SmartGWT中提出了一个想法，以达到下面的代码。不幸的是有一个问题：DateItem似乎不可点击，它看起来就像一个图像。此外，我无法删除TextField，它可以是文本字段或3个可选选项字段。

我建议使用innerHTML不会采用picker本身的功能，因为我尝试使用Calendar，DateChooser和DatePicker并且它有效，但问题出在那里（我只需要打开的日历图标） DatePicker onClick）。

提前感谢您的任何帮助或想法！

导入：

infoDate

代码：

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;

类DOMUtils：

ListGrid infoTable = new ListGrid();
infoTable.setShowRecordComponents(true);
infoTable.setShowRecordComponentsByCell(true);        
infoTable.setWidth100();
infoTable.setDataSource(dataSource);
infoTable.setCanEdit(false);
infoTable.setCanCollapseGroup(false);
infoTable.setCanFreezeFields(false);
infoTable.setCanGroupBy(false);
infoTable.setCanMultiSort(false);
infoTable.setCanSort(false);
infoTable.setCanResizeFields(false);
infoTable.setAutoFetchData(false);
infoTable.addDrawHandler(new DrawHandler() { 
    public void onDraw(final DrawEvent event) { 
        for (Element element : DOMUtils.getElementsByTagName("td")) { 

            if (element.getInnerHTML().startsWith("Information for")) { 
                DOMUtils.removeAllChildNodes(element); 

                final DynamicForm cal = new DynamicForm(); 

                final DateItem infoDate = new DateItem(); 
                infoDate.setDefaultValue(new Date());
                infoDate.setTitle(“Information for ”); 
                infoDate.setTitleAlign(Alignment.LEFT); 
                infoDate.setWrapTitle(false); 
                infoDate.setDisplayFormat(DateDisplayFormat.TOEUROPEANSHORTDATE); 
                infoDate.setUseTextField(true); 
                infoDate.setAlign(Alignment.RIGHT); 
                infoDate.addChangedHandler(new ChangedHandler() { 
                    public void onChanged(final ChangedEvent event) { 
                        //fetch new data, according to the date selected); 
                    } 
                }); 

                cal.setFields(infoDate); 

                element.setInnerHTML(cal.getInnerHTML()); 

            } 
        } 

        // fetch data from DataSource class
        infoTable.fetchData(); 
    } 
});

Answer 1

哇，不需要任何这个。你可以使用setShowFilterEditor(true)，“date”类型的字段的默认界面看起来就像你想要的那样，除了从日历图标启动的选择器允许用户输入一系列日期，这似乎比你想要的更有用。

如果您不想支持任意日期范围，请使用setFilterEditorType()将默认控件替换为您自己的更有限的控件。

如果您不想要两行标题（普通标题加上filterEditor），请使用setShowHeader(false)。

Answer 2

好的，所以我找到了这样做的方法：因为我无法覆盖Header本身，所以我使用HeaderSpan和Header的高度，以便只显示HeaderSpan。但是注意，它在FF上工作正常，但它会导致IE中应用程序的其他部分出错。这是代码; DOMUtils类可以在我的第一篇文章中找到：

// class MyDataSource extends com.smartgwt.client.data.DataSource
MyDataSource dataSource = MyDataSource.getInstance(); 

final HeaderSpan headerSpanCol1 = new HeaderSpan(); 
headerSpanCol1.setTitle("column 1"); 
headerSpanCol1.setFields(MyDataSource.A); 
headerSpanCol1.setHeight(26); 

final HeaderSpan headerSpanCol2 = new HeaderSpan();
// make sure not to have the same element name
headerSpanCol2.setTitle(“Information for”); 
headerSpanCol2.setFields(MyDataSource.D); 
headerSpanCol2.setHeight(26); 

final HeaderSpan headerSpanCol3 = new HeaderSpan(); 
headerSpanCol3.setTitle("column 2"); 
headerSpanCol3.setFields(MyDataSource.B); 
headerSpanCol3.setHeight(26); 

infoTable = new ListGrid() { 

  @Override 
  protected Canvas createRecordComponent(final ListGridRecord record, final Integer colNum) { 

      final String fieldName = this.getFieldName(colNum); 

    // include some icons that I need in the ListGrid here

  } 
}; 
infoTable.setShowRecordComponents(true); 
infoTable.setShowRecordComponentsByCell(true); 

infoTable.setWidth100();
// make height equal to HeaderSpan’s in order to hide header titles and show only the HeaderSpan
infoTable.setHeaderHeight(26);
infoTable.setDataSource(dataSource); 
infoTable.setCanEdit(false); 
infoTable.setCanCollapseGroup(false); 
infoTable.setCanFreezeFields(false); 
infoTable.setCanGroupBy(false); 
infoTable.setCanMultiSort(false); 
infoTable.setCanSort(false); 
infoTable.setCanAutoFitFields(false); 
infoTable.setCanResizeFields(false); 
infoTable.setCanPickFields(false); 
infoTable.setAutoFetchData(false); 
infoTable.addDrawHandler(new DrawHandler() { 
public void onDraw(final DrawEvent event) { 

   for (Element element : DOMUtils.getElementsByTagName("td")) { 
       // iterate over the elements of the page to find the HeaderSpan to replace

       if (element.getInnerHTML().equals(“Information for”)) { 
          // replace the title of this HeaderSpan with a DateItem 
          DOMUtils.removeAllChildNodes(element); 

          final DynamicForm cal = new DynamicForm(); 

         final DateItem infoDate = new DateItem(); 
         infoDate.setDefaultValue(new Date()); 
         infoDate.setTitle(“Select date”); 
         infoDate.setWrapTitle(false); 
         infoDate.setDisplayFormat(DateDisplayFormat.TOEUROPEANSHORTDATE); 
         infoDate.setUseTextField(true); 
         infoDate.setAlign(Alignment.RIGHT); 
         infoDate.addChangedHandler(new ChangedHandler() { 
             public void onChanged(final ChangedEvent event) { 
                 // reload table with newly fetched results                       
             } 
         }); // ChangedHandler

         cal.setFields(infoDate);
         element.insertFirst(cal.getElement());

 break;
} // if
    } // for


    // fetch data from DataSource class
  infoTable.fetchData(); 
} // onDraw
}); // DrawHandler

infoTable.setHeaderSpans(headerSpanCol1, headerSpanCol2, headerSpanCol3);

SmartGWT数据绑定ListGrid - ＆gt;列标题中的DateItem，重新加载列onChanged

2 个答案: