记录EasyUI学习

记录EasyUI学习

EasyUI是组件类的框架，和bootstrap框架类似，不过bootstrap的自适应组件是真的舒服。这一次是学习EasyUI的总结。

工具：IIDEA 2019.2.4 x64

Tomcat版本：8.5.34

EasyUI版本：jquery-easyui-1.10.1

EasyUI的API版本：EasyUI API 1.7（中文版最新的只找到这个）

资源引入

资源链接：官网：https://www.jeasyui.net/ 我的：

需要将这几个资源引入到自己的代码中

资源链接：
EasyUI API 1.7：https://download.csdn.net/download/qq_44501517/75096058
EasyUI-1.10.1：https://download.csdn.net/download/qq_44501517/75095175

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

控件的使用

控件的使用方法也很简单，主要有三种方法：其中第三种混合的应该是使用最多

组件方法的调用很特别：

选择器.组件名（{

属性名：属性，

方法名：function（）{}

}）

如
    $(function () {
        $("#myDiv2").panel({
            title: "初始化"
        });
    });

1. 纯HTML方式

   <h2>纯HTML方式完成panel初始化</h2>
   <%--close: 设置开始时是否可看见--%>
   <%--collapsible:true 有点用，折叠--%>
   <div class="easyui-panel"
        data-options="width:300,height:150,title:'panel组件',iconCls:'icon-edit',collapsible:true,closed:false,maximizable:true"></div>
   

   

2. JS方式

   <%--2.使用纯js的方式完成初始化--%>
   <h2>纯js方式</h2>
   <div id="myDiv"></div>
   

   <script type="application/javascript">
       $(function () {
           $("#myDiv").panel({
               title: "一个panel",
               width: 300,
               height: 150,
               iconCls: 'icon-ok',
               maximizable: true,
               onMaximize: function al() {
                   alert("aaaaa");
               }
           })
   
       });
   </script>
   

3. JS+HTML方式

<h2>js与HTML混合模式</h2>
<div id="myDiv2" class="esayui-panel"
     data-options="width:300,height:150,title:'panel组件',iconCls:'icon-edit',collapsible:true,closed:false,maximizable:true">
    <input type="button" id="btn" value="点击就送。。。">
</div>

<script type="application/javascript">
    //添加单击事件
    $(function () {
        $("#btn").click(function () {
            $("#myDiv2").panel('setTitle', '笑死');//记住
        })
    });
    //添加单击事件
</script>

布局

主要使用到的是Layout布局

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
    </div>

树（Tree）的使用

其中**data-options=“attributes:{isparent:‘1’},state:‘closed’”**中isparent为自设参数，表示是否为第一层目录，而state为默认是否展开。下面我设置的为第一层展开，其余均不展开

        <ul class="easyui-tree" id="menuTree">
            <li data-options="attributes:{isparent:'1'},state:'open'">
                <span>购物网站</span>
                <ul>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>淘宝网</span>
                    </li>
                    <li data-options="attributes:{isparent:'0',url:'https://www.pinduoduo.com'}">
                        <span>拼多多</span>
                    </li>
                    <li data-options="attributes:{isparent:'0',url:'https://www.jd.com/'}">
                        <span>京东</span>
                    </li>
                </ul>
            </li>
            <li data-options="attributes:{isparent:'1'},state:'closed'">
                <span>学习网站</span>
                <ul>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>bilibili</span>
                    </li>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>CSDN</span>
                    </li>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>GitHub</span>
                    </li>
                </ul>
            </li>
            <li data-options="attributes:{isparent:'1'},state:'closed'">
                <span>娱乐网站</span>
                <ul>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>斗鱼</span>
                    </li>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>哔哩哔哩</span>
                    </li>
                    <li data-options="attributes:{isparent:'0',url:'https://www.taobao.com'}">
                        <span>抖音</span>
                    </li>
                </ul>
            </li>
        </ul>

    <script type="text/javascript">
        $(function () {
            //给tree组件增加点击事件
            $("#menuTree").tree({
                onClick: function (node) {  //node为当前点击树节点的信息
                    //alert("aaa");
                    console.log(node);
                    var has = $("#tabs").tabs('exists', node.text);
                    //alert(has);
                    //新增标签页
                    
                    if (node.attributes.isparent == 1) {//如果是第一层直接返回
                        return;
                    }
                    if (has) {//tab已经存在
                        $("#tabs").tabs('select', node.text);
                    } else {
                        $("#tabs").tabs('add', {
                            title: node.text,
                            closable: true,
                            content: "<iframe src='" + node.attributes.url + "' style='width: 100%;height: 100%'/>",
                            //刷新图标的添加
                            tools: [{
                                iconCls: 'icon-mini-refresh', handler: function () {
                                    alert('refresh');
                                }
                            }]
                        })
                    }
                }
            })
        })
    </script>