miniui中selectTree树形选择框的样式调整
来源:互联网 发布:怎么读懂易语言源码 编辑:程序博客网 时间:2024/05/12 22:09
大家好,今天在项目中遇到了一个问题,项目中有一系列的选择框,有的要求是联动效果,还有的要求是树形结构,我负责开发树形结构,而且数据是通过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%;
}
然后就可以做出如下效果:
- miniui中selectTree树形选择框的样式调整
- 获取miniui combobox及selecttree 数据
- html中内联数据的样式调整
- bootstrap中select下拉框样式调整
- mini-fit miniui调样式的好搭档
- js中选择外部样式表中样式的方法
- WPF 的选择框样式
- 树形控件复选框的级联选择
- 初学miniui之miniui的使用
- 前台框架EasyUI的弹出框dialog,样式调整总结
- 简单实用的选择框样式
- 按钮样式的文件选择框
- 自定义checkbox选择框的样式
- 选择框的样式,
- 树形选择排序的实现
- jquery miniui的体验
- 树形检索下拉选择框
- 关于树形弹出框选择JS和sql的记录
- 多线程部分案例总结
- cocos2d-x在Command Line中使用TexturePacker
- Spring下面的classpath 和 classpath* 区别的简单讲解
- 每日一问之WebView
- Hibernate HQL查询(2)
- miniui中selectTree树形选择框的样式调整
- leetcode -- 常用算法
- 集合部分案例总结
- java对redis的基本操作
- WebLogic安装方式之三静默文件安装
- UISegmentedControl的使用
- 修改Launcher应用程序列表的背景
- Jenkins构建Android项目持续集成之单元测试及代码覆盖率
- 获取导航栏和状态栏的高度