上次文章虽然简单易懂，但很有些小伙伴不满意：你这TWaver和EasyUI结合，只不过生硬地把TWaver图形插进去了，数据和人家EasyUI没一毛钱关系。嘿嘿，不就是想发生关系嘛，没问题啊！咱就还用原来的EasyUI的代码，看看怎么把它表格中的数据用拓扑的方式显示出来。
在本机发布web程序
这次再干咱要有新路，不能再把数据写到代码里了，乱乱乎乎的很不专业，必须原汁原味就用json文件。别小看这一改变，需要在本机搭建服务器，要是原来没接触还真得忙活一阵子。不过这些工作可不白做，那是玩网页开发的基础，让你从此拥有自带专业光环的赶脚。据说现在Node.js比较时髦，咱就拿它开玩！
首先下载安装Node.js文件，接着在命令行状态进入工作目录，运行“npm install express”安装Express 框架，然后用记事本创建一个比如叫server.js的Node.js应用文件，里面输入如下代码：
var http = require('http'), express = require('express'), app = express();
app.use(express.static(__dirname));
http.createServer(app).listen(8080);
console.log("listening the port 8080");
怎么，你有黑暗恐惧症？受不了这个黑家伙躲在那里观察你的一举一动？你还千万别关掉它，有它就代表本机服务器运行正常，始终待命随时为你服务，是你开发过程中最好的朋友。那么怎么使用呢？很简单，将来在工作目录创建的网页文件a.html，通过在地址栏输入“http://127.0.0.1/:8080/a.html”，或者“localhost:8080/a.html”，就可以运行了。
接下来，把相关的东西都下载部署到位，别忘了那个json文件。现在只要把源码中相关的文件路径订正一下，熟悉的EasyUI例子页面就可以运行出来了！
读取本地json文件数据
不过，要想数据发生关系首先就要获取数据，当然可以从EasyUI的table中去拿，但是既然咱已经弄了json文件，就和它死磕到底。其实只需要写一个简单的函数，就可以拿到json数据了：
function loadJSON(path,callback){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
dataJson = JSON.parse(xhr.responseText);
callback && callback();
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
函数中，path是json文件的路径，callback是将来用于处理json数据的方法，dataJson是外部定义过用于存储json数据的变量。
利用json数据创建拓扑
拿到了json数据一切就很easy了，我们用一个循环就把所有产品变成了拓扑图元，再通过自动布局就完美地展示出来了。
不过很容易发现其中有的产品会有两个ProductID完全相同，似乎还可以更直观地表现一下他们这种关系。比如一种方案是，可以让他们成为同一个“虚拟节点”下的子节点，让虚拟节点显示子节点共同的ProductID，而每个子节点显示自己独特的ItemID。
“虚拟节点”——网元的隐身大法
不过TWaver中并没有“虚拟节点”这种东西，其实我们只要把一个正常节点隐藏起来就可以了。但虚拟节点的创建还要动点脑筋，因为没有一个具体的产品与之对应，只能用其子节点的产品来生成，还不能与子节点完全一样。当然这完全难不住我们，可以为创建节点的函数添加一个判断是否为虚拟节点的参数“empty”，就可以对其进行差异化定制了。
function initNode(json){
var item = new twaver.Node();
item.setName("EST");
box.add(item);
for (var i = 0; i < json.rows.length; i++) {
if(i < json.rows.length - 1 && json.rows[i].productid === json.rows[i+1].productid){
var node = createNode(json.rows, i, item, true);
node.s('whole.alpha',0); //隐藏节点
createNode(json.rows, i, node);
createNode(json.rows, i+1, node);
i += 1;
continue;
}else{
createNode(json.rows, i, item);
}
}
autoLayouter.doLayout('symmetry');
}
function createNode(array, i, parent, empty){
var node = new twaver.Node();
node.setName(empty ? array[i].productid : array[i].itemid);
node.setName2(array[i].attr1);
box.add(node);
node.setParent(parent);
var link = new twaver.Link(parent, node);
link.setName(link.getFromNode().getName()!='EST' ? "" : array[i].productid);
link.setName2(empty ? '' : array[i].listprice);
box.add(link);
twaver.Styles.setStyle('label2.color','#ec6c00');
return node;
}
不过“虚拟节点”还会带来另外一个问题，就是节点在tree中也会不可见，留下多处空白显得非常奇怪。当然只要恢复其在tree中的正常显示即可，添加以下代码即可解决问题：
tree.setVisibleFunction(function (element) {
return element instanceof twaver.Node;
});
让网元显示更丰富的信息
效果还不错！不过拓扑图上产品显示的信息，还是不如表格全面；要想把所有信息都加在产品网元上，又会显得过于凌乱拥挤。其实还有个很好的办法，就是利用getToolTip设置产品详细信息的标签，只有当鼠标移动到产品网元之上时，才会显示出来。不过这个getToolTip既可以加在node上，也可以加在network上，但效果还是略有不同的。加在node上最为方便，可以在创建node的循环体内直接添加，但这样添加后，不但在拓扑中的网元会显示标签，在tree中的网元也会显示标签，而且是没有换行的一大串。像我这样追求完美的人当然无法忍受了，还是知难而上将其加在了network上，虽然要通过setClient传递参数显得比较麻烦，但出来的效果就比较完美了！
其实说实话这还不能叫完美，因为twaver可以呈现的远远不止于此，还有许多神奇的功能值得我们不断挖掘探索！
还是老规矩，完整代码附后：
<html>
<head>
<meta charset="UTF-8">
<title>Basic Layout - jQuery EasyUI Demo</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-html5/lib/twaver.js"></script>
<script type="text/javascript">
var dataJson = {};
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
var tree = new twaver.controls.Tree(box);
var autoLayouter = new twaver.layout.AutoLayouter(box)
function init(){
loadJSON("./datagrid_data1.json", function(){
initNetwork();
initNode(dataJson);
initTree();
});
}
function initNetwork(){
var centerDiv = document.getElementById('north2');
var view = network.getView();
centerDiv.appendChild(view);
network.adjustBounds({
x: 0,
y: 0,
centerDiv.clientWidth,
height: centerDiv.clientHeight
});
network.getToolTip = function (element) {
var array = element.getClient("array");
var i = element.getClient("i");
if(!array) return;
return 'Item ID: ' + array[i].itemid + '</br>' + 'Product ID: ' + array[i].productid + '</br>' + 'List Price: ' + array[i].listprice + '</br>' + 'Unit Cost: ' + array[i].unitcost+ '</br>' + 'Attribute: ' + array[i].attr1;
}
}
function initNode(json){
var item = new twaver.Node();
item.setName("EST");
box.add(item);
for (var i = 0; i < json.rows.length; i++) {
if(i < json.rows.length - 1 && json.rows[i].productid === json.rows[i+1].productid){
var node = createNode(json.rows, i, item, true);
node.s('whole.alpha',0);
createNode(json.rows, i, node);
createNode(json.rows, i+1, node);
i += 1;
continue;
}else{
createNode(json.rows, i, item);
}
}
autoLayouter.doLayout('symmetry', function(){
network.moveElementsToCenter();
});
}
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.onDataRendered = function (div, data, row, selected) {
var style = div.style;
style.opacity = 1;
};
tree.expandAll();
}
function createNode(array, i, parent, empty){
var node = new twaver.Node();
node.setName(empty ? array[i].productid : array[i].itemid);
node.setName2(array[i].attr1);
node.setClient("array",array);
node.setClient("i",i);
box.add(node);
node.setParent(parent);
var link = new twaver.Link(parent, node);
link.setName(link.getFromNode().getName()!='EST' ? "" : array[i].productid);
link.setName2(empty ? '' : array[i].listprice);
box.add(link);
twaver.Styles.setStyle('label2.color','#ec6c00');
return node;
}
function loadJSON(path,callback){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
dataJson = JSON.parse(xhr.responseText);
callback && callback();
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
</script>
</head>
<body onload="init()">
<div class="easyui-layout" style="840px;height:640px;">
<div data-options="region:'north'" style="height:10px"></div>
<div data-options="region:'south',split:true" style="height:10px;"></div>
<div data-options="region:'east',split:true" title="East" style="100px;"></div>
<div data-options="region:'west',split:true" title="West" style="140px; 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:480px" id="north2"></div>
<div data-options="region:'center',border:false">
<table class="easyui-datagrid"
data-options="url:'./datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid',align:'center'" width="20%">Item ID</th>
<th data-options="field:'productid',align:'center'" width="20%">Product ID</th>
<th data-options="field:'listprice',align:'center'" width="15%">List Price</th>
<th data-options="field:'unitcost',align:'center'" width="10%">Unit Cost</th>
<th data-options="field:'attr1'" width="30%">Attribute</th>
<th data-options="field:'status',align:'center'" width="5%">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>