大家好，今天在專案中遇到了一個問題，專案中有一系列的選擇框，有的要求是聯動效果，還有的要求是樹形結構，我負責開發樹形結構，而且資料是通過uid、puid的方式生成層級關係。

在網上查閱了一些資料後，我選擇了miniui的selectTree去寫這個選著框，做出了樹形結構後在功能上基本滿足了需求，但是樣式上卻和其他選擇框差距很大，那麼樹形結構的樣式怎麼調整呢，這個我感覺我們可以去miniui.csszhong 去調整：

1、設定HTML：

<input id="WorkLocation" class="mini-treeselect" multiSelect="false" resultAsTree="false" valueFromSelect="true" valueField="_uid" parentField="_puid"
textField="ParameterCaptionName"  checkRecursive="true" showFolderCheckBox="true"  expandOnLoad="true"  showTreeIcon="false" showTreeLines="false" />

在這裡面可以設定很多屬性，比如說是否可以多選multiSelect，還有資料是否是具有樹形的層級結構resultAsTree，像我這種沒有層級結構的就要設為false，然後再設定valueField值，和parentField的值來生成具有層級結構的選擇框，其他的屬性可以去miniui官網檢視。

2、調節css樣式：

.mini-tree-node-hover .mini-tree-nodeshow
{
    padding:0;
    padding-left:1px;
    padding-right:2px;  
}


.mini-tree-selectedNode
{
    padding:0;
    padding-left:1px;
    padding-right:2px;
    border:1px solid #A9ACB5;
    background:#1E90FF; 
    zoom:1;
}
    .mini-tree-selectedNode:hover {
    background-color: #DEDEDE;
    }

這些程式碼去掉了選著框的那些hover上去的背景圖片然後自己去定義，讓其和其他的選擇框能夠統一。

3、其他的選著框都是點選在這一行上面就能夠選取，那麼對於這種樹形的，怎麼設定呢，我巧妙的設定下一些class的寬度，margin和padding值，而不用修改miniui的js檔案，就能實現了整行選擇有效，且不與收縮展開按鈕衝突

.mini-tree-nodetext
{
    width: 2000%;
    height:18px;
    line-height:18px;   
    +line-height:19px;   
    vertical-align:middle;
    
    _vertical-align:top;
    
    display:inline-block;
    padding-left:303px;    
    padding-right:3px;    
    white-space:nowrap;
    margin-left: -300px;
}


.mini-tree-nodetext a
{
    text-decoration:none;
    color:#000;
    outline:none;
    display:inline-block;
    margin-bottom:2px;
    margin-top:1px\9\0;  
    +line-height:16px;       
    _margin-top:2px;
    width:300%;      
    
}

然後就可以做出如下效果：