• JQuery EasyUI学习记录(二)


    1.jquery easyUI动态添加选项卡(查看jquery easyUI手册)

    1.1 用于动态添加一个选项卡

    1.1.1 选中指定的选项卡和判断某个选项卡是否存在

     

    测试代码:

    <a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
                    <script type="text/javascript">
                        $(function(){
                            //页面加载完成后,为上面按钮绑定事件
                            $("#but1").click(function(){
                                //判断选项卡是否存在
                                var e = $("#mytabs").tabs("exists","系统管理");//返回boolean类型
                                if(e){
                                    //已经存在,选中就可以
                                    $("#mytabs").tabs("select","系统管理");
                                }else{
                                    //调用tabs对象的add方法动态添加一个选项卡
                                    $("#mytabs").tabs("add",{
                                        title:'系统管理',
                                        iconCls:'icon-edit',
                                        closable:true,
                                        content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
                                    });
                                }
                                
                            })
                        })
                    </script>
    <!-- tab面板 -->
            <div id="mytabs" class="easyui-tabs" data-options="fit:true">
                <!-- 使用子div表示每个面板 
                    fit:true----自适应(填充父容器)
                -->
                <div data-options="iconCls:'icon-save'" title="面板一">111</div>
                <div data-options="closable:true" title="面板二">222</div>
                <div title="面板三">333</div>
            </div>

     2.jquert ztree插件使用

    2.1在页面引入ztree相关文件

        <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

    2.2 使用标准json数据构造ztree(了解)

    <div title="面板二">
                    <!-- 展示ztree:使用标准json数据构造ztree -->
                    <ul id="ztree1" class="ztree"></ul>
                    <script type="text/javascript">
                        $(function(){
                            //页面加载完成后,执行这段代码-----动态创建ztree
                            var setting = {};
                            //构造节点数据
                            var zNodes= [
                                         {"name":"节点一","children":[
                                                                           {"name":"节点一_1"},
                                                                           {"name":"节点一_2"},
                                                                   ]},//每个json对象表示一个节点数据
                                         {"name":"节点二"},//每个json对象表示一个节点数据
                                         {"name":"节点三"},//每个json对象表示一个节点数据
                                         ];
                            //调用API初始化ztree
                            $.fn.zTree.init($("#ztree1"),setting,zNodes);
                        })
                    </script>
                </div>

    效果:

     2.3 使用简单json数据构造ztree(重点)

    其中id表示,这个节点的id;pId表示这个节点的父id

    <div title="面板三">
                    <ul id="ztree2" class="ztree"></ul>
                    <script type="text/javascript">
                        $(function(){
                            var setting= {
                                    data: {
                                        simpleData: {
                                            enable: true//使用简单json数据构造ztree节点
                                        }
                                    }
                            };
                            //构造节点数据
                            var zNodes= [
                                         {"id":"1","pId":"0","name":"节点一"},//每个json对象表示一个节点数据
                                         {"id":"2","pId":"1","name":"节点二"},//每个json对象表示一个节点数据
                                         {"id":"3","pId":"2","name":"节点三"},//每个json对象表示一个节点数据
                                         ];
                            //调用API初始化ztree
                            $.fn.zTree.init($("#ztree2"),setting,zNodes);
                        })
                    </script>
                </div>

    效果:

      2.4 使用ajax动态获取json数据构造ztree(重点)

    <div title="面板四">
                    <ul id="ztree3" class="ztree"></ul>
                    <script type="text/javascript">
                        $(function(){
                            var setting3= {
                                    data: {
                                        simpleData: {
                                            enable: true//使用简单json数据构造ztree节点
                                        }
                                    }
                            };
                            
                            //发送ajax请求,获取json数据
                            //jQuery提供的ajax方法:ajax,post,get,load,getJson,getScript
                            var url="${pageContext.request.contextPath}/json/menu.json";
                            $.post(url,{},function(data){
                                //调用API初始化ztree
                                $.fn.zTree.init($("#ztree3"),setting3,data);
                            },'json');
                            
                        })
                    </script>
                </div>

    json数据:

    [
            { "id":"11", "pId":"0", "name":"基础数据"},
            { "id":"112", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},
            { "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
            { "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
            { "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
            { "id":"12", "pId":"0", "name":"受理"},
            { "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
            { "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
            { "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
            { "id":"13", "pId":"0", "name":"调度"},
            { "id":"131", "pId":"13", "name":"查台转单","page":""},
            { "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
    ]

    效果:

      2.5 使用ajax动态获取json数据构造ztree,使用ztree提供的API为节点绑定事件(重点)

    使用setting中的callback属性来使得每个节点有点击功能,

    <div title="面板四">
                    <ul id="ztree3" class="ztree"></ul>
                    <script type="text/javascript">
                        $(function(){
                            var setting3= {
                                    data: {
                                        simpleData: {
                                            enable: true//使用简单json数据构造ztree节点
                                        }
                                    },
                                    callback: {
                                        //动态添加选项卡
                                        onClick:function(event,treeId,treeNode){
                                            //判断该节点是否是根节点
                                            if(treeNode.page != undefined) {
                                                //判断选项卡是否存在
                                                var e=$("#mytabs").tabs("exists",treeNode.name);
                                                if(e){
                                                    //已经存在,选中
                                                    $("#mytabs").tabs("select",treeNode.name);
                                                }else{
                                                    $("#mytabs").tabs("add",{
                                                        title:treeNode.name,
                                                        iconCls:'icon-edit',
                                                        closable:true,
                                                        content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
                                                    });
                                                }
                                            }
                                            
                                        }
                                            
                                    }
                            };
                            
                            //发送ajax请求,获取json数据
                            //jQuery提供的ajax方法:ajax,post,get,load,getJson,getScript
                            var url="${pageContext.request.contextPath}/json/menu.json";
                            $.post(url,{},function(data){
                                //调用API初始化ztree
                                $.fn.zTree.init($("#ztree3"),setting3,data);
                            },'json');
                            
                        })
                    </script>
                </div>

    效果:

     

  • 相关阅读:
    requirejs学习笔记
    Java日期时间处理
    Linux安装ftp服务
    软考真题之设计模式
    《Microsoft Visio 2013 Step by Step.pdf》
    《C++实践之路.pdf》源码
    Python基础与进阶
    微信小程序实战[01]
    常用资源网站
    ECLIPS-S测井系统下的仪器挂接 [CV模块]
  • 原文地址:https://www.cnblogs.com/FanJava/p/9015011.html
Copyright © 2020-2023  润新知