EasyUI简单实现 Ztree联动选项卡栏,并且对选项卡实现右键功能附加

最新推荐文章于 2023-04-26 16:58:00 发布

LcyCoinEleP

最新推荐文章于 2023-04-26 16:58:00 发布

阅读量424

点赞数 1

分类专栏：学习笔记前端:EasyUI 文章标签： EASYUI DEMO 选项卡右键

本文链接：https://blog.csdn.net/qq_39458593/article/details/75669647

版权

学习笔记前端:EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(一):环境引用

当引入的easyui.min 的时候,等于引入了所有组件,在页面通过引入以下东西

  <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!--主题-->
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui/ext/jquery.cookie.js"></script>
    <script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <!-- 导入ztree类库 -->
    <link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css" />
    <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>

(二):最终界面

(三) 逐步实现: 总体布局

<body class="easyui-layout">
        <div data-options="region:'north',title:'northOption'" style="height: 100px;" >
            north 区域
        </div>

        <div data-options="region: 'west',title:'westOption' " style="height: 100px">
                west 区域
        </div>

        <div data-options="region: 'center',title:'中央区域' ">
                中央区域
        </div>

        <div data-options="region: 'east' ,title:'eastOption' " style="width: 80px">
                east 区域
        </div>

        <div data-options="region: 'south' ,title:'southOption' " style="height: 80px">
        south 区域
        </div>


</body>

对指定区域添加下拉选项:

初始化ZTree, 是由ul标签, class="tree"引入

   $.fn.zTree.init($("#baseMenu"), setting, zNodes);
	//arg0:选定UL 定位;
	//arg1,设置该树所基于的类型:	
        //  arg2,Zodes 主要设置具体节点信息,这里先任意写几个,测试是否能成功 var setting = { data: { simpleData: { enable: true // 支持简单json数据格式 } } };var zNodes = [ {id:1,pId:0,name:"父节点一"}, //id 就是自身ID {id:2,pId:0,name:"父节点二"}, //pId: 所属父节点 {id:11,pId:1,name:"子节点一"}, //name;就是name {id:12,pId:1,name:"子节点二"}, {id:13,pId:2,name:"子节点三"},
 {id:14,pId:2,name:"子节点四"} ];



根据需要,在对 ZNodes,进行更改



var zNodes = [
    {id:1,pId:0,name:"父节点一"},
    {id:2,pId:0,name:"父节点二"},
    {id:11,pId:1,name:"子节点一",page:"lalal.cn"},
    {id:12,pId:1,name:"子节点二",page:"bbb.cn"},
    {id:13,pId:2,name:"HTML1",page:"http://www.baidu.cn"},
    {id:14,pId:2,name:"HTML2",page:"https://www.baidu.com"}
];






zNodes,主要用于设置树节点信息



下一步:树形菜单整合选项卡,就是说tree被点击时,生成选项卡,并且在该选项卡所属的位置,显示出真实内容







通过Ztree,联动选项卡,主要是修改tree里面的setting信息


 $(function(){
        // 1、 进行ztree菜单设置
        var setting = {
            data: {
                //
                simpleData: {
                    enable: true // 支持简单json数据格式
                }
            },
            callback: {
                onClick : function(event, treeId, treeNode, clickFlag){
                    var content = '<div style="width:100%;height:100%;overflow:hidden;">'
                        + '<iframe src="'
                        + treeNode.page
                        + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';

                    // 没有page树形菜单，不打开选项卡
                    if(treeNode.page != undefined && treeNode.page != ""){
                        // 如果选项卡已经打开，选中
                        if($("#mytabs").tabs('exists',treeNode.name)){
                            // 选中选项卡
                            $("#mytabs").tabs('select',treeNode.name);
                        }else{
                            // 如果没有打开，添加选项卡
                            $("#mytabs").tabs('add',{
                                title:treeNode.name,
                                content: content,
                                closable :true
                            });
                        }
                    }
                }
            }
        };

        // 2、提供ztree树形菜单数据
				这个page是啥? ,反正这样写,所链接的东西就到选项卡所在的选项
        var zNodes = [
            {id:1,pId:0,name:"父节点一"},
            {id:2,pId:0,name:"父节点二"},
            {id:11,pId:1,name:"子节点一"},
            {id:12,pId:1,name:"子节点二"},
            {id:13,pId:2,name:"HTML1",page:"http://www.baidu.cn"},
            {id:14,pId:2,name:"HTML2",page:"https://www.baidu.com"}
        ];

        // 3、生成菜单
        $.fn.zTree.init($("#baseMenu"), setting, zNodes);
    });
 



对选项卡进行右键增强,屏蔽原先右键,增加自定义右键















首先创建DIV 承载右键信息.




  <!--设置右键选项,通过class="easyui-mune"-->
        <div id="mm" class="easyui-menu" style="width:120px;">
            <div id="closeCurr"   data-options="iconCls:'icon-cancel'">关闭当前窗口</div>
            <div id="closeOthers" data-options="iconCls:'icon-cancel'">关闭其它窗口</div>
            <div>
                <span>Open</span>
                <div style="width:150px;">
                    <div><b>Word</b></div>
                    <div>Excel</div>
                    <div>PowerPoint</div>
                </div>
            </div>
            <div data-options="name:'new'">new</div>
            <div class="menu-sep"></div>  <!-- 分隔线 -->
            <div id="closeAll" data-options="iconCls:'icon-cancel'">关闭全部窗口</div>
        </div>






屏蔽自带右键 并且确定上述DIV位置跟随鼠标





选定选项卡所在的DIV ,屏幕IE自带的右键,添加自定义右键

$("#mytabs").tabs({
            onContextMenu: function(e, title,index){
                // 阻止默认菜单显示
                e.preventDefault();

                // 显示自定义右键菜单
                $("#mm").menu('show',{
                    left : e.pageX,
                    top : e.pageY
                });
            }
        });






最后,对上面的DIV实现功能

LcyCoinEleP

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI简单实现 Ztree联动选项卡栏,并且对选项卡实现右键功能附加

(一):环境引用当引入的easyui.min 的时候,等于引入了所有组件,在页面通过引入以下东西 (二):最终界面 (三) 逐步实现: 总体布局 north 区域
复制链接

扫一扫