TWaver初学实战——如何在EasyUI中插入TWaver
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>
带上一堆数据果然显得代码丰富，好有成就感！
TWaver初学实战——如何在EasyUI中插入TWaver的更多相关文章
- TWaver初学实战——如何在EasyUI中插入TWaver（续）
上次文章虽然简单易懂,但很有些小伙伴不满意:你这TWaver和EasyUI结合,只不过生硬地把TWaver图形插进去了,数据和人家EasyUI没一毛钱关系.嘿嘿,不就是想发生关系嘛,没问题啊!咱就还用 ...
- TWaver初学实战——如何在TWaver属性表中添加日历控件？
在日期输入框中添加日历控件,是一种非常流行和实用的做法.临渊羡鱼不如退而写代码,今天就看看在TWaver中是如何实现的. 资源准备 TWaver的在线使用文档中,就有TWaver Proper ...
- 如何在github中插入图片，链接，图片链接（给图片加上链接）,文字+图片链接,的实战分享！
如何在github中插入图片,链接,图片链接(给图片加上链接),文字+图片链接,的实战分享! markdown 1.文字链接: [link-Text](link-URL) [home](https:/ ...
- 如何在latex 中插入EPS格式图片
如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...
- 如何在html中插入视频
如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性 用mp4格式 <vid ...
- 如何在Visio 中插入各种数学公式？
在Visio 2007老版本中,插入公式可以直接在插入图片中选择,但是在后来的Visio2013中却无法直接通过插入图片的方法插入,那么该如何在visio 2013中插入公式呢? 具体的操作步骤如下: ...
- 关于如何在mysql中插入一条数据后，返回这条数据的id
简单的总结一下如何在mysql中出入一条数据后,返回该条数据的id ,假如之后代码需要这个id,这样做起来就变得非常方便,内容如下: <insert id="insertAndGetI ...
- TWaver初学实战——基于HTML5的交互式地铁图
每天坐地铁,经常看地铁图,有一天突然想到,地铁图不也是一种拓扑结果吗?TWaver到底能与地铁图擦出怎样的火花呢? 想到就干,先到网上找幅参考图.各种风格的地铁图还挺多,甚至有大学生自主设计制作, ...
- 如何在office2007中插入MathType教学
很多人在安装MathType数学公式编辑器时可能会遇到这个问题,MathType安装好了,可是在office2007的菜单栏中没有MathType这个选项卡,也就是说MathType没有成功加载在of ...
随机推荐
- (转)MSMQ(消息队列)
原文作者:虔诚者 点此传送至原文 前段时间研究WCF接触到了MSMQ,所以认真的学习了一下,下面是我的笔记. 我理解的MSMQ MSMQ可以被看成一个数据储存装置,就如同数据库,只不过数据存 ...
- Ehcache(2.9.x) - API Developer Guide, Transaction Support
About Transaction Support Transactions are supported in versions of Ehcache 2.0 and higher. The 2.3. ...
- ArcMap 10.2 crashes during Loading Document launch stage
问题描述: ArcMap unexpectedly exits during the "Loading Document..." stage on startup. No erro ...
- Contoso 大学 - 3 - 排序、过滤及分页
原文 Contoso 大学 - 3 - 排序.过滤及分页 目录 Contoso 大学 - 使用 EF Code First 创建 MVC 应用 原文地址:http://www.asp.net/mvc/ ...
- Swift结构体与类
在面向过程的编程语言(如C语言)中,结构体用得比较多,但是面向对象之后,如在C++和Objective-C中,结构体已经很少使用了.这是因为结构体能够做的事情,类完全可以取而代之.而Swift语言却非 ...
- C++函数模板本质-学习入门
template<typename T> void mySwap(T &a, T &b) { T c; c = a; a = b; b = c; } int main() ...
- JSON-lib框架，JAVA对象与JSON、XML之间的相互转换
Json-lib可以将Java对象转成json格式的字符串,也可以将Java对象转换成xml格式的文档,同样可以将json字符串转换成Java对象或是将xml字符串转换成Java对象. 一. 准备工作 ...
- lucene4入门（2）搜索
欢迎转载http://www.cnblogs.com/shizhongtao/p/3440479.html 接着上一篇,这里继续搜索,对于搜索和创建一样,首先你要确定搜索位置,然后用规定的类来读取.还 ...
- Junit的最简单样例：Hello world!
我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3824934.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...
- An Easy Task
An Easy Task Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total ...