前言
屬性列表想必大家都不會(huì)陌生，正常用 HTML5 來做的屬性列表大概就是用下拉菜單之類的，而且很多情況下，下拉列表還不夠好看，怎么辦？我試著用 HT for Web 來實(shí)現(xiàn)屬性欄點(diǎn)擊按鈕彈出多功能選框，對(duì)傳入的數(shù)據(jù)進(jìn)行選擇的功能，感覺整體實(shí)踐起來還是比較簡單方便的，所以在這邊跟大家分享一下。
效果圖
http://www.hightopo.com/demo/propertyEditor/index.html
代碼實(shí)現(xiàn)
拓?fù)鋱D
從上面的效果圖中我們可以看到，整個(gè)頁面分為 3 個(gè)部分，左邊的 graphView 拓?fù)鋱D部分，右下角的 tableView 表格部分，以及右上角的 propertyView 屬性部分。我們先把整個(gè)場景劃分出來，然后再向各個(gè)部分來添加具體的內(nèi)容：
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);//設(shè)置 borderPane 右邊組件為 rightView，寬度為400
borderPane.setCenterView(gv);//設(shè)置 borderPane 中間組件為 gv
borderPane.addToDOM();//將 borderPane 組件添加進(jìn) body 中
上面代碼中 new 出來的部分都是 HT 封裝好的組件，相當(dāng)于“類”，這里解釋一下 SplitView 分割組件，分割組件用于左右或上下分割兩個(gè)子組件， 子組件可為 HT 框架提供的組件，也可為 HTML 的原生組件，子組件以 position 為 absolute 方式進(jìn)行絕對(duì)定位，這個(gè)組件中的參數(shù)分別為（左組件或上組件， 右組件或下組件，h 表示左右分割 v 表示上下分割，分割位置默認(rèn)值為 0.5，如果設(shè)置值為 0~1 則按百分比分割，大于 1 代表左組件或上組件的絕對(duì)寬或高，小于 1 代表右組件或下組件的絕對(duì)寬或高）；還有 BorderPane 面板組件為布局容器，可在上、下、左、右、中的五個(gè)區(qū)域位置擺放子組件， 子組件可為 HT 框架提供的組件，也可為 HTML 原生組件，子組件以 position 為 absolute 方式進(jìn)行絕對(duì)定位。這里我結(jié)合了 SplitView 和 BorderPane 將場景分成了三個(gè)部分。最后記得一定要將最終的布局容器添加進(jìn) body 中或者任意一個(gè) HTML 標(biāo)簽中，這樣才能在界面上顯示，其中 addToDOM 的定義內(nèi)容如下：
addToDOM = function(){
var self = this,
view = self.getView(), //獲取這個(gè)組件的底層 div
style = view.style;//獲取底層 div 的樣式 style 屬性
document.body.appendChild(view); //將底層 div 添加進(jìn) body 中
style.left = '0';//HT 默認(rèn)將組件都定義為決定定位 absolute，所以需要設(shè)置位置
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);
}
HT 的組件一般都會(huì)嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的 HT 組件則需要用戶手工將 getView() 返回的底層 div 元素添加到頁面的 DOM 元素中，這里需要注意的是，當(dāng)父容器大小變化時(shí)，如果父容器是 BorderPane 和 SplitView 等這些 HT 預(yù)定義的容器組件，則 HT 的容器會(huì)自動(dòng)遞歸調(diào)用孩子組件 invalidate 函數(shù)通知更新。但如果父容器是原生的 html 元素， 則 HT 組件無法獲知需要更新，因此最外層的 HT 組件一般需要監(jiān)聽 window 的窗口大小變化事件，調(diào)用最外層組件 invalidate 函數(shù)進(jìn)行更新。
場景創(chuàng)建完畢。為了顯示不同節(jié)點(diǎn)對(duì)應(yīng)的屬性的不同，我們?cè)谕負(fù)鋱D上添加了七個(gè)節(jié)點(diǎn)：
function initModel(){
var name = "設(shè)備";
var count = 0;
var root = createNode(name + count++, name + (++count));//參數(shù)1為name，參數(shù)2為tag
root.setImage('./symbols/機(jī)房/服務(wù)器.json');
root.setName('服務(wù)器');
root.s('label.position', 3);
gv.sm().ss(root);//默認(rèn)選中root節(jié)點(diǎn)
for (var i = 0; i < 2; i++) {
var iNode = createNode(name + count++, name + (++count));//參數(shù)1為name，參數(shù)2為tag
createEdge(root, iNode);
for (var j = 0; j < 2; j++) {
var jNode = createNode(name + count++, name + (++count));
createEdge(iNode, jNode);
}
}
}
createNode 函數(shù)的聲明如下：
function createNode(name, tag){//創(chuàng)建Node節(jié)點(diǎn)
flag++;
var node = new ht.Node();
node.setName(name);
node.setTag(tag);
node.setImage('./symbols/機(jī)房/XX分系統(tǒng).json');
node.a('hidden', false);//自定義屬性，可以控制node.a('hidden')來控制節(jié)點(diǎn)顯隱
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);//將節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器DataModel中
node.tablePane1 = createTableView(serviceType, dataModel1);//創(chuàng)建表格面板
node.tablePane2 = createTableView(serviceSize, dataModel2);
node.tablePane3 = createTableView(version, dataModel3);
node.formPane1 = createFormPane(node.tablePane1);//創(chuàng)建表單面板
node.formPane1.title = '類型';//為了給后面dialog對(duì)話框的標(biāo)題做準(zhǔn)備
node.formPane2 = createFormPane(node.tablePane2);
node.formPane2.title = '內(nèi)存';
node.formPane3 = createFormPane(node.tablePane3);
node.formPane3.title = '型號(hào)';
if(flag % 3 === 0){
node.formPane3.v('tag', '聯(lián)想（Lenovo）服務(wù)器X3650M5 8871');
}else{
node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21');
}
node.a('型號(hào)', node.formPane3.v('tag'));
return node;
}
我們通過控制這個(gè)節(jié)點(diǎn)的 hidden 屬性，利用 graphView 中的可視過濾器 setVisibleFunc 函數(shù)來控制節(jié)點(diǎn)的顯隱：
gv.setVisibleFunc(function(data){
if(data.a('hidden')){
return false;
}
return true;
});
屬性面板
有了節(jié)點(diǎn)自然就需要顯示屬性了，加上下面的 tablePane 表格面板中的值，一共添加了七種屬性：
function createProperty(){//創(chuàng)建屬性
propertyView.addProperties([
{
name: 'name',//獲取 name 屬性，結(jié)合 accessType 屬性最終實(shí)現(xiàn)對(duì)節(jié)點(diǎn)屬性的存取，accessType 默認(rèn)值為 null，如name為age，采用getAge()和setAge(98)的get/set或is/set方式存取(這邊name為name，所以通過 getName() 獲取)
displayName: '名稱'//設(shè)置屬性名的顯示文本值
},
{
name: 'hidden',//獲取 hidden 屬性
displayName: '隱藏這個(gè)節(jié)點(diǎn)',
accessType: 'attr',//如name為hidden，采用getAttr('hidden')和setAttr('hidden', false)的方式存取
icon: 'images/alert.gif',//設(shè)置屬性名左側(cè)顯示的圖標(biāo)
valueType: 'boolean',//用于提示組件提供合適的renderer渲染 布爾類型，顯示為勾選框
editable: true//設(shè)置該屬性是否可編輯
},
{
name: 'grade',
displayName: '類型',
accessType: 'attr',
drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//自定義屬性值渲染函數(shù)
var cb = function(v) {
data.a('grade', v);
}
return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb);
}
},
{
name: 'number',
displayName: '內(nèi)存',
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: '型號(hào)',
accessType: 'attr',
displayName: '型號(hào)',
}
]);
}
第三第四個(gè)屬性中 drawPropertyValue 屬性的返回值為 fillFormPane 函數(shù)，這個(gè)函數(shù)的參數(shù)分別為（表單組件 formP，表單組件寬 w，表單組件高 h，表單組件中按鈕點(diǎn)擊生成彈出框中的表格組件 tableP，表格組件中的數(shù)組內(nèi)容 arr，cb 函數(shù)將雙擊表格組件中的行返回的值賦值給 form 表單中的 ht.widget.TextField 文本框）。
第一個(gè)參數(shù) formP 表單組件的創(chuàng)建，表單組件的創(chuàng)建就是創(chuàng)建一個(gè)表單組件，在表單組件中添加一個(gè)文本框以及一個(gè)按鈕，這個(gè)步驟在 HT 中也是相當(dāng)?shù)暮唵危?/p>
function createFormPane(tPane) {//創(chuàng)建表單面板
var formPane = new ht.widget.FormPane();
formPane.setPadding(0);//設(shè)置表單四周與組件內(nèi)容的間距
var tField = new ht.widget.TextField();//創(chuàng)建一個(gè)文本框
tField.setText('');//文本框的內(nèi)容為空
tField.setDisabled(true);//文本框不可操作
formPane.addRow([//向表單中添加行
{
id: 'tag',//唯一標(biāo)示屬性，可通過formPane.getItemById(id)獲取添加到對(duì)應(yīng)的item對(duì)象
element: tField//屬性值可為 HTML原生元素、FormPane內(nèi)部自繪制的文本信息以及HT自帶組件如Button、CheckBox和ComboBox等
},
{
button:{//設(shè)置了該屬性后HT將根據(jù)屬性值自動(dòng)構(gòu)建ht.widget.Button對(duì)象，并保存在element屬性上
label:'...',//按鈕上的文本內(nèi)容
onClicked: function(){//按鈕點(diǎn)擊事件
for(var i = 0; i < tPane.dm().size(); i++){//設(shè)置tablePane默認(rèn)選中formPane對(duì)應(yīng)的值
var data = tPane.dm().getDatas().get(i);
if(data.a('value') === formPane.v('tag')){
tPane.sm().ss(data);
}
}
return createDialog(tPane, formPane);//返回的是創(chuàng)建一個(gè)對(duì)話框，對(duì)話框的內(nèi)容為表格面板
}
}
}
], [0.5, 0.1]);//設(shè)置表格組件中第一個(gè)元素和第二個(gè)元素的顯示比例。這個(gè)表格組件一共只有兩個(gè)元素，一個(gè)文本框一個(gè)按鈕，占比分別為 0.5 和 0.1
return formPane;
}
createDialog 函數(shù)創(chuàng)建的過程也是簡潔明了，通過 setConfig(config) 方法配置對(duì)話框的標(biāo)題，尺寸，內(nèi)容等，我給 createDialog 傳了一個(gè)參數(shù) tPane 表格組件，用作對(duì)話框顯示的內(nèi)容：
function createDialog(tPane){//創(chuàng)建彈出框
dialog.setConfig({
title: gv.sm().ld().getName()+"的"+formPane.title,//對(duì)話框的標(biāo)題
content: tPane, //直接將彈出框的內(nèi)容設(shè)置為表格面板
width: 400,//指定對(duì)話框的寬度
height: 200,
draggable: true,//指定對(duì)話框是否可拖拽調(diào)整位置
closable: true,//表示是否顯示關(guān)閉按鈕
maximizable: true,//表示對(duì)話框是否可被最大化
resizeMode: "wh",//鼠標(biāo)移動(dòng)到對(duì)話框右下角可改變對(duì)話框的大小，wh表示寬高都可調(diào)整
buttons: [//添加兩個(gè)按鈕
{
label: '取消',
action: function(){
dialog.hide()
}
},
{
label: '確定',
}
]
});
dialog.show();//顯示對(duì)話框
}
第四個(gè)參數(shù) tableP 表格組件，也沒有什么特別的，就是創(chuàng)建一個(gè)表單組件，然后向表單組件中添加列，步驟簡單，代碼也相當(dāng)簡單：
function createTableView(arr, dm){//創(chuàng)建表格組件
var tableView = new ht.widget.TableView(dm);
tableView.addColumns([//用json的數(shù)組參數(shù)方式批量添加列信息
{
displayName: 'ID',//獲取表頭的列名內(nèi)容
drawCell: function(g, data, selected, column, x, y, w, h, tableView){//自定義單元格渲染方式
var id = tableView.getRowIndex(data);//返回data對(duì)象所在的行索引
ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//繪制文字參數(shù)(g畫筆對(duì)象，value文字內(nèi)容，font文字字體，color文字顏色，x繪制開始的x坐標(biāo)，y繪制開始的y坐標(biāo)，w繪制的寬度，h繪制的高度，align文字水平對(duì)齊方式，vAlign文字垂直對(duì)齊方式)
}
},
{
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 中的參數(shù)，來看看這個(gè)函數(shù)是如何定義的，基本上只差最后一步，點(diǎn)擊 tablePane 表格組件中的元素，將這個(gè)元素返回給 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所在行被雙擊時(shí)回調(diào)
var v = arr[data.a('index')];
formP.v('tag', v);//根據(jù)id設(shè)置對(duì)應(yīng)item元素值 為 setValue 的簡寫，這個(gè)id為tag的元素就是文本框
dialog.hide();
if (cb){cb(v);} //如果傳入了cb參數(shù)，則設(shè)置data.a('number')/data.a('helloName')的值為表格中被雙擊的那一行的值，即賦值給第三第四屬性
}
tableP.onDataClicked = function(data){//表格組件中的data所在行被單擊時(shí)回調(diào)
dialog.getConfig().buttons[1].action = function(){//點(diǎn)擊“確定”才進(jìn)行下面的操作
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所在行被雙擊時(shí)回調(diào)
var v = arr[data.a('index')];
formP.v('tag', v);//根據(jù)id設(shè)置對(duì)應(yīng)item元素值 為 setValue 的簡寫，這個(gè)id為tag的元素就是文本框
dialog.hide();
if (cb){cb(v);} //如果傳入了cb參數(shù)，則設(shè)置data.a('number')/data.a('helloName')的值為表格中被雙擊的那一行的值，即賦值給第三第四屬性
}
tableP.onDataClicked = function(data){//表格組件中的data所在行被單擊時(shí)回調(diào)
dialog.getConfig().buttons[1].action = function(){//點(diǎn)擊“確定”才進(jìn)行下面的操作
var v = arr[data.a('index')];
formP.v('tag', v);
dialog.hide();
if (cb){cb(v);}
}
};
return formP.getView();
}
右上方屬性欄的顯示到這里就全部結(jié)束了，右下方的表格面板的創(chuàng)建方式也是雷同的，大家可以自行看代碼理解。
自動(dòng)布局
最后說一下整個(gè)界面節(jié)點(diǎn)的排布，HT 中的 autolayout 自動(dòng)布局組件，即根據(jù)節(jié)點(diǎn)和連線關(guān)系，提供多種類型算法進(jìn)行自動(dòng)排布節(jié)點(diǎn)位置。 自動(dòng)布局常用于圖元較多，或連接關(guān)系教復(fù)雜時(shí)，不易于人工拖拽擺放的場景。我把各個(gè)布局方式通過按鈕的方式呈現(xiàn)出來了，點(diǎn)擊對(duì)應(yīng)的按鈕，布局方式就會(huì)根據(jù)按下的按鈕設(shè)置的排布方式來自動(dòng)布局：
首先，創(chuàng)建一個(gè)新的實(shí)例，傳入需要自動(dòng)布局的對(duì)象，可以為 DataModel、graphView 以及 graph3dView 三種，然后設(shè)置默認(rèn)的排布方式：
autoLayout = new ht.layout.AutoLayout(gv);
setTimeout(function(){
layout('towardsouth', true);//因?yàn)閳D片還沒加載出來的時(shí)候，自動(dòng)布局就按照節(jié)點(diǎn)的默認(rèn)大小來布局的
}, 200);
接著創(chuàng)建 formPane 表單面板，添加進(jìn) body 中，放在 body 左上角，我不將所有代碼粘出來了，就顯示第一個(gè)布局的按鈕就好：
function createDirectionForm(){
var form = new ht.widget.FormPane();
form.setWidth(200);//設(shè)置表單寬度
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)';//設(shè)置陰影樣式
form.addRow([//這一行單獨(dú)拿出來，作為標(biāo)題
{
element: '自動(dòng)布局:',//顯示的文字
}
], [0.1]);//數(shù)組內(nèi)只有一個(gè)對(duì)象，就只設(shè)置一個(gè)對(duì)象的寬度就好
form.addRow([
{
button: {
icon: '布局/南布局.json',
onClicked: function(){
layout('towardsouth', true);
},
background: null,
labelColor: '#fff',
groupId: 'btn',
toolTip: '朝南布局',
borderColor: null
}
},
//....接下來添加剩下的6個(gè)按鈕
], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//數(shù)組中有七個(gè)對(duì)象，就要設(shè)置七個(gè)對(duì)象的寬度
return form;
}
比較有趣的部分就是這些啦，感謝大家的閱讀，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
