EasyUI插件使用(一)

最新推荐文章于 2024-04-13 07:08:23 发布

Marksunshine

最新推荐文章于 2024-04-13 07:08:23 发布

阅读量924

点赞数

分类专栏： easyui 前端文章标签： easyui 布局插件

本文链接：https://blog.csdn.net/Marksunshine/article/details/53153999

版权

easyui 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

easyUI插件使用(一)

一丶前提
官网：http://www.jeasyui.com/下载easyUI的开发包：

easyui开发包

二丶页面布局需要引入的相关文件

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

三丶在JSP页面中设置布局(layout的使用)

书写代码:

<body class="easyui-layout">

    <div data-options="region:'north',title:'North Title'" style="height:100px;">北</div> 

    <div data-options="region:'south',title:'South Title'" style="height:100px;">南</div> 

    <div data-options="region:'east',title:'East'" style="width:100px;">东</div> 

    <div data-options="region:'west',title:'系统菜单'" style="width:100px;">西</div> 

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

显示效果:
简单的页面布局显示

四丶accordion折叠面板控件的使用

代码:

<body class="easyui-layout">

    <div data-options="region:'north',title:'North Title'" style="height:100px;">北</div> 

    <div data-options="region:'south',title:'South Title'" style="height:100px;">南</div> 

    <div data-options="region:'east',title:'East'" style="width:100px;">东</div> 

    <div data-options="region:'west',title:'系统菜单'" style="width:100px;">
        <div  class="easyui-accordion" data-options="fit:true" > 
            <div title="基本功能"> 
            </div> 
            <div title="系统功能"> 
            </div> 
        </div> 
    </div> 

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

显示效果:
相当于菜单选项

五丶tabs选项卡面板控件

代码:

body class="easyui-layout">

    <div data-options="region:'north',title:'North Title'" style="height:100px;">北</div> 

    <div data-options="region:'south',title:'South Title'" style="height:100px;">南</div> 

    <div data-options="region:'east',title:'East'" style="width:100px;">东</div> 

    <div data-options="region:'west',title:'系统菜单'" style="width:100px;">
        <div  class="easyui-accordion" data-options="fit:true" > 
            <div title="基本功能"> 
            </div> 
            <div title="系统功能"> 
            </div> 
        </div> 
    </div> 

    <div data-options="region:'center',title:'center title'" >
        <div id="tt" class="easyui-tabs" data-options="fit:true"> 

        <div title="第一个显示框" data-options="closable:true">告诉我你在哪?</div> 

        <div title="第二个显示框" data-options="closable:true">tab2 </div> 

</div> 
</div> 
</body>

显示效果:
tabs的显示效果,类似于选择一个菜单打开的一个窗口

六丶jQuery easyUI中动态添加选项卡的使用

1.在添加的选项卡中添加对应的页面,那么首先要创建一个JSP页面;

2.在layout界面设置的框架中书写代码实现点击动态生成一个选项卡.

代码:

<body class="easyui-layout">

    <div data-options="region:'north',title:'North Title'" style="height:100px;">北</div> 

    <div data-options="region:'south',title:'South Title'" style="height:100px;">南</div> 

    <div data-options="region:'east',title:'East'" style="width:100px;">东</div> 

    <div data-options="region:'west',title:'系统菜单'" style="width:120px;">
        <div  class="easyui-accordion" data-options="fit:true" > 
            <div title="基本功能"> 
                <a id="but1" class="easyui-linkbutton">开启奇幻之旅</a>
                <script type="text/javascript">
                    $(function() {
                        //页面加载后,为该链接标签绑定一个鼠标点击事件
                        $("#but1").click(function() {
                            //alert(111);
                            //判断是否存在(动态添加)
                            var tab = $("#tt").tabs("exists","这是动态添加的");
                            if(tab) {
                                $("#tt").tabs("select","这是动态添加的");
                            }else {
                                //添加指定在中心显示的tabs选项卡
                                $("#tt").tabs('add',{
                                    title:'欢迎来到梦幻之境',
                                    iconCls:'icon-save',
                                    content:'<iframe frameborder="no" width="100%" height="100%" src="${pageContext.request.contextPath}/ztreeshow.jsp"></iframe>'
                                });
                            }
                        });
                    });
                </script>
            </div> 
            <div title="系统功能"> 
            </div> 
        </div> 
    </div> 

    <div data-options="region:'center',title:'center title'" >
        <div id="tt" class="easyui-tabs" data-options="fit:true"> 

        <div title="第一个显示框" data-options="closable:true">告诉我你在哪?</div> 

</div> 
</div> 
</body>

显示效果:点击前

点击前

显示效果:点击后

七丶jQuery ztree插件使用

1.在使用前需要引入相关的js/css文件:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入ztree需要的相关资源 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

第一种:使用标准json数据构造ztree(了解)

