Yii 2.0 系统中使用到的 jQuery 多级列表树插件 bootstrap-treeview_Yii_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • Yii

    当前位置:主页 > 网络编程 > Yii >

    Yii 2.0 系统中使用到的 jQuery 多级列表树插件 bootstrap-treeview

    时间:2019-07-10|栏目:Yii|点击:
  • 【使用场景描述】

    我们公司的后台系统中用到了jQuery多级列表树插件 bootstrap-treeview 来实现多级菜单以文件夹的形式展示多级的层级关系,目的:让人一目了然的知道子类的上级,上上级,上上上级....

    由于我们公司其他人在其他的项目中用到了这个插件,所以我一部分是copy人家的代码,一部分的jq代码自己写的,因为我用别人的代码套用,只能正确的展示,但是有一个问题:当你选中某个子类的时候,它当前的显示状态,显示不出来,而且别人写的时候的场景可能和我有差别,所以我不得不学习一下jq的一些用法(因为我jq技术不怎么好,公司有前端直接给,所以导致我现在不会写了....) 好了不说其他废话了,现在正式开始....

    1: 具体的样式是这样的:

    1.png

    2:在你页面view层,你引入需要的js和css

    <link href="/media_ad/treeview/css/bootstrap-treeview.css" rel="stylesheet" type="text/css"/> <link href="/media_ad/menu_style/style.css" rel="stylesheet" type="text/css"/> <script src="/media_ad/bootstrap.js" type="text/javascript"></script> <script src="/media_ad/jquery.js" type="text/javascript"></script> <script src="/media_ad/treeview/js/bootstrap-treeview.js" type="text/javascript"></script>

    3: 在js中加上这一段代码:

    //$tree_info1就是你需要在后台拼好结构以及数据传递到页面层 var tree_data = {$tree_info1}; $('#tree').treeview({levels: 2,data: tree_data,enableLinks:true,showBorder:false,collapseIcon:'icon_m icon-control icon-minus',expandIcon:'icon_m icon-control icon-add'});

    4:这是我的层级结构:$tree_info1 (说明:这个结构我截图了一部分,因为太多了,截图不全而且易迷糊,所以我只展示出一个大分类的层级结构)

    2.png

    5:对我来说难的不是树怎么展示,而是当前的显示状态,因为我们的需求是4级,由于官网写的东西,我看不太懂,也没有更多的时间钻研,所以我在我其他同事原来写的jq基础上,加以理解和优化的 下面这些jq说明如下: (1)假如你当前显示的是来源,你如何让它自己显示当前的状态,还有就是他的上级-->端口,端口的上级-->平台,平台的上级-->媒体,他们都进行展开,并且其他无关的不能展开 (2)因为其他的思路我不会,就会这一种,我显示一层一层的展示的,直到最后一层,当然了,我这种方式适合层数少的,如果来个7-8层甚至更多的,那就绕死你啦

    3.png

    4.png

    【总结】 这个难是不难,可是我jq不行啊,对我来说,每次让我写jq,简单的还行,难的我就不会了,所以加上这个层数又多,因为我脑子比较笨,一会我自己都把自己给绕晕了, 然后这个展示当前的状态,我求助于我的一个小哥哥大神给我指点的,所以在这里记录一下,因为我不会简单的,如果大家有好的方法,欢迎分享,我在这里万分感谢.... 另外:就是我在咨询小哥哥的时候,可能有个问题比较绕,比较麻烦,小哥哥直接说,就那样展示吧,凑合着看,像我这种有“爱纠结”的人,肯定不同意啊,所以就死拉着他帮我捋逻辑,最后终于弄好了...我想说明的一个问题就是:我们自己做的东西,自己都看不过去,怎么给别人交接,即便是交接了,别人以后也可能回来找你,既然你知道他回来找你,干嘛不一下子做好那,你说是不是,我不是说小哥哥不认真,这位小哥哥可是大神,但是往往一些大神就容易偷懒,所以希望我和小白们,能从基础做起,认真做事,因为至少你的态度诚恳,比什么都强!!! 好了,我要回家吃饭了,拜拜,有问题,请指教.....

    上一篇:PHP 学习步骤教程

    栏    目:Yii

    下一篇:Yii2.0 数据库操作增删改查详解

    本文标题:Yii 2.0 系统中使用到的 jQuery 多级列表树插件 bootstrap-treeview

    本文地址:http://www.jh-floor.com/wangluobiancheng/Yii/2355.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号