GWT之动态表格

话说JS,不同的人有着不同的感悟，初学者往往觉得非常简单，相反老牛们却倍感恶心。恶心的不只是那一个个dom，更是浏览器的兼容性，js对浏览器的兼容性是不同的，每次想到if(ie){…}else{…}时，都是不寒而栗的。

再此大环境下，GWT便诞生了。GWT(google web toolkit)是google开发的一套用于将java编译成js的开发包。记得，这个是编译，不是转换，这就意味着，用java能轻易得得到js代码。作为关键的是，得到的js是支持多浏览器的，这就为广大懒人同胞们带来了福音。

说是java编译，其自然能和传统java框架紧密结合，但对于广大.neter而言，却未必要敬而远之。要知道，只要不使用服务器端事件，编译出的js完全能在任何浏览器里直接跑，同样也能直接嵌入任何编程语言之中。

GWT虽是本地和网络（ajax）通吃，但就其作用而言本身是定位于表现层上的。最近公司做的这个项目中的部分控件，就是用纯GWT编写表现层。

以上就是一个效果图 ，别看他丑，要知道它是一个静态页面。使用时只需通过ajax方法更改其初始化的数据源（即js变量）即可更新数据。当然也实现了增删改的功能。

<script language="javascript">
    //动态表格数据
    var dt ={};
    dt.metaDatas = {
        pageSize: 10,
        enabletrip:true,
        columns:[
        {
            name:'ydh',
            width:'100px',
            linkConfig:{url:'action.do?param=@ydh',pop:true}
        },
            {
            name:'cxhm',
            width:'100px'
        },
        {
            name:'ysfs',
            width:'100px',
            sortable:false,
            editConfig:{rule:'@cys==\'\'&&  @ysfs==\'\'', type:'combo', options:[{text:'', value: 1}, {text:'零担', value:2}]}       
        },
        {
            name:'cys',
            width:'100px',
            sortable:false,
            editConfig:{rule:'@cys==\'\'&&  @ysfs==\'零担\'', type:'button', options:[{url:'test.html'}]}       
        },
        {
            name:'gzxx',
            width:'100px'

        }, 
               {
            name:'zl',
            width:'100px',
            sortable:false,
            type:'String',
            highlightConfig:[{rule: '@gzxx>100', color:'red', mode: 2}]//mode 0 符合条件的当前单元格文字，1 整行，23背景
        },
        {
            name:'tj',
            width:'100px',
            sortable:false
        },

        …………………
           {
            name:'yjshsj',
            width:'100px',
            sortable:true,
            type:'datetime'
        }
        ]
    };

    dt.data = {
        currentPage: 1,
        totalCount: 200,
        startNum: 1,
        endNum: 10,
        currentPageNum:10,
        totalPageNum:20,
        pageUrl:'action.do?pageurl=@this',
        excelUrl:'action.do',
        content: [
           {
           ydh:'200456', 
            …………………

           yjshsj:'2009-06-26 06:00:00',
           trip:{mode:0,msg:'error 1'}
           }
        ]
    };
</script>

以上就是用json定义的初始化数据，用于填充表格。当然你也可以用xml，但毕竟dom操作相对麻烦。

数据源数据采集

那么，怎么得到js的变量呢？

private native TableMetaDataObject getMetaDatas()/*-{
return $wnd.dt.metaDatas;
}-*/;

简单吧，TableMetaDataObject 是定义的一个类型class TableMetaDataObject extends JavaScriptObject，当然如果是复杂的数组，也可以用JsArray<TableMetaDataObject>定义。

这样就能轻易的进行表格填充了。

国际化

注意到了么，json里的数据都是用代号定义的，根据不同的语言，在填充时自然要进行国际化。

private String getPropertyName(String propertyName) {
    DynamicTableMessage message = (DynamicTableMessage) GWT
            .create(DynamicTableMessage.class);
    return message.getString(propertyName);

而DynamicTableMessage 为一个接口interface DynamicTableMessage extends ConstantsWithLookup

这样，通过调用getPropertyName(“ydh”)即可得到相应语言的String，当然需要在DynamicTableMessage_zh_CN.properties这类文件内预先写入。

数据填充

为了可扩展性的需要，我们不可能为每一个数据写相应的访问方法。这样我们就需要使用JSONObject jsonObject = new JSONObject(TableMetaDataObject  o);jsonObject.get(“”)这种反射来获取属性。

对于不同的数据，某些表格项可能是静态的，也可能是一个combo或者list，在或者是一个button，我们都必须实现。应用json中定义的rule规则，如rule:'@cys==\'\'&&  @ysfs==\'零担\''，我们只需取到这条字符串把它放入js中执行，根据返回值就可以伪动态判断应该填入什么了。

给一个无赖的方法

private native boolean Eval(String str)/*-{
return eval(str);
}-*/;

总之，GWT能轻易的实现纯UI的功能，对于某些复杂的系统有着一定优势。并且，其不但能在java中很好的使用，.NET也一样。

当然如果哪天微软开发出一套MsWT那就更好了。