<div title="系统功能"> 
                <ul id="ztree1" class="ztree"></ul>
                <script type="text/javascript">
                    $(function() {
                        //alert(1);
                        //页面加载后,动态创建ztree树
                        //1.定义变量,设置ztree的属性
                        var setting = {};
                        //2.使用标准的JSON数据构造树上的节点数据
                        var zNodes = [
                                      { "name":"天空之城",
                                        "children":[{"name":"韵絮","children":[{"name":"飘絮"}]},
                                        {"name":"天虚"},
                                        {"name":"南青"}]
                                      },
                                      {"name":"大地之城"},
                                      {"name":"金辉之城"}
                                      ];

                        //3.调用ztree的init初始化ztree
                        //alert(zNodes);
                        $.fn.zTree.init($("#ztree1"),setting,zNodes);
                    });
                </script>
            </div>

显示效果:
使用标准的JSON创建节点树

第二种:使用简单json数据构造ztree（重点）
代码:

<!-- 简单JSON数据构造ztree -->
            <div title="简单JSON数据构造ztree" >
                <ul id="ztree2" class="ztree"></ul>
                <script type="text/javascript">
                    //页面加载
                    $(function() {
                        //页面加载完后,动态添加ztree
                        //1.定义变量
                        var setting2 = {
                                data: {
                                    simpleData: {
                                        enable: true,
                                        idKey: "id",
                                        pIdKey: "pId",
                                        rootPId: 0,
                                    }
                                }
                            };
                            var treeNodes = [
                                {"id":1, "pId":0, "name":"test1"},
                                {"id":2, "pId":0, "name":"test2"},
                                {"id":21, "pId":2, "name":"test21"},
                                {"id":22, "pId":2, "name":"test21"},
                                {"id":3, "pId":0, "name":"test3"},
                                {"id":11, "pId":1, "name":"test11"},
                                {"id":12, "pId":1, "name":"test12"},
                                {"id":111, "pId":11, "name":"test111"}
                            ];
                            //3.调用ztree的init初始化ztree
                            $.fn.zTree.init($("#ztree2"), setting2, treeNodes);
                    });
                </script>
            </div>

显示效果:
简单JSON创建节点树

八丶发送ajax请求动态获取json数据构造ztree

代码:

<!-- 发送ajax请求动态获取json数据构造ztree -->
            <div title="ajax请求动态获取json数据构造ztree" data-options="iconCls:'icon-reload',selected:true">
                <ul id="ztree3" class="ztree"></ul>
                <script type="text/javascript">
                    //页面加载完成后，发送ajax请求动态获取json数据
                    $.post('${pageContext.request.contextPath}/easyui/tree.json',{},function(data) {
                        var setting3 = {
                                data: {
                                    simpleData: {
                                        enable: true,
                                        idKey: "id",
                                        pIdKey: "pId",
                                        rootPId: 0,
                                    }
                                }   
                        };
                        //不需要再写treeNodes节点,直接初始化
                        $.fn.zTree.init($("#ztree3"),setting3,data);
                    },'json');
                </script>
            </div>

显示效果:
Ajax获取JSON数据创建节点树

九丶为ztree节点绑定事件动态添加选项卡

代码:

<!-- 为ztree节点绑定事件动态添加选项卡 -->
            <div title="ajax请求动态获取json数据构造ztree" data-options="iconCls:'icon-reload',selected:true">
                <ul id="ztree4" class="ztree"></ul>
                <script type="text/javascript">
                    $(function() {
                        //页面加载完后动态调用JSON数据构建ztree
                        $.post('${pageContext.request.contextPath}/json/menu.json',{},function(data) {
                            //定义setting 配置
                            var setting = {
                                data: {
                                    simpleData: {
                                        enable: true,
                                        idKey: "id",
                                        pIdKey: "pId",
                                        rootPId: 0,
                                    }
                                },
                                //每次点击节点后， 弹出该节点的 tId、name 的信息
                                callback: {
                                    //使用ztree提供的方式为节点绑定单击事件
                                    onClick : function(event, treeId, treeNode) {
                                        if(treeNode.page!=undefined) {
                                            var tab = $("#tt").tabs('exists',treeNode.name);
                                            //alert(tab);
                                            if(tab) {
                                                $("#tt").tabs('select',treeNode.name);
                                            }else {
                                                //添加指定在中心显示的tabs选项卡
                                                $("#tt").tabs('add',{
                                                    title:treeNode.name,
                                                    closable:true,
                                                    /* content:'<iframe frameborder="no" width="100%" height="100%" src="${pageContext.request.contextPath}/ztreeshow.jsp"></iframe>' */ 
                                                    content:'<iframe frameborder="no" width="100%" height="100%" src="'+treeNode.page+'"></iframe>'
                                                });
                                            }
                                        }
                                    }
                                }
                            };

                            $.fn.zTree.init($("#ztree4"),setting,data);
                        },'json');
                    });
                </script>
            </div>