EasyUI官方文档学习笔记

快来打我* 2021-06-24 16:11 578阅读 0赞

所需CDN：

### 第一篇 布局 ###

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

*  north 区域可以用来显示网站的标语。
 *  south 区域可以用来显示版权以及一些说明。
 *  west 区域可以用来显示导航菜单。
 *  east 区域可以用来显示一些推广的项目。
 *  center 区域可以用来显示主要的内容。

##### 1.1 为网页创建边框布局 #####

![2789632-70afba9fbe0292f0.gif][]

html代码：

<%--确定一个容器--%>
        <div class="easyui-layout box">
            <div region="west" class="test" split="true" title="Navigator" style="width:150px;background-color:Red;">
                <p>Select language</p>
                <ul>
                    <li><a href="javascript:void(0)" onclick="showcontent('java')">java</a></li>
                    <li><a href="javascript:void(0)" onclick="showcontent('csharp')">C#</a></li>
                    <li><a href="javascript:void(0)" onclick="showcontent('php')">php</a></li>
                    <li><a href="javascript:void(0)" onclick="showcontent('python')">python</a></li>
    
                </ul>
            </div>
            <div class="test" id="content" region="center" title="Language" style="padding:5px;background-color:blue;"></div>
        </div>

css代码：

js代码：

**理解：**

*  **1.** href="javascript:void(0)"与href="\#"相比，便是不刷新跳转
 *  **2.** 此处的样式修改并不好修改，由于是封装在内部的属性，如果要对某一个panel进行样式修改，需要通过调试界面找到自己能定义到的一个id或者class，然后一层一层找下去进行修改，这样有一个不好的地方就是后期如果在里面添加节点或者删除节点，样式就失效了……这里面如果对相同的class一起重新加载样式的方式简单一些，可用！important进行修改，或者通过jq选择器动态修改。

##### 1.2 EasyUI 在面板中创建复杂布局 #####

![2789632-ce9b397573472cdc.png][]

**第一步：**先创建一个面板，名字：复杂的面板布局 图标：icon-search 可折叠：collapsible="true"

![2789632-8f8bc6800120aaac.png][]

代码：

**第二步：**面板已经完成，开始添加布局

![2789632-bf5a73df4a681740.png][]

代码：

<div class="easyui-layout" fit="true">
            <div region="north" border="false" class="p-search">
                上部分搜索框
            </div>
    
            <div region="center" border="false">
                <div class="easyui-layout" fit="true">
                    <div region="east" border="false" class="p-right">
                        右部的图片
                    </div>
    
                    <div region="center" border="false" style="border:1px solid #ccc;">
                        <div class="easyui-layout" fit="true">
                            <div region="south" split="true" border="false" style="height:60px;">
                                底部的输入部分
                            </div>
                            <div region="center" border="false">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

css：

.p-search{
                background:#fafafa;
                padding:5px;
                border:1px solid #ccc;
                border-bottom:0;
                overflow:hidden;
            }
            .p-search input{
                width:300px;
                border:1px solid #ccc;
                background: #fff url('images/search.png') no-repeat right top;
            }
            .p-right{
                text-align:center;
                border:1px solid #ccc;
                border-left:0;
                width:150px;
                background:#fafafa;
                padding-top:10px;
            }

用css对每一块进行样式修改，因为宽度好高度未指定，可能对某一块进行了覆盖……  
在div的class为eassyui-layout里面，region的取值理解：

*  \*\* center:布局的核心部分\*\*
 *  **north:浮动到center的上方——float:top(没有的哈)**
 *  **south：浮动到center的下方——float:bottom(没有的哈)**
 *  **west：浮动到center的左方——float:left**
 *  **east：浮动到center的右方——float:right**  
    **第三步：**为每个框里面添加相关内容  
    
    
    ![2789632-d524a0783b0f1160.png][]
    
    头部搜索框
    
      
    搜索框(样式已经在上面的css代码里)：

<label>Search:</label><input></input>

![2789632-0aa114c12dd7df8c.png][]

右部的图片

右部的图片：

![](images/msn.gif)

![2789632-1558d17d1931df63.png][]

底部的textarea

底部的textarea：

<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>

![2789632-fd74ff2aa79fbbe8.png][]

完成界面

### 第二篇　EasyUI 菜单与按钮 ###

##### 2.1 Menu Button #####

![2789632-f537733cd13f4bee.png][]

代码：

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
            <a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
            <a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
        </div>
        <div id="mm1" style="width:150px;">
            <div iconCls="icon-undo">Undo</div>
            <div iconCls="icon-redo">Redo</div>
            <div class="menu-sep"></div>
            <div>Cut</div>
            <div>Copy</div>
            <div>Paste</div>
            <div class="menu-sep"></div>
            <div iconCls="icon-remove">Delete</div>
            <div>Select All</div>
    </div>
    <div id="mm2" style="width:100px;">
        <div>Help</div>
        <div>Update</div>
        <div>About</div>
    </div>

菜单与按钮在这里并没有用到js和css，内部已经将easyui-menubutton这个class封装好了。如何修改样式在第一篇已经尝试过了……在此做个简单的了解……

### 第三篇 EasyUI 树形菜单 ###

##### 3.1 使用标记创建树形菜单 #####

![2789632-a71dc28b1194485e.png][]

简单的树形菜单

代码：

<ul class="easyui-tree">
            <li>
                <span>Folder</span>
                <ul>
                    <li>
                        <span>Sub Folder 1</span>
                        <ul>
                            <li><span>File 11</span></li>
                            <li><span>File 12</span></li>
                            <li><span>File 13</span></li>
                        </ul>
                    </li>
                    <li><span>File 2</span></li>
                    <li><span>File 3</span></li>
                </ul>
            </li>
            <li><span>File21</span></li>
        </ul>

除了在第一个ul里面添加了一个easyui的类名，其他的跟普通的列表嵌套是一样的……此处也就是将列表的修饰变成的图标，实质还是列表嵌套。

## 第四篇 Easy UI与Ajax联合使用，并通过后端获取数据库数据 ##

[2789632-70afba9fbe0292f0.gif]: /images/20210615/77a44655278344b0bb8a5c10b47e00ca.png
[2789632-ce9b397573472cdc.png]: /images/20210615/e6e03874966c4e6c8e835c0e38643ba5.png
[2789632-8f8bc6800120aaac.png]: /images/20210615/a435b667924043c8948683435c58e35d.png
[2789632-bf5a73df4a681740.png]: /images/20210615/03a2c9c2bdc248d19244a384cf142bb5.png
[2789632-d524a0783b0f1160.png]: /images/20210615/5db8e73ef7d44869972234b63e32b546.png
[2789632-0aa114c12dd7df8c.png]: /images/20210615/b6952e212c444f449c23b4e152f7d92e.png
[2789632-1558d17d1931df63.png]: /images/20210615/3a15830922114a008a3524405ea88e3f.png
[2789632-fd74ff2aa79fbbe8.png]: /images/20210615/16f62a431eb141acb1dc7e10ab74fba6.png
[2789632-f537733cd13f4bee.png]: /images/20210615/5efe64d973e6449595c02880f7c82280.png
[2789632-a71dc28b1194485e.png]: /images/20210615/6b9a84b43be44557a85d68202a6c079b.png