TWaver是一款強大的圖形界面開發組件，可以很方便地集成到其他開發工具中。今天就用一個小例子來操練如何結合TWaver和EasyUI進行網頁開發。
准備工作
俗話說他山之玉可以直接拿來，EasyUI的小程序我們直接到其網站上拿一個就好啦，我一眼相中了下圖這個有布局、有表格的小例子，咱們就來看看怎么通過添加twaver將其變得圖表結合內容豐滿。
首先下載配置EasyUI相關文件，復制並運行例子源碼————噫？怎么結果與網站上並不太一樣，表格中的數據沒有了！仔細看看可知數據來源於'datagrid_data1.json'，就像離開家的小朋友找不到放到櫃子里的零食了。解決這個問題還真不是想象的那么簡單，僅僅把正確地址給它，或是將文件下載到本地，都無法得到正確結果，據說這是HTML5為了你好我好大家都安全弄成這樣子的。其實對於這樣的小程序，我們直接將數據存放在程序中就好了，比如將代碼$('#tableID').datagrid({data:[json中的對象數據]});添加到<body>的onload()函數中，再運行一下是不是和網站上的效果一模一樣呢？
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui/demo/demo.css">
<script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function init(){
$('#dg').datagrid({
data:[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
//...
]
});
}
</script>
</head>
<body onload="init()">
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:440px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:120px; position:relative;" ></div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style=" position:relative;" >
<table class="easyui-datagrid" id ="dg">
<thead>
<tr>
<th data-options="field:'itemid'" width="70">Item ID</th>
<th data-options="field:'productid'" width="90">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="70">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="60">Unit Cost</th>
<th data-options="field:'attr1'" width="135">Attribute</th>
<th data-options="field:'status',align:'center'" width="50">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
好了，接下來就是TWaver的相關准備工作了。先到TWaver下載頁面獲取TWaver2D系列的HTML5試用產品，將其中的twaver.js文件提取到我們剛才存放源碼文件的文件夾下，然后在源碼文件的<head>中插入。現在擼擼袖子喝口水，TWaver的正式編程就可以開始了。
搞定div
參照產品網站文檔《開發指南 – TWaver HTML5 (2D)》，可以知道圖元（Element）、容器（DataBox）和畫布（Network）是TWaver的三大要素，只要設好了容器，綁定到畫布上，再創建圖元扔進容器，一切就OK了！
思路有了，上手開干！先var出box、network、tree三個變量，再function出initNetwork()、initNode()、initTree()三個函數，分別用以設置畫布、添加節點、建立樹圖，最后再將三個函數放入init()中以便得以執行，這樣程序框架就搭起來了。
TWaver圖形能否在EasyUI中顯示出來，關鍵是network的設置是否正確。其實就是獲取到目標位置的div，然后將Network綁定進去。當然只要祭出我們的getElementById()大法，一切便可迎刃而解，我們要做的，只不過是為要使用到的center和west兩個div分別添加一個id而已。
當然，還不能高興的太早，人家div早已安排妥當，你非要進來插個隊，還想直接排個最佳位置，不客客氣氣的打聲招呼怎么行？！這個招呼其實也不難打，只要在相應div的style添加代碼”position:relative;”就可以了。重要的事情再說一遍：一定在插入TWaver圖形的div中添加代碼style=”position:relative;”！
繼續搞定div
創建節點實在是太容易了，只弄個兩點一線怎么能過癮，起碼得搞個3層結構吧！我們先創建一個group（就是可以包含子節點的父節點），下面又有兩個group，其中一個group下還有兩個node。怎么才能把子節點添加到父節點上呢？其實只需一node.setParent(group)語句就搞掂了。最后再為兩個node加上連接父節點的link，一個簡單的拓撲結構就完成了。
先運行一下試試吧！怎么，又遇到了新問題？是啊，同在center中的TWaver圖形和EasyUI表格，會出現重疊的情況。解決這個問題當然可以直接把EasyUI表格挪到south面板中去，但更具普遍意義的做法是再嵌套一個基本布局面板，然后分別將二者添加到其nouth和center中，這樣問題就完美解決了。如果說還有不完美，就是network大小有可能沒有完全適應所在div。其實我們沒有必要費勁調整它的寬高，只需要在network.adjustBounds()中設置{width:centerDiv.clientWidth,height: centerDiv.clientHeight}，再看看效果吧！
tree就簡單多了，只要像network一樣用appendChild()將其添加到相應的div，所有的圖元就可以顯示出來了！不過tree中最好僅保留group、node等節點，以便更好地展示其邏輯關系，只要添加語句tree.setVisibleFunction(function (element) {return element instanceof twaver.Node; });，這樣就可以過濾掉非節點元素了。
至此大功告成！怎么樣，是不是非常簡單？都已經迫不及待的想試一試了吧 ^_^
最后附上完整源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TWaver adhibition jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui/demo/demo.css">
<script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script>
<script src="twaver.js"></script>
<script type="text/javascript">
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
var tree = new twaver.controls.Tree(box);
function init(){
initNetwork();
initNode();
initTree();
$('#dg').datagrid({
data:[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
],
});
}
function initNetwork(){
var centerDiv = document.getElementById('north2');
var view = network.getView();
centerDiv.appendChild(view);
network.adjustBounds({
x: 0,
y: 0,
width: centerDiv.clientWidth,
height: centerDiv.clientHeight
});
}
function initNode(){
var group = new twaver.Group();
group.setName("Group");
box.add(group);
var group1 = new twaver.Group({
name: 'Group1',
location: {
x: 150,
y: 20
},
});
group1.setParent(group);
box.add(group1);
var group2 = new twaver.Group({
name: 'Group2',
location: {
x: 320,
y: 80
},
});
group2.setParent(group);
box.add(group2);
var node1 = new twaver.Node({
name: 'Node1',
location: {
x: 240,
y: 30
},
});
node1.setParent(group1);
box.add(node1);
var node2 = new twaver.Node({
name: 'Node2',
location: {
x: 80,
y: 50
},
});
node2.setParent(group1);
box.add(node2);
var link1 = new twaver.Link(group1, node1);
link1.setName("Link1");
box.add(link1);
var link2 = new twaver.Link(group1, node2);
link2.setName("Link2");
box.add(link2);
}
function initTree(){
var treeDom = tree.getView();
var westDiv = document.getElementById('west');
treeDom.style.width = "100%";
treeDom.style.height = "100%";
westDiv.appendChild(treeDom);
tree.setVisibleFunction(function (element) {
return element instanceof twaver.Node; });
tree.expandAll();
}
</script>
</head>
<body onload="init()">
<div class="easyui-layout" style="width:700px;height:440px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;">
</div>
<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:120px; position:relative;" id="west"></div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="position:relative;" id="center" >
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true,border:false" style="height:180px" id="north2"></div>
<div data-options="region:'center',border:false">
<table class="easyui-datagrid" id ="dg">
<thead>
<tr>
<th data-options="field:'itemid'" width="70">Item ID</th>
<th data-options="field:'productid'" width="80">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="70">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="60">Unit Cost</th>
<th data-options="field:'attr1'" width="135">Attribute</th>
<th data-options="field:'status',align:'center'" width="50">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
帶上一堆數據果然顯得代碼豐富，好有成就感！