前言
属性列表想必大家都不会陌生，正常用 html5 来做的属性列表大概就是用下拉菜单之类的，而且很多情况下，下拉列表还不够好看，怎么办？我试着用 ht for web 来实现属性栏点击按钮弹出多功能选框，对传入的数据进行选择的功能，感觉整体实践起来还是比较简单方便的，所以在这边跟大家分享一下。
效果图
http://www.hightopo.com/demo/propertyeditor/index.html
代码实现
拓扑图
从上面的效果图中我们可以看到，整个页面分为 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 分割组件，分割组件用于左右或上下分割两个子组件， 子组件可为 ht 框架提供的组件，也可为 html 的原生组件，子组件以 position 为 absolute 方式进行绝对定位，这个组件中的参数分别为（左组件或上组件， 右组件或下组件，h 表示左右分割 v 表示上下分割，分割位置默认值为 0.5，如果设置值为 0~1 则按百分比分割，大于 1 代表左组件或上组件的绝对宽或高，小于 1 代表右组件或下组件的绝对宽或高）；还有 borderpane 面板组件为布局容器，可在上、下、左、右、中的五个区域位置摆放子组件， 子组件可为 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();
}
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 自动布局组件，即根据节点和连线关系，提供多种类型算法进行自动排布节点位置。 自动布局常用于图元较多，或连接关系教复杂时，不易于人工拖拽摆放的场景。我把各个布局方式通过按钮的方式呈现出来了，点击对应的按钮，布局方式就会根据按下的按钮设置的排布方式来自动布局：
首先，创建一个新的实例，传入需要自动布局的对象，可以为 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;
}
比较有趣的部分就是这些啦，感谢大家的阅读，希望对大家的学习有所帮助，也希望大家多多支持。
