HT for Web 属性面板手册

索引

概述
属性面板组件

概述

HT for Web提供了属性面板组件，该组件增强了ht.widget.PropertyView组件的展示及操作功能，提供了可视化的切换排序、过滤和分组的界面功能。

使用属性面板组件需要在引入ht.js核心库之后，再引入一个ht-propertypane.js的属性面板插件库。

属性面板组件

ht.widget.PropertyPane为属性面板类，其构造函数可传入ht.DataModel对象，其主要可配置属性和函数如下：

通过getPropertyView获取ht.widget.PropertyView对象
通过getToolbarHeight和setToolbarHeight获取和设置工具条高度
通过getHeaderHeight和setHeaderHeight获取和设置表头高度
通过getHeaderLabels和setHeaderLabels获取和设置表头文字内容，例如setHeaderLabels(['属性', '值'])
通过getHeaderLabelColor和setHeaderLabelColor获取和设置表头文字颜色
通过getHeaderLabelFont和setHeaderLabelFont获取和设置表头文字字体
通过getHeaderLabelAlign和setHeaderLabelAlign获取和设置表头文字水平对齐方式，默认为center
通过setCaseSensitive和isCaseSensitive获取和设置过滤是否考虑大小写，默认为false
通过getIndent和setIndent获取和设置工具条图片缩进
通过getSelectBackground和setSelectBackground获取和设置工具条按钮选中背景色
通过getCategoryIcon和setCategoryIcon获取和设置工具条分组按钮图标
通过getSortIcon和setSortIcon获取和设置工具条排序按钮图标
通过getSortFunc和setSortFunc获取和设置工具条排序逻辑规矩
通过addProperties可批量增加属性信息，该函数是对PropertyView#addProperties的包装

<!DOCTYPE html>
<html>
    <head>
        <title>PropertyPane</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 src="../../../../lib/plugin/ht-propertypane.js"></script>   
        <script>
            function init(){                                                                
                dataModel = new ht.DataModel();
                tablePane = new ht.widget.TablePane(dataModel);
                propertyPane = new ht.widget.PropertyPane(dataModel);                    
                splitView = new ht.widget.SplitView(tablePane, propertyPane, 'h', 0.6);                                

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

                var attributes = [
                    {
                        name: 'id',
                        displayName: 'Id'                        
                    },                    
                    {
                        name: 'superClass',
                        displayName: 'Super Class',   
                        categoryName: 'Class',
                        getValue: function(data){
                            var superClass = data.getClass().superClass;
                            return superClass.getClassName ? superClass.getClassName() : 'Object';
                        }
                    },                    
                    {
                        name: 'className',
                        displayName: 'Class',
                        categoryName: 'Class'
                    },  
                    {
                        name: '_image',                        
                        displayName: 'Image',  
                        categoryName: 'Image',
                        accessType: 'field',
                        width: 110
                    },                             
                    {
                        name: 'icon',
                        displayName: 'icon',  
                        categoryName: 'Image',
                        width: 120,
                        enum: {
                            values: ['node_icon', 'edge_icon', 'group_icon', 'shape_icon', 'subGraph_icon', 'grid_icon'], 
                            icons: ['node_icon', 'edge_icon', 'group_icon', 'shape_icon', 'subGraph_icon', 'grid_icon']
                        }                        
                    }                                       
                ];

                tablePane.addColumns(attributes);
                propertyPane.addProperties(attributes);

                [ht.Data, ht.Node, ht.Edge, ht.Group, ht.Grid, ht.Shape, ht.SubGraph, ht.Grid].forEach(function(clazz){
                    data = new clazz();
                    dataModel.add(data);                    
                });
                dataModel.sm().ss(data);
            }


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

欢迎交流 service@hightopo.com