zTree样式的优化,包括最后一个节点横向展示

做权限的朋友应该都会遇到这样的一个问题,就是权限的选择问题,农成最近在研究一个系统的权限问题,同样遇到了这样的问题,想必大家第一个处理权限选择的样式的方法就是使用zTree这样个jquery的插件吧。

农成先贴出来官方网站的地址,大家可以去这个网站下载,看API文档,以及demo的演示。

zTree — jQuery 树插件 这个就是可以下载的网址了。

但是使用这个插件就会遇到一个问题,使用官方的demo来看想必是不怎么好看的。

就是上面的这个样子,想必这样的样式可能跟大部分人的需求是不符合的。所以就需要来修改这个样式了。

然后农成就用我渣渣的前端css功底,写了一个比较粗糙的,不是很好看,但是也符合我现有的业务需求了。效果如下图:

其实实现这个功能很简单的,大家按照demo的写法,先把ztree给搭建出来,然后直接在本页面修改其css文件就可以达到这样的效果的。

废话就不多说了,直接把css文件贴出来,如果对你们有帮助,就直接拿走吧。

<style>
    ul.ztree li span.button.switch{margin-right:5px}
    ul.ztree ul ul li{display:inline-block;white-space:normal}
    ul.ztree>li>ul>li{padding:5px}
    ul.ztree>li{background: #dae6f0}
    ul.ztree>li:nth-child(even)>ul>li:nth-child(even){background: #eef5fa}
    ul.ztree>li:nth-child(even)>ul>li:nth-child(odd){background: #f6fbff}
    ul.ztree>li:nth-child(odd)>ul>li:nth-child(even){background: #eef5fa}
    ul.ztree>li:nth-child(odd)>ul>li:nth-child(odd){background: #f6fbff}
    ul.ztree>li>ul{margin-top:12px}
    ul.ztree>li{padding:15px;padding-right:25px}
    ul.ztree li{white-space:normal!important}
    ul.ztree>li>a>span{font-size:15px;font-weight:700}
</style>

 

 

未经允许不得转载:微信信息发源地 » zTree样式的优化,包括最后一个节点横向展示

赞 (4)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册