屬性清單想必大家都不會陌生，正常用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.6rightView.getView().style.borderLeft = '1px solid #000';var borderPane = new ht.widget. BorderPane();//邊框面板組件borderPane.setRightView(rightView, 400);//設定borderPane右邊元件為rightView，寬度為400borderPane.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, 觀點){ 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.setHGapapapap (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.setHGapapapap (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;}比較有趣的部分就是這些啦，感謝大家的閱讀，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。