Twaver-HTML5基础学习(40)表格可视化视图组件(Table)

表格可视化视图组件(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一样。

链接：http://doc.servasoft.com/twaver-document-center/recommended/twaver-html5-guide/%e8%a7%86%e5%9b%be%e7%bb%84%e4%bb%b6/#Tree

学习参考：TWaver Documents