miniui中selectTree树形选择框的样式调整

大家好，今天在项目中遇到了一个问题，项目中有一系列的选择框，有的要求是联动效果，还有的要求是树形结构，我负责开发树形结构，而且数据是通过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%;      
    
}

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