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%;      

}

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