HTML5 Canvas 数据持久化存储之属性列表

属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下。 

本例效果图:

从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 graphView 拓扑图部分,右下角的 tableView 表格部分,以及右上角的 propertyView 属性部分。我们先把整个场景划分出来,然后再向各个部分来添加具体的内容:

gv = new ht.graph.GraphView(); var tablePane = new ht.widget.TablePane(gv.dm());//表格面板组件
propertyView = new ht.widget.PropertyView(gv.dm());//formPane是在propertyView里的,所以要先定义

var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//分割组件,v分为上下层,比例为0.4:0.6
rightView.getView().style.borderLeft = '1px solid #000'; var borderPane = new ht.widget.BorderPane();//边框面板组件
borderPane.setRightView(rightView, 400);//设置 borderPane 右边组件为 rightView,宽度为400
borderPane.setCenterView(gv);//设置 borderPane 中间组件为 gv 
borderPane.addToDOM();//将 borderPane 组件添加进 body 中

上面代码中 new 出来的部分都是 HT 封装好的组件,相当于“类”,这里解释一下 SplitView 分割组件(http://www.hightopo.com/guide/guide/core/splitview/ht-splitview-guide.html),分割组件用于左右或上下分割两个子组件, 子组件可为 HT 框架提供的组件,也可为 HTML 的原生组件,子组件以 position 为 absolute 方式进行绝对定位,这个组件中的参数分别为(左组件或上组件, 右组件或下组件,h 表示左右分割 v 表示上下分割,分割位置默认值为 0.5,如果设置值为 0~1 则按百分比分割,大于 1 代表左组件或上组件的绝对宽或高,小于 1 代表右组件或下组件的绝对宽或高);还有 BorderPane 面板组件(http://www.hightopo.com/guide/guide/core/borderpane/ht-borderpane-guide.html)为布局容器,可在上、下、左、右、中的五个区域位置摆放子组件, 子组件可为 HT 框架提供的组件,也可为 HTML 原生组件,子组件以 position 为 absolute 方式进行绝对定位。这里我结合了 SplitView 和 BorderPane 将场景分成了三个部分。最后记得一定要将最终的布局容器添加进 body 中或者任意一个 HTML 标签中,这样才能在界面上显示,其中 addToDOM 的定义内容如下:

addToDOM = function(){ var self = this,
        view \= self.getView(), //获取这个组件的底层 div 
        style = view.style;//获取底层 div 的样式 style 属性
    document.body.appendChild(view); //将底层 div 添加进 body 中
    style.left = '0';//HT 默认将组件都定义为决定定位 absolute,所以需要设置位置
    style.right = '0';
    style.top \= '0';
    style.bottom \= '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用,而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中,这里需要注意的是,当父容器大小变化时,如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件,则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素, 则 HT 组件无法获知需要更新,因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件,调用最外层组件 invalidate 函数进行更新。

场景创建完毕。为了显示不同节点对应的属性的不同,我们在拓扑图上添加了七个节点:

function initModel(){ var name = "设备"; var count = 0; var root = createNode(name + count++, name + (++count));//参数1为name,参数2为tag
    root.setImage('./symbols/机房/服务器.json');
    root.setName('服务器');
    root.s('label.position', 3);
    gv.sm().ss(root);//默认选中root节点

    for (var i = 0; i < 2; i++) { var iNode = createNode(name + count++, name + (++count));//参数1为name,参数2为tag
 createEdge(root, iNode); for (var j = 0; j < 2; j++) { var jNode = createNode(name + count++, name + (++count));
            createEdge(iNode, jNode);
        }
    }
}

createNode 函数的声明如下:

function createNode(name, tag){//创建Node节点
    flag++; var node = new ht.Node();
    node.setName(name);
    node.setTag(tag);
    node.setImage('./symbols/机房/XX分系统.json');
    node.a('hidden', false);//自定义属性,可以控制node.a('hidden')来控制节点显隐
 node.a('接口类型', 'SATA');
    node.a('显卡', 'Nvidia'); if(flag % 2 === 0){
        node.a('接口类型', 'IDE');
        node.a('显卡', 'ATI');
    }
    node.s('label.position', 11);
    gv.dm().add(node);//将节点添加进数据容器DataModel中
 node.tablePane1 \= createTableView(serviceType, dataModel1);//创建表格面板
    node.tablePane2 = createTableView(serviceSize, dataModel2);
    node.tablePane3 \= createTableView(version, dataModel3);

    node.formPane1 \= createFormPane(node.tablePane1);//创建表单面板
    node.formPane1.title = '类型';//为了给后面dialog对话框的标题做准备
    node.formPane2 = createFormPane(node.tablePane2);
    node.formPane2.title \= '内存';
    node.formPane3 \= createFormPane(node.tablePane3);
    node.formPane3.title \= '型号'; if(flag % 3 === 0){
        node.formPane3.v('tag', '联想(Lenovo)服务器X3650M5 8871');
    }else{
        node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21');
    }
    node.a('型号', node.formPane3.v('tag')); return node;
}

我们通过控制这个节点的 hidden 属性,利用 graphView 中的可视过滤器 setVisibleFunc 函数来控制节点的显隐:

gv.setVisibleFunc(function(data){ if(data.a('hidden')){ return false;
    } return true;
});

有了节点自然就需要显示属性了,加上下面的 tablePane 表格面板中的值,一共添加了七种属性:

function createProperty(){//创建属性
 propertyView.addProperties(\[
        {
            name: 'name',//获取 name 属性,结合 accessType 属性最终实现对节点属性的存取,accessType 默认值为 null,如name为age,采用getAge()和setAge(98)的get/set或is/set方式存取(这边name为name,所以通过 getName() 获取)
            displayName: '名称'//设置属性名的显示文本值
 },
        {
            name: 'hidden',//获取 hidden 属性
            displayName: '隐藏这个节点',
            accessType: 'attr',//如name为hidden,采用getAttr('hidden')和setAttr('hidden', false)的方式存取
            icon: 'images/alert.gif',//设置属性名左侧显示的图标
            valueType: 'boolean',//用于提示组件提供合适的renderer渲染 布尔类型,显示为勾选框
            editable: true//设置该属性是否可编辑
 },
        {
            name: 'grade',
            displayName: '类型',
            accessType: 'attr',
            drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//自定义属性值渲染函数
                var cb = function(v) {
                    data.a('grade', v);
                } return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb);
            }
        },
        {
            name: 'number',
            displayName: '内存',
            accessType: 'attr',
            drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){ var cb = function(v) {
                    data.a('number', v);
                } return fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb);
            }
        },
        {
            name: '接口类型',
            accessType: 'attr',
            displayName: '接口类型' },
        {
            name: '显卡',
            accessType: 'attr',
            displayName: '显卡' },
        {
            name: '型号',
            accessType: 'attr',
            displayName: '型号',
        }
    \]);
}

