datamodel 设计模式--数据类型---数据容器--选择模型实例树形图

设计模式ORM

类比于 Object Relational Mapping (ORM)(对象关联数据模型和选择模型)，通过面对对象方式的封装，屏蔽了各种视图组件的异构性，采用了统一的 DataModel 数据模型和 SelectionModel 选择模型，可驱动 ListView，TreeView，TableView， TreeTableView、GraphView 和 Graph3dView 等所有HT的视图组件。

数据类型

var data = new ht.Data(); Data类型贯穿整个HT框架，是最基础数据类型。

数据容器

dataModel = new ht.DataModel();

数据容器ht.DataModel(以下简称DataModel)作为承载Data数据的模型，管理着Data数据的增删以及变化事件派发， HT框架所有组件都是通过绑定DataModel，以不同的形式呈现到用户界面；同时组件也会监听DataModel模型的变化事件，实时同步更新界面数据信息，掌握了DataModel的操作就掌握了所有组件的模型驱动方式。

Data类型对象构造时内部会自动被赋予一个id属性，可通过data.getId()和data.setId(id)获取和设置， Data对象添加到DataModel之后不允许修改id值，可通过dataModel.getDataById(id)快速查找Data对象。

一般建议id属性由HT自动分配，用户业务意义的唯一标示可存在tag属性上，通过Data#setTag(tag)函数允许任意动态改变tag值，通过DataModel#getDataByTag(tag)可查找到对应的Data对象，并支持通过DataModel#removeDataByTag(tag)删除Data对象。

id和tag的方式都是针对唯一标示的Data对象，若搜索非唯一属性可采用ht.QuickFinder插件。

使用DataModel时需要特别注意：一般要求有父子关系的Data都应逐一加入容器。常遇到parent加入容器，但children未加入，导致组件看不到children的问题，因为添加parent并不会自动加载所有子孙，这点务必注意。

Data类型有getDataModel()函数，当Data加入容器后data.getDataModel()能获得当前所在容器信息，不允许一个Data对象同时加入多个DataModel容器中。

选择模型

ht.SelectionModel管理DataModel模型中Data对象的选择状态，每个DataModel对象都内置一个SelectionModel选择模型，控制这个SelectionModel即可控制所有绑定该DataModel的组件的对象选择状态，这意味着共享同一DataModel的组件默认就具有选中联动功能。

如果希望某些组件不与其他组件选中联动，可通过调用view.setSelectionModelShared(false)，这样该view将创建一个专属的SelectionModel实例。

综上所述有两种途径可得到SelectionModel：

dataModel.getSelectionModel()获取数据容器中组件共享的选中模型。
view.getSelectionModel()获取当前组件使用的选中模型，selectionModelShared为false时，返回view专用的选择模型。

<!DOCTYPE html>
<html>
<head>
    <title>Data</title>
    <meta charset="UTF-8">
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }
        .main {
            margin: 0px;
            padding: 0px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
    </style>
    <script src="../../../../lib/core/ht.js"></script>
    <script>
        <!--引入图片，定义路径名称-->
        ht.Default.setImage('man', 'res/mail.png');
        ht.Default.setImage('woman', 'res/mail.png');
        ht.Default.setImage('man2', 'res/mail.png');
        ht.Default.setImage('woman2', 'res/mail.png');
        <!--定义数据类型，添加数据-->
        function addData(name, icon,parent){
            var data = new ht.Data();
            data.setName(name);
            data.setIcon(icon);
            data.setParent(parent)
            dataModel.add(data);
            return data;
        }
        <!--初始化-->
        function init(){
            dataModel = new ht.DataModel();
            treeView = new ht.widget.TreeView(dataModel);
            view = treeView.getView();

            view.className = 'main';
            document.body.appendChild(view);
            window.addEventListener('resize', function (e) {
                treeView.invalidate();
            }, false);

            var manparent = addData('男', 'man');
            var womanparent = addData('女', 'woman');
            addData('男2', 'man2',manparent);
            addData('女2', 'woman2',womanparent);

　　　　　　　　<!--展开分组-->

　　　　　　　　treeView.expandAll();

        }
    </script>
</head>
<body onload="init();">
</body>
</html>