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;
}比较有趣的部分就是这些啦，感谢大家的阅读，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。
