GWT dynamic table

When talking about JS, different people have different insights. Beginners often think it is very simple. On the contrary, they are quite disgusted. What's disgusting is not just Dom, but also browser compatibility. js has different browser compatibility. Every time I think of IF (IE ){...} Else {...} It is chilling.

In this big environment, GWT was born. GWT (Google Web Toolkit) is a set of development kits developed by Google to compile Java into Js. Remember, this is compilation, not conversion, which means that JavaScript code can be easily obtained using Java. As the key, the JavaScript code is to support multiple browsers, which brings the gospel to the majority of the lazy compatriots.

Java compilation can naturally be closely integrated with the traditional Java framework, but it is not necessary for the majority of. neter. You know, as long as you do not use server-side events, the JS compiled can run directly in any browser, and can also be directly embedded in any programming language.

Although GWT is both local and online (Ajax), it is positioned on the presentation layer. Some of the controls recently developed by the company in this project are the performance layers written with pure GWT.

The above is a static page. You only need to use ajax to change the initialized data source (namely, the JS variable) to update the data. Of course, the addition, deletion, and modification functions are also implemented.

<Script language = "JavaScript">
// Dynamic table data
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: '@ CI ==\' \' & @ ysfs ==\' \ '', type: 'combo ', options: [{text: '', value: 1 },{ text: 'ltac', value: 2}]}
},
{
Name: 'scs ',
Width: '100px ',
Sortable: false,
Editconfig: {rule: '@ CI ==\' \' & @ ysfs ==\'lt;\'', type: 'button ', options: [{URL: 'test.html '}]}
},
{
Name: 'yzxx ',
Width: '100px'

},
{
Name: 'zl ',
Width: '100px ',
Sortable: false,
Type: 'string ',
Highlightconfig: [{rule: '@ gzxx> 100', color: 'red', mode: 2}] // Mode 0 indicates the text of the current cell that meets the condition, with a whole line, 23 background
},
{
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: '123 ',
.....................

Yjshsj: '2017-06-26 06:00:00 ',
TRIP: {mode: 0, MSG: 'error 1 '}
}
]
};
</SCRIPT>

The above is the initialization data defined in JSON to fill the table. Of course, you can also use XML, but after all, Dom operations are relatively troublesome.

Data source data collection

So how can we get JS variables?

Private native tablemetadataobject getmetadatas ()/*-{
Return $ WND. dt. metadatas;
}-*/;

Simply put, tablemetadataobject is a defined class tablemetadataobject extends javascriptobject. Of course, if it is a complex array, you can also define it using jsarray <tablemetadataobject>.

In this way, you can easily fill the table.

Internationalization

Note that the data in JSON is defined by Code. According to different languages, the data needs to be internationalized during filling.

Private string getpropertyname (string propertyname ){
Dynamictablemessage message = (dynamictablemessage) GWT
. Create (dynamictablemessage. Class );
Return message. getstring (propertyname );

Dynamictablemessage is an interface dynamictablemessage extends constantswithlookup

In this way, you can call getpropertyname ("ydh") to obtain the string of the corresponding language. Of course, you need to write data in files such as dynamictablemessage_zh_cn.properties in advance.

Data Filling

For the sake of scalability, we cannot write corresponding access methods for each data. In this way, we need to use the reflection of jsonobject = new jsonobject (tablemetadataobject O); jsonobject. Get ("") to obtain attributes.

For different data, some table items may be static, a combo or list, or a button, which must be implemented. Apply the rule rules defined in JSON, for example, rule: '@ cyss =\' \' & @ ysfs =\'zero-load \'', we only need to get this string and put it into Js for execution. Based on the returned value, we can dynamically determine what should be entered.

Give a rogue Method

Private native Boolean eval (string Str )/*-{
Return eval (STR );
}-*/;

In short, GWT can easily implement pure UI functions and has some advantages for some complex systems. In addition, it can be used well not only in Java, but also in. net.

Of course, it would be better if Microsoft developed a set of mswt one day.