Easyui组件依赖关系图

太过爱你忘了你带给我的痛 2022-05-23 11:28 364阅读 0赞

搞了两年多后端，一直在使用easyui，知其然不知其所以然，看到一些比较对自己比较有用的文章就转载一下，方便自己以后忘记的时候回头看一下：

参考博客地址：[http://www.easyui.info/archives/765.html][http_www.easyui.info_archives_765.html]

一个好的框架，其内部组件肯定都是有继承关系的，这样才能最大限度地重复利用代码，easyui这方面做得也不错。所谓“继承”大家一定先要理解概念，easyui里面的继承并不是真的继承，只是一种简单的依赖关系。

这种依赖关系主要体现在几方面：

“依赖者”会继承“被依赖者”的属性，初始化自己的options   
“依赖者”会在自身内部初始化的时候，同时会初始化“被依赖者”   
“依赖者”会通过调用“被依赖者”对象的方法来实现自己和“被依赖者”同名的方法   
以下图片就为easyui的依赖关系图：

![20180607210217209][]

举个例子：layout组件依赖于panel组件，那么layout组件的属性，拥有自己独特的属性，同时还拥有panel的属性，所以在初始化layout的东、南、西、北几个region的时候，可以给pannel的属性赋值，我当时在官方文档找layout的tools属性找不到，才发现在pannel里面。如下例子：

##### 添加西侧区域面板和工具菜单按钮 #####

1.  $('\#cc').layout('add',\{   
2.      region: 'west',   
3.      width: 180,   
4.      title: 'West Title',   
5.      split: **true**,   
6.      tools: \[\{   
7.          iconCls:'icon-add',   
8.          handler:**function**()\{alert('add')\}   
9.      \},\{   
10.         iconCls:'icon-remove',   
11.         handler:**function**()\{alert('remove')\}   
12.     \}\]   
13. \});

#### 在layout的区域属性（如下）是没有tools的，在panel中就有。 ####

区域面板属性定义与panel组件类似，下面的是公共的和新增的属性：

<table style="color:rgb(0,0,0);font-size:14px;border-spacing:0px;margin-left:9px;"> 
 <tbody> 
 <tr> 
 <th style="border-color:rgb(140,172,187);padding:.3em .7em;background-color:rgb(238,238,238);">属性名</th> 
 <th style="border-color:rgb(140,172,187);padding:.3em .7em;background-color:rgb(238,238,238);">属性值类型</th> 
 <th style="border-color:rgb(140,172,187);padding:.3em .7em;background-color:rgb(238,238,238);">描述</th> 
 <th style="border-color:rgb(140,172,187);padding:.3em .7em;background-color:rgb(238,238,238);">默认值</th> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">title</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">string</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">布局面板标题文本。</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">null</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">region</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">string</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">定义布局面板位置，可用的值有：north, south, east, west, center。</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;"> </td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">border</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">boolean</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">为true时显示布局面板边框。</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">true</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">split</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">boolean</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">为true时用户可以通过分割栏改变面板大小。</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">false</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">iconCls</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">string</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">一个包含图标的CSS类ID，该图标将会显示到面板标题上。</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">null</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">href</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">string</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">用于读取远程站点数据的URL链接</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">null</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">collapsible</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">boolean</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">定义是否显示折叠按钮。（该属性自1.3.3版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">true</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">minWidth</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">number</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">最小面板宽度。（该属性自1.3.3版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">10</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">minHeight</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">number</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">最小面板高度。（该属性自1.3.3版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">10</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">maxWidth</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">number</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">最大面板宽度。（该属性自1.3.3版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">10000</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">maxHeight</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">number</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">最大面板高度。（该属性自1.3.3版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">10000</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">expandMode</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">string</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">在点击折叠面板时候的扩展模式。可用值有：“float”、“dock”和null float：区域面板将展开并浮动在顶部，在鼠标焦点离开面板时会自动隐藏。 dock：区域面板将展开并钉在面板上，在鼠标焦点离开面板时不会自动隐藏。 null：什么也不会发生。 （该属性自1.4.4版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">float</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">collapsedSize</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">number</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">折叠后的面板大小。（该属性自1.4.4版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">28</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">hideExpandTool</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">boolean</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">为true时隐藏折叠面板上的扩展面板工具。（该属性自1.4.4版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">false</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">hideCollapsedContent</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">boolean</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">为true时隐藏折叠面板上的标题栏。（该属性自1.4.4版开始可用）</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;">true</td> 
 </tr> 
 <tr> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;color:rgb(0,0,0);font-family:Arial, Helvetica, 'Nimbus Sans L', sans-serif;">collapsedContent</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;color:rgb(0,0,0);font-family:Arial, Helvetica, 'Nimbus Sans L', sans-serif;">string,function(title)</td> 
 <td style="border-color:rgb(140,172,187);padding:.3em .7em;color:rgb(0,0,0);font-family:Arial, Helvetica, 'Nimbus Sans L', sans-serif;">定义在折叠面板上要显示标题内容。 1. 标题字符串； 2. 通过函数返回标题内容。 （该方法自1.4.4版开始可用）代码示例：<pre style="font-family:Verdana;color:rgb(0,102,0);background-color:rgb(250,250,250);padding:5px;">collapsedContent: function(title){ var region = $(this).panel('options').region; if (region == 'north' || region == 'south'){ return title; } else { return '&lt;div class="mytitle"&gt;'+title+'&lt;/div&gt;'; } }</pre></td> 
 </tr> 
 </tbody> 
</table>

附上jquery easyui1.4.5中文版API的下载地址：https://download.csdn.net/download/richie696/9484935（这个是我在csdn找的，要积分，本来想免积分共享一份的，上传的时候提示已经存在，新手，不知道怎么操作，见谅！）

[http_www.easyui.info_archives_765.html]: http://www.easyui.info/archives/765.html
[20180607210217209]: /images/20220523/6674fd8b812a47fa95f84ff40b6c294f.png