表格可视化视图组件(Table)
简单实用table：Twaver-HTML5基础学习(10)嵌入Table
twaver.controls.Table组件实现了与DataBox的数据绑定，用以展示容器内元素属性等信息，每行对应一个数据元素。
表格列的定义，过滤器以及排序功能的使用。
创建表格
一张完整的表格要包括表头和内容两部分,所以TWaver的表格也要包含这两部分，由于TWaver的强大封装，简化创建接口，所以创建一张表格只需要执行下面几步:
//1.创建table并绑定DataBox
var table = new twaver.controls.Table(box);
//2.创建tablepane并绑定table数据内容,第二个参数为表头，默认不需要传入参数
var tablePane = new twaver.controls.TablePane(table,tableHeader);
//3.布局表格面板
var tableDom = tablePane.getView();
tableDom.style.width = "100%";
tableDom.style.height = "100%";
document.body.appendChild(tableDom);
//4.向ColumnBox中添加数据,ColumnBox继承于DataBox,用来管理表格中的数据,详细可参考数据容器一章
var column = new twaver.Column(name);
column.setName(name);
column.setPropertyName(propetyName);
column.setPropertyType(propertyType);
table.getColumnBox().add(column);
twaver.controls.TablePane 表格面板
它是用于保存表格的一种面板，表格面板中包含了表格体和表头，即使在创建表格面板时不传入表头，TWaver也会自动为表格体创建一个默认的表头。
使用：
//创建tablepane并绑定table数据内容,第二个参数为表头，默认不需要传入参数
var tablePane = new twaver.controls.TablePane(table,tableHeader);
//布局表格面板
var tableDom = tablePane.getView();
tableDom.style.width = "100%";
tableDom.style.height = "100%";
document.body.appendChild(tableDom);
twaver.Column 列对象
列是一种基本元素，它是存在于列容器中的（ColumnBox）。列是用来显示表格或树表的基本元素
TWaver HTML5中的表格组件用于展示DataBox中元素属性，每行对应了一个数据元素，每一列对应元素的一种属性。
表格列的实现类是twaver.Column,首先我们需要设置该列关联数据元素的哪个属性,余下还可以设置列头名称,列头呈现方式,单元格如何呈现等等。
使用：
//向ColumnBox中添加数据,ColumnBox继承于DataBox,用来管理表格中的数据,详细可参考数据容器一章
var column = new twaver.Column(name);
//设置列的列名
column.setName(name);
//列对应的属性
column.setPropertyName(propetyName);
//属性类型
column.setPropertyType(propertyType);
//添加到ColumnBox盒子中
table.getColumnBox().add(column);
/**
*Column表格列的设置
* 列头名称：
* 属性名称：
* 属性类型：field(如node.name)、accessor(如node.getName(),node.setName())、style(node.getStyle()、
* node.setStyle()、node.s())、client(node.getClient()、node.setClient());
* 属性值类型：
*/
var column = new twaver.Column();
column.setName("Name");//设置列头名称
column.setPropertyName('name');//设置属性名
column.setPropertyType('accessor');//设置属性类型,默认就是'accessor'类型
column.setValueType('string');//设置值类型,默认就是'string'类型
table.getClomunBox().add(column);//设置到表格列容器
style属性列的例子
//再举个style属性列的例子，定义一列显示数据元素的'inner.color'样式属性，并设置不可编辑
var column = new twaver.Column();
column.setName('Inner Color');
column.setPropertyName('inner.color');
column.setPropertyType('style');
column.setValueType('color');
table.getColumnBox().add(column);
表格数据排序
表格中的数据可以通过调用dataBox.move***(element)来作调整，实现表格行的上下移动。
此外表格组件的每一列都支持排序功能，默认点击列头切换排序状态：升序、降序、不排序，默认的排序比较器使用字符串比较，特殊数据类型的可以定制排序比较器，
常见问题
1.在Table上实现拖拽到Network创建网元
2.单击表格时获得点击的某列表头名称及值
table.getView().addEventListener("mousedown", function(e) {
var column = table.getColumnAt(e);
console.log(column.getName());
});
3.如何响应表格某列的值变化事件
//表格中的每一列都对应一个网元的一个属性。可以直接对table.getDataBox()进行监听即可：
box.addDataPropertyChangeListener(function(e) {
});
4.获取选中表格的数量
table.getSelectionModel().getSelection().size();
5.如何让表格列占满剩余空间
6.获取Table中每行每列的值
//获取每一行数据。
table.getDataBox()
//获取表格的列,对应twaver.Column
table.getColumnBox()
//获取第一行第一列的值
var node =table. getDatabox.getDataAt(0);
var column = table.getColumnBox().getDataAt(0);
var value = table.getValue(node,column);
树表可视化视图组件(TreeTable)
所谓树表组件，就是在普通表格的基础上增加父子关系,可支持展开、合并等功能。使用方法和Table一样。
学习参考：TWaver Documents