第三第四个属性中 drawPropertyValue 属性的返回值为 fillFormPane 函数,这个函数的参数分别为(表单组件 formP,表单组件宽 w,表单组件高 h,表单组件中按钮点击生成弹出框中的表格组件 tableP,表格组件中的数组内容 arr,cb 函数将双击表格组件中的行返回的值赋值给 form 表单中的 ht.widget.TextField 文本框)。

  • 第一个参数 formP 表单组件的创建,表单组件的创建就是创建一个表单组件,在表单组件中添加一个文本框以及一个按钮,这个步骤在 HT 中也是相当的简单:

    function createFormPane(tPane) {//创建表单面板
        var formPane = new ht.widget.FormPane();
        formPane.setPadding(0);//设置表单四周与组件内容的间距
        var tField = new ht.widget.TextField();//创建一个文本框
        tField.setText('');//文本框的内容为空
        tField.setDisabled(true);//文本框不可操作
        formPane.addRow(\[//向表单中添加行
     {
                id: 'tag',//唯一标示属性,可通过formPane.getItemById(id)获取添加到对应的item对象
                element: tField//属性值可为 HTML原生元素、FormPane内部自绘制的文本信息以及HT自带组件如Button、CheckBox和ComboBox等
     },
            {
                button:{//设置了该属性后HT将根据属性值自动构建ht.widget.Button对象,并保存在element属性上
                    label:'...',//按钮上的文本内容
                    onClicked: function(){//按钮点击事件
                        for(var i = 0; i < tPane.dm().size(); i++){//设置tablePane默认选中formPane对应的值
                            var data = tPane.dm().getDatas().get(i); if(data.a('value') === formPane.v('tag')){
                                tPane.sm().ss(data);
                            }
                        } return createDialog(tPane, formPane);//返回的是创建一个对话框,对话框的内容为表格面板
     }
                }
            }
        \], \[0.5, 0.1\]);//设置表格组件中第一个元素和第二个元素的显示比例。这个表格组件一共只有两个元素,一个文本框一个按钮,占比分别为 0.5 和 0.1
        return formPane;
    }

    createDialog 函数创建的过程也是简洁明了,通过 setConfig(config) 方法配置对话框的标题,尺寸,内容等,我给 createDialog 传了一个参数 tPane 表格组件,用作对话框显示的内容:

    function createDialog(tPane){//创建弹出框
     dialog.setConfig({
            title: gv.sm().ld().getName()+"的"+formPane.title,//对话框的标题
            content: tPane, //直接将弹出框的内容设置为表格面板
            width: 400,//指定对话框的宽度
            height: 200,
            draggable: true,//指定对话框是否可拖拽调整位置
            closable: true,//表示是否显示关闭按钮
            maximizable: true,//表示对话框是否可被最大化
            resizeMode: "wh",//鼠标移动到对话框右下角可改变对话框的大小,wh表示宽高都可调整
            buttons: \[//添加两个按钮
     {
                    label: '取消',
                    action: function(){
                        dialog.hide()
                    }
                },
                {
                    label: '确定',
                }
            \]
        });
        dialog.show();//显示对话框

*    第四个参数 tableP 表格组件,也没有什么特别的,就是创建一个表单组件,然后向表单组件中添加列,步骤简单,代码也相当简单:  
function createTableView(arr, dm){//创建表格组件
    var tableView = new ht.widget.TableView(dm);
    tableView.addColumns(\[//用json的数组参数方式批量添加列信息
 {
            displayName: 'ID',//获取表头的列名内容
            drawCell: function(g, data, selected, column, x, y, w, h, tableView){//自定义单元格渲染方式
                var id = tableView.getRowIndex(data);//返回data对象所在的行索引
                ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//绘制文字参数(g画笔对象,value文字内容,font文字字体,color文字颜色,x绘制开始的x坐标,y绘制开始的y坐标,w绘制的宽度,h绘制的高度,align文字水平对齐方式,vAlign文字垂直对齐方式)
 }
        },
        {
            displayName: 'Name',
            drawCell: function(g, data, selected, column, x, y, w, h, tableView){ var id = tableView.getRowIndex(data); var info = arr\[id\];
                ht.Default.drawText(g, info, null, null, x, y, w, h, 'center');
            }
        }
    \]); return tableView;
}

解释完 fillFormPane 中的参数,来看看这个函数是如何定义的,基本上只差最后一步,点击 tablePane 表格组件中的元素,将这个元素返回给 formPane 表单组件中的 textField 文本框:

function fillFormPane(formP, w, h, tableP, arr, cb){//右边的formpane

if(formP === undefined){ return;
}
formP.setWidth(w);
formP.setHeight(h);
formP.setHGap(0); if(formP.v('tag') === 'undefined' || formP.v('tag') === '') {
    formP.v('tag', arr\[0\]);
}

tableP.onDataDoubleClicked \= function(data){//表格组件中的data所在行被双击时回调
    var v = arr\[data.a('index')\];
    formP.v('tag', v);//根据id设置对应item元素值 为 setValue 的简写,这个id为tag的元素就是文本框

dialog.hide(); if (cb){cb(v);} //如果传入了cb参数,则设置data.a('number')/data.a('helloName')的值为表格中被双击的那一行的值,即赋值给第三第四属性
}

tableP.onDataClicked \= function(data){//表格组件中的data所在行被单击时回调
    dialog.getConfig().buttons\[1\].action = function(){//点击“确定”才进行下面的操作
        var v = arr\[data.a('index')\];
        formP.v('tag', v);
        dialog.hide(); if (cb){cb(v);} 
    }
}; return formP.getView();

}

右上方属性栏的显示到这里就全部结束了,右下方的表格面板的创建方式也是雷同的,大家可以自行看代码理解。

最后说一下整个界面节点的排布,HT 中的 autolayout 自动布局组件,即根据节点和连线关系,提供多种类型算法进行自动排布节点位置。 自动布局常用于图元较多,或连接关系教复杂时,不易于人工拖拽摆放的场景。我把各个布局方式通过按钮的方式呈现出来了,点击对应的按钮,布局方式就会根据按下的按钮设置的排布方式来自动布局:

![](http://images2017.cnblogs.com/blog/591709/201801/591709-20180123222957225-2038271260.png)

 首先,创建一个新的实例,传入需要自动布局的对象,可以为 DataModel、graphView 以及 graph3dView 三种,然后设置默认的排布方式:

autoLayout = new ht.layout.AutoLayout(gv);
setTimeout(function(){

layout('towardsouth', true);//因为图片还没加载出来的时候,自动布局就按照节点的默认大小来布局的

}, 200);

接着创建 formPane 表单面板,添加进 body 中,放在 body 左上角,我不将所有代码粘出来了,就显示第一个布局的按钮就好:

function createDirectionForm(){ var form = new ht.widget.FormPane();

form.setWidth(200);//设置表单宽度
form.setHeight(80);
document.body.appendChild(form.getView());
form.getView().style.background \= '#fff';
form.getView().style.boxShadow \= '4px 16px 16px rgba(0, 0, 0, 0.1)';//设置阴影样式
form.addRow(\[//这一行单独拿出来,作为标题

{

        element: '自动布局:',//显示的文字

}

\], \[0.1\]);//数组内只有一个对象,就只设置一个对象的宽度就好

form.addRow([

    {
        button: {
            icon: '布局/南布局.json',
            onClicked: function(){
                layout('towardsouth', true);
            },
            background: null,
            labelColor: '#fff',
            groupId: 'btn',
            toolTip: '朝南布局',
            borderColor: null }
    }, //....接下来添加剩下的6个按钮
\], \[0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1\]);//数组中有七个对象,就要设置七个对象的宽度
return form;

}

代码和效果可以在 [http://www.hightopo.com/demo/propertyEditor/index.html](http://www.hightopo.com/demo/propertyEditor/index.html) 查看,可以自己看着代码玩玩~
Image placeholder
AllenBug
未设置
  74人点赞

没有讨论,发表一下自己的看法吧

推荐文章
innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

html转pdf工具 --- wkhtmltopdf

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 html转pdf工具---wkhtmltopdf [https://wkhtmltopdf.org/wkhtmltopdf htt

10 分钟彻底理解 Redis 的持久化和主从复制

在这篇文章,我们继续有关Redis方面知识的学习,一起了解一下其中一个非常重要的内容:Redis的持久化机制。什么是Redis持久化?Redis作为一个键值对内存数据库(NoSQL),数据都存储在内存

HTML5新增了哪些input类型及其属性?

HTML5新增了哪些input类型及其属性?1、url类型、email、tel类型说明:当输入非url、email的字符串时,浏览器会自动提醒。 2、number类型。说明:只能输入数字,min表

通过html5中的canvas来绘制一个圆环形进度条

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: 1 这个文档标识要

HTML中16个全局属性介绍

HTML原有属性accesskey作用:浏览器用来创建激活或聚焦元素的快捷键值:一个键盘字符如O范围:支持该属性的元素有、、、、、、注意:使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽 百度 阿里

HTML属性的附加信息

课程推荐:前端开发工程师--学习猿地精品课程 HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。 属性总是以名称/值对的形式出现,比如:name="value"。 属性总是

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍

背景分析随着平安城市、智慧城市、雪亮工程、智能交通等各项建设的持续开展,安防逐渐得到普及,面对如此广阔的市场,对安防企业来说不仅仅是机遇更多的是挑战。现今大多数摄像头一直没能摆脱人工监控的传统监控方式

html5不常用标签应用场景

divpspanuldlollidtddstrongb现在都已经是9102年了,html5已经相当成熟标准了,为什么在布局的时候不用写html5提供的具有语义化的标签进行布局呢?我个人觉得是因为我们刚

HTML5都有什么用途?

HTML5都有什么用途?HTML5的用途1、本地存储基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5APPCache,以及本地存储功能。2、实现多媒体更加简单利

html5是什么?

html5是什么?万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。本次修改后的标准我们就称之为html5。HTML5是构建Web内容的一种语言描述方式。HTM

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显

HTML5新增了哪些标签?

HTML5新增了哪些标签?html5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。html

html5测试题整理--针对标签的概念性

推荐课程:web全栈开发就业班--收到offer再缴学费--融职教育 1.哪个元素被称为媒体元素的子元素? 答案:。 标签为媒体元素(比如and)规定外部文本轨道。这个元素用于规定字幕文件或其他包含文

NAS与对象存储:谁是非结构化数据存储的最佳选择?

非结构化数据是增长最快的数据类型之一。随着企业日积月累地生成、收集和存储越来越多的数据,必然会带来一个问题:什么是存储非结构化数据的最佳方式?直白来说,非结构化数据就是不遵循传统数据库格式的数据,其结

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs

html和css难学吗?

什么是HTML?html是HyperTextMark-upLanguage的缩写,即超文本标记语言;html是网页的结构(Structure)。html是用来定义文档内容结构的,包含了用户需要浏览的内

html怎么加载css?

有四种加载方式:行内式通过html的style属性实现,如下所示//写在body标签中 行内式嵌入式在style标签中写css样式,在body中引用//写在style标签中的css样式 p{ colo

iis部署html css无法显示怎么解决

iis部署htmlcss无法显示怎么解决如果你的网站在VS或其他软件中运行时具有CSS和JS功能,但到了IIS中就消失了,导致网站变成纯文字界面。你需要进行如下尝试。1、首先确认是否打开IIS中的“动

html找不到css文件怎么解决

html找不到css文件怎么解决如果你在引用css文件时,使用了错误的文件路径,就会导致引用失效。解决方法就是填写正确的css文件路径。下面我们学习下HTML填写路径的两种方法。(推荐学习:HTML视

HTML文字怎么插入下划线?

在HTML中想要给文字加下划线可以使用标签来实现。下划线标签的语法:我被加下划线了来看个完整代码的用法实例: 这里是HTML中文网! HTML中文网网址:www.html.

html中空白空格怎么打?

一、键入空格在html页面中,我们可以通过键入“空格”键来插入空格。例:在p.p1中键入一个空格,在p.p2中键入5个空格。注:此时是半角状态键入“空格”测试文字|测试文字! 测试文字|测试文字!效果

HTML乱码怎么办?

HTML乱码原因1、不同编码内容混杂:HTML乱码是因为html编码问题照成(常见gb2312与utf-8两种编码内容同一时候存在照成)2、未设置HTML编码:3、使用记事本编辑html:有时使用记事

HTML如何加脚注(注释)?

为了让别人一看就知道这段代码是做什么用的。正确的程序注释一般包括序言性注释和功能性注释。HTML脚注(注释):在HTML中,可以使用注释标签来添加脚注(注释)。注释标签用来在源文档中插入注释,注释不会