EasyUI中Panel面板的简单使用

た入场券 2023-10-18 19:57 26阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>string</td> 
   <td>面板（panel）的 id 属性。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>string</td> 
   <td>显示在面板（panel）头部的标题文字。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>iconCls</td> 
   <td>string</td> 
   <td>在面板（panel）里显示一个 16x16 图标的 CSS class。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>number</td> 
   <td>设置面板（panel）的宽度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>设置面板（panel）的高度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>number</td> 
   <td>设置面板（panel）的左边位置。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>number</td> 
   <td>设置面板（panel）的顶部位置。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>cls</td> 
   <td>string</td> 
   <td>给面板（panel）添加一个 CSS class。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>headerCls</td> 
   <td>string</td> 
   <td>给面板（panel）头部添加一个 CSS class。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>bodyCls</td> 
   <td>string</td> 
   <td>给面板（panel）主体添加一个 CSS class。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>object</td> 
   <td>给面板（panel）添加自定义格式的样式。<br> 改变面板（panel）边框宽度的代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-panel" style="width:200px;height:100px"</li> 
     <li>data-options="style:{borderWidth:2}"&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>fit</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，面板（panel）的尺寸就适应它的父容器。下面的实例演示了自动调整尺寸到它的父容器的最大内部尺寸的面板（panel）。 <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div style="width:200px;height:100px;padding:5px"&gt;</li> 
     <li>&lt;div class="easyui-panel" style="width:200px;height:100px"</li> 
     <li>data-options="fit:true,border:false"&gt;</li> 
     <li>Embedded Panel</li> 
     <li>&lt;/div&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>boolean</td> 
   <td>定义了是否显示面板（panel）的边框。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>doSize</td> 
   <td>boolean</td> 
   <td>如果设置为 true，创建时面板（panel）就调整尺寸并做成布局。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>noheader</td> 
   <td>boolean</td> 
   <td>如果设置为 true，面板（panel）的头部将不会被创建。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>string</td> 
   <td>面板（panel）主体内容。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>collapsible</td> 
   <td>boolean</td> 
   <td>定义是否显示折叠按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>minimizable</td> 
   <td>boolean</td> 
   <td>定义是否显示最小化按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>maximizable</td> 
   <td>boolean</td> 
   <td>定义是否显示最大化按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>boolean</td> 
   <td>定义是否显示关闭按钮。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>tools</td> 
   <td>array,selector</td> 
   <td>自定义工具组，可能的值：<br> 1、数组，每个元素包含 iconCls 和 handler 两个属性。<br> 2、选择器，指示工具组。<br><br> 面板（panel）工具组可通过已存在 &lt;div&gt; 标签声明： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-panel" style="width:300px;height:200px"</li> 
     <li>title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"&gt;</li> 
     <li>&lt;/div&gt;</li> 
     <li>&lt;div id="tt"&gt;</li> 
     <li>&lt;a href="#" class="icon-add" οnclick="javascript:alert('add')"&gt;&lt;/a&gt;</li> 
     <li>&lt;a href="#" class="icon-edit" οnclick="javascript:alert('edit')"&gt;&lt;/a&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol> 面板（panel）工具组可通过数组定义： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-panel" style="width:300px;height:200px"</li> 
     <li>title="My Panel" data-options="iconCls:'icon-ok',tools:[</li> 
     <li>{ </li> 
     <li>iconCls:'icon-add',</li> 
     <li>handler:function(){alert('add')}</li> 
     <li>},{ </li> 
     <li>iconCls:'icon-edit',</li> 
     <li>handler:function(){alert('edit')}</li> 
     <li>}]"&gt;</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>collapsed</td> 
   <td>boolean</td> 
   <td>定义初始化面板（panel）是不是折叠的。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>minimized</td> 
   <td>boolean</td> 
   <td>定义初始化面板（panel）是不是最小化的。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>maximized</td> 
   <td>boolean</td> 
   <td>定义初始化面板（panel）是不是最大化的。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>closed</td> 
   <td>boolean</td> 
   <td>定义初始化面板（panel）是不是关闭的。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>string</td> 
   <td>一个 URL，用它加载远程数据并且显示在面板（panel）里。请注意，除非面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板（panel）很有用： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div id="pp" class="easyui-panel" style="width:300px;height:200px"</li> 
     <li>data-options="href='get_content.php',closed:true"&gt;</li> 
     <li>&lt;/div&gt;</li> 
     <li>&lt;a href="#" οnclick="javascript:$('#pp').panel('open')"&gt;Open&lt;/a&gt;</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>cache</td> 
   <td>boolean</td> 
   <td>设置为 true 就缓存从 href 加载的面板（panel）内容。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>loadingMessage</td> 
   <td>string</td> 
   <td>当加载远程数据时在面板（panel）里显示一条信息。</td> 
   <td>Loading…</td> 
  </tr> 
  <tr> 
   <td>extractor</td> 
   <td>function</td> 
   <td>定义如何从 ajax 响应中提取内容，返回提取的数据。 <pre>&nbsp;</pre> 
    <ol> 
     <li>extractor: function(data){ </li> 
     <li>var pattern = /&lt;body[^&gt;]*&gt;((.|[</li> 
     <li>&nbsp;</li> 
     <li>])*)&lt;/body&gt;/im;</li> 
     <li>var matches = pattern.exec(data);</li> 
     <li>if (matches){ </li> 
     <li>return matches[1]; // only extract body content</li> 
     <li>} else { </li> 
     <li>return data;</li> 
     <li>}</li> 
     <li>}</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onLoad</td> 
   <td>none</td> 
   <td>当远程数据被加载时触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeOpen</td> 
   <td>none</td> 
   <td>面板（panel）打开前触发，返回 false 就停止打开。</td> 
  </tr> 
  <tr> 
   <td>onOpen</td> 
   <td>none</td> 
   <td>面板（panel）打开后触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeClose</td> 
   <td>none</td> 
   <td>面板（panel）关闭前触发，返回 false 就取消关闭。下面声明的面板（panel）不会关闭。 <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-panel" style="width:300px;height:200px;"</li> 
     <li>title="My Panel" data-options="onBeforeClose:function(){return false}"&gt;</li> 
     <li>The panel cannot be closed.</li> 
     <li>&lt;/div&gt;</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>onClose</td> 
   <td>none</td> 
   <td>面板（panel）关闭后触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeDestroy</td> 
   <td>none</td> 
   <td>面板（panel）销毁前触发，返回false就取消销毁。</td> 
  </tr> 
  <tr> 
   <td>onDestroy</td> 
   <td>none</td> 
   <td>面板（panel）销毁后触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeCollapse</td> 
   <td>none</td> 
   <td>面板（panel）折叠前触发，返回false就停止折叠。</td> 
  </tr> 
  <tr> 
   <td>onCollapse</td> 
   <td>none</td> 
   <td>面板（panel）折叠后触发。</td> 
  </tr> 
  <tr> 
   <td>onBeforeExpand</td> 
   <td>none</td> 
   <td>面板（panel）展开前触发，返回false就停止展开。</td> 
  </tr> 
  <tr> 
   <td>onExpand</td> 
   <td>none</td> 
   <td>面板（panel）展开后触发。</td> 
  </tr> 
  <tr> 
   <td>onResize</td> 
   <td>width, height</td> 
   <td>面板（panel）调整尺寸后触发。<br> width：新的外部宽度<br> height：新的外部高度</td> 
  </tr> 
  <tr> 
   <td>onMove</td> 
   <td>left,top</td> 
   <td>面板（panel）移动后触发。<br> left：新的左边位置<br> top：新的顶部位置</td> 
  </tr> 
  <tr> 
   <td>onMaximize</td> 
   <td>none</td> 
   <td>窗口最大化后触发。</td> 
  </tr> 
  <tr> 
   <td>onRestore</td> 
   <td>none</td> 
   <td>窗口还原为它的原始尺寸后触发。</td> 
  </tr> 
  <tr> 
   <td>onMinimize</td> 
   <td>none</td> 
   <td>窗口最小化后触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）属性（property）。</td> 
  </tr> 
  <tr> 
   <td>panel</td> 
   <td>none</td> 
   <td>返回外部面板（panel）对象。</td> 
  </tr> 
  <tr> 
   <td>header</td> 
   <td>none</td> 
   <td>返回面板（panel）头部对象。</td> 
  </tr> 
  <tr> 
   <td>body</td> 
   <td>none</td> 
   <td>返回面板（panel）主体对象。</td> 
  </tr> 
  <tr> 
   <td>setTitle</td> 
   <td>title</td> 
   <td>设置头部的标题文本。</td> 
  </tr> 
  <tr> 
   <td>open</td> 
   <td>forceOpen</td> 
   <td>当 forceOpen 参数设置为 true 时，就绕过 onBeforeOpen 回调函数打开面板（panel）。</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>forceClose</td> 
   <td>当 forceClose 参数设置为 true 时，就绕过 onBeforeClose 回调函数关闭面板（panel）。</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>forceDestroy</td> 
   <td>当 forceDestroy 参数设置为 true 时，就绕过 onBeforeDestroy 回调函数销毁面板（panel）。</td> 
  </tr> 
  <tr> 
   <td>refresh</td> 
   <td>href</td> 
   <td>刷新面板（panel）加载远程数据。如果分配了 'href' 参数，将重写旧的 'href' 属性。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// open a panel and then refresh its contents.</li> 
     <li>$('#pp').panel('open').panel('refresh');</li> 
     <li>// refresh contents with a new URL.</li> 
     <li>$('#pp').panel('open').panel('refresh','new_content.php');</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>options</td> 
   <td>设置面板（panel）尺寸并做布局。Options 对象包含下列属性：<br> width：新的面板（panel）宽度<br> height：新的面板（panel）宽度<br> left：新的面板（panel）左边位置<br> top：新的面板（panel）顶部位置<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#pp').panel('resize',{ </li> 
     <li>width: 600,</li> 
     <li>height: 400</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>move</td> 
   <td>options</td> 
   <td>移动面板（panel）到新位置。Options 对象包含下列属性：<br> left：新的面板（panel）左边位置<br> top：新的面板（panel）顶部位置</td> 
  </tr> 
  <tr> 
   <td>maximize</td> 
   <td>none</td> 
   <td>面板（panel）适应它的容器的尺寸。</td> 
  </tr> 
  <tr> 
   <td>minimize</td> 
   <td>none</td> 
   <td>最小化面板（panel）。</td> 
  </tr> 
  <tr> 
   <td>restore</td> 
   <td>none</td> 
   <td>把最大化的面板（panel）还原为它原来的尺寸和位置。</td> 
  </tr> 
  <tr> 
   <td>collapse</td> 
   <td>animate</td> 
   <td>折叠面板（panel）主体。</td> 
  </tr> 
  <tr> 
   <td>expand</td> 
   <td>animate</td> 
   <td>展开面板（panel）主体。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <div id="p" class="easyui-panel" title="My Panel"
             style="width:500px;height:150px;padding:10px;background:#fafafa;"
             data-options="iconCls:'icon-save',closable:true,
            collapsible:true,minimizable:true,maximizable:true">
            <p>panel content.</p>
            <p>panel content.</p>
        </div>
    
        <div id="p1" class="easyui-panel" title="My Panel"
             style="width:500px;height:150px;padding:10px;background:#fafafa;">
    
        </div>
    <script type="text/javascript">
        $('#p1').panel({
            href:'dynamic.html',
            onLoad:function(){
                alert('loaded successfully');
            }
        });
    </script>
    </body>
    </html>

远程调用dynamic.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>远程数据调用</h1>
    </body>
    </html>

### 效果 ###

![20190617214909972.gif][]![Image 1][]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190617214849117.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20190617214909972.gif]: https://img-blog.csdnimg.cn/20190617214909972.gif