GWT异步更改cellTable中cell的数据显示

　　项目中遇到一个棘手的问题，使用GWT的cellTable的时候，要更改一个单元格的显示问题。如果仅仅是一个单独的cell 可能会有比较好的处理办法，比如可以找到这一列，然后更新整个cellTable，但此处我用到的是一个复合cell，即compositeCell，API如下：

1 public class CompositeCell<C>
2 extends AbstractCell<C>
3 A Cell that is composed of other Cells.
4 
5 When this cell is rendered, it will render each component Cell inside a span. If the component Cell uses block level elements (such as a Div), the component cells will stack vertically.

　　所以要取到具体的cell有些不易。

　　此次更改cell的情景是：一个entity中字段没有关联到实体，而是存储的一个实体的ID，但是cellTable显示的时候，不可能显示一个关联ID的，而是需要根据这个ID去查找该关联实体的表，而此处的查询又是异步的。

　　首先思路是这样的：第一步肯定是要先取得要更改数据的那一列的；第二步取到具体的那一个cell；第三步就是更改cell里面的数据了。

　　这里的cell 需要使用样式，所以代码是这样的：

 1 final Cell<String> cell = new TextCell(new SafeHtmlRenderer<String>() {
 2             
 3             @Override
 4             public void render(String arg0, SafeHtmlBuilder arg1) {
 5             }
 6             
 7             @Override
 8             public SafeHtml render(String str) {
 9                 return new SafeHtmlBuilder().appendHtmlConstant("<span class='categoryName'>"+str+"</span>").toSafeHtml();
10             }
11         });

会被渲染加上一个class为"categoryName"的span 标签。

　　首先查找出这个cell，这里关键代码如下：

 1 int index = dataProvider.getList().indexOf(item);
 2 NodeList<TableCellElement> nodeList = entityTable.getRowElement(index).getCells();
 3 for (int i = 0; i < nodeList.getLength(); i++) {
 4    TableCellElement tableCellElement =  nodeList.getItem(i);
 5    List<Element> elements = getRowElements(tableCellElement);
 6    for (Element element : elements) {
 7         String className = element.getClassName();
 8         if(className!=null && className.equals("categoryName")){
 9              element.setInnerHTML(caterotyString + "&nbsp;&nbsp;");
10          }
11       }
12    elements.clear(); //每次循环完一列就清空保存元素的集合
13  }

　　每个cellTable 都需要一个dataProvider来显示数据，一条数据为一行，那么可以根据这个dataProvider中存放数据的位置来确定此数据是第几行的，这样就实现了上面说的第一步操作。代码中第2行根据行数取得这一行的所有单元格元素，第3行代码是取得每一个单元格中的元素。这样做的话就能解析那些复合单元格中每个单元格了。实现了上面所说的第二步操作。在取得所有的元素之后，我们可以利用刚刚设置的class名字来定位到精确的元素，也可以根据node的id。因为有复合控件的存在，可能存在要解析遍历多次的问题，所以第5行代码使用了一个递归循环，取得所有的元素，代码如下：

 1     // 递归取得每一列中的所有元素,包括自身
 2     private List<Element> elements = new ArrayList<Element>();
 3     private List<Element> getRowElements(Element element){
 4         elements.add(element);
 5         NodeList<Node> nodes = element.getChildNodes();
 6         for (int i = 0; i < nodes.getLength(); i++) {
 7             Node node = nodes.getItem(i);
 8             Element childElement = node.cast();
 9             if(childElement.getChildCount()>0){
10                 getRowElements(childElement);
11             }else{
12                 elements.add(childElement);
13             }
14         }
15         return elements;
16     }

其中第8行代码中使用了一个cast方法，cast方法的API如下:

1 <T extends JavaScriptObject> T
2 cast() 
3           A helper method to enable cross-casting from any JavaScriptObject type to any other JavaScriptObject type.

是对JavaScriptObject类进行互相转换的，Element和Node 都是JavaScriptObject的子类。继承关系如下：

1 java.lang.Object
2   extended by com.google.gwt.core.client.JavaScriptObject
3       extended by com.google.gwt.dom.client.Node
4           extended by com.google.gwt.dom.client.Element

这里也可以不转换类型，而是在调用递归的地方使用，返回一个Node的List，然后在循环Node的时候进行cast操作，因为className只有Element才有，所以必须要转换。

总结：gwt因为是用java写"html"，所以提供了很多可以操作底层的类供我们使用，可以取得我们想要的"html"标签或者元素，善于发掘，就会找到我们想要的。