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>

效果：

巴特西

JQuery EasyUI学习记录（二）

最新文章

热门文章