zoukankan      html  css  js  c++  java
  • requirejs整合ztree

    {block name='script'}
    
    <script>
    
        require(['jquery.ztree'], function () {
            var zTreeObj;
            var setting = {
                view: {
                    showIcon: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };
    
            var zNodes =[
                { id:1, pId:0, name:"课程目录", open:true},
                { id:11, pId:1, name:"季度产品知识课程", open:true},
                { id:111, pId:11, name:"13Q4产品知识", },
                { id:112, pId:11, name:"14Q1产品知识", },
                { id:113, pId:11, name:"14Q2产品知识", },
                { id:114, pId:11, name:"14Q3产品知识", },
                { id:115, pId:11, name:"14Q4产品知识", },
                { id:12, pId:1, name:"项目宣讲类课程", open:true},
                { id:121, pId:12, name:"项目宣讲类课程1"},
                { id:122, pId:12, name:"项目宣讲类课程2"},
                { id:123, pId:12, name:"项目宣讲类课程3"},
                { id:13, pId:1, name:"移动商学院", open:true},
                { id:131, pId:13, name:"技能类"},
                { id:132, pId:13, name:"心态类"},
                { id:133, pId:13, name:"知识类"},
                { id:134, pId:13, name:"哈哈类"},
            ];
    
            zTreeObj = $.fn.zTree.init($("#zTree"), setting, zNodes);
            function zTreeOnClick(event, treeId, treeNode) {
                //这里定义点击书中节点时,相应的页面其他的操作,示例:
                // 每次点击节点后, 弹出该节点的 tId、name 的信息
                alert(treeNode.tId + ", " + treeNode.name);
            };
        });
    </script>
    
    {/block}
    

      

    <div class="layui-row">
    
        <div class="layui-col-xs6 layui-col-md2">
            <style>
                .ztree {  margin: 0;  padding: 5px;  color: #333;  padding: 10px;  border: 1px solid #ddd;  overflow: auto;  }
                .ztree * {  padding: 0;  margin: 0;  font-size: 14px;  font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;  }
                .ztree li a {  padding: 1px 3px 0 0;  margin: 0;  cursor: pointer;  height: 26px;  color: #333;  background-color: transparent;  text-decoration: none;  vertical-align: top;  display: inline-block;  }
                .ztree li a.curSelectedNode {  padding-top: 0px;  background-color: #FFE6B0;  color: black;  height: 26px;  border: 1px #FFB951 solid;  opacity: 0.8;  }
                .ztree li span.button.ico_docu {  margin-right: 2px;  background-position: -110px -32px;  vertical-align: text-bottom;  }
                .ztree li span {  line-height: 26px;  margin-right: 2px;  }
           </style>
            <ul id="zTree" class="ztree loading">
                <li></li>
            </ul>
    
    
        </div>
        <div class="layui-col-xs12 layui-col-md10" style="padding-left: 10px;">
        </div>
    </div>
    

      

  • 相关阅读:
    springtools插件的安装
    Spring--Bean的配置
    BS模式与CS模式的区别
    AMD 和 CMD 的区别有哪些?
    js中import和require的区别
    6个最优秀的微信小程序UI组件库
    微信小程序获取formid
    NodeJs 实现简单WebSocket 即时通讯
    NodeJS怎么实现WebSocket功能
    NodeJs实现WebSocket——express-ws
  • 原文地址:https://www.cnblogs.com/meetrice/p/7507922.html
Copyright © 2011-2022 走看看