Bootstrap02

最新推荐文章于 2022-05-09 22:58:00 发布

败酔

最新推荐文章于 2022-05-09 22:58:00 发布

阅读量91

点赞数

文章标签： jQuery EasyUI 树形菜单 Tab切换动态添加 JSON数据

本文链接：https://blog.csdn.net/weixin_63985180/article/details/124066636

版权

一、树形菜单

头部Jquery代码:

<script type="text/javascript">
   $(function() {
       $('#funcTree').tree({
//ctx是上下文参数，作为绝对路径使用，详细可以查看上一章EasyUI
           url : ctx + '/data/tree_data1.json',//拿到json里面的数据用作于树形菜单
//双击事件
           onDblClick : function(node) {
//判重，如果为false即可以添加新的tab
               if(!$("#tt").tabs('exists',node.text)){
                   $('#tt').tabs('add', {
                       title:node.text,
                       content:node.text,
                       closable:true
                   });
//如果为true，证明已经存在，就移动到指定的tab
               }else{
                   $('#tt').tabs('select',node.text)
               }
           }
       });
   })
</script>

HTML代码:

<body class="easyui-layout">
   <div data-options="region:'north',title:'芜湖',split:true"
       style="height: 100px;"></div>
   <div data-options="region:'west',title:'功能导航',split:true"
       style="width: 200px;">
       <ul id="funcTree"></ul>
   </div>
   <div data-options="region:'center'"
       style="padding: 5px; background: #eee;">
       <div id="tt" class="easyui-tabs" style="width: 100%; height: 100%;">
           <div title="首页" style="padding: 20px; display: none;">首页</div>
       </div>
   </div>
   <div data-options="region:'south',split:true"
       style="text-align: center; height: 30px; background: #E0ECFF"
       class="panel-title">Copyright@XXXX有限责任公司</div>
</body>

运行效果

败酔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap02

一、树形菜单头部Jquery代码:<script type="text/javascript"> $(function() { $('#funcTree').tree({ //ctx是上下文参数，作为绝对路径使用，详细可以查看上一章EasyUI url : ctx + '/data/tree_data1.json',//拿到json里面的数据用作于树形菜单 //双击事件 ...
复制链接

扫一扫