jquery-EasyUI---panel面板的用法-CSDN博客

本文介绍了使用EasyUI框架中的面板组件加载数据的方法，包括直接加载静态内容、远程加载数据及通过JavaScript动态加载数据的方式，并提供了对返回数据格式进行自定义处理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、面板大致使用方法和ext差不错，之前有学过一些ext的知识，这里不对panel中的细节进行配置

直接学习在应用场景中如何加载数据，在面板中加载数据

1、标签的形式：

<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>

2、远程加载;

1 <div id="content" class="easyui-panel" style="height:200px" 
2 data-options="href:'test.json?page=1'">

3、js

 1 <div id="p" class="easyui-panel" title="My Panel"     
 2         style="width:500px;height:150px;padding:10px;background:#fafafa;"   
 3        >   
 4         <p>panel content.</p>   
 5         <p>panel content.</p>   
 6     </div> 
 7     <ul>
 8         <li>ddddd</li>
 9         <li>ddddd</li>
10         <li>ddddd</li>
11     </ul>

4、我们想刚刚那种href指向某个文件的方式返回的数据格式有可能不是我们需要的，因此我们需要对数据格式进行修改

 1 $("#move").click(function  () {
 2             $('#p').panel({
 3                 tools:[{
 4                     iconCls:'icon-reload',
 5                     handler:function(){
 6                         $('#p').panel('refresh', 'test1.html');
 7                     }
 8                 }],
 9                 extractor: function(data){
10                     //这里可以对返回的data进行处理
11                     return data;
12                 }
13             });   
14         })

还有一种方式是我们请求某个html文档，我们用正则去匹配到body中间的内容

修改过后的代码：

 1 $('#p').panel({
 2                 tools:[{
 3                     iconCls:'icon-reload',
 4                     handler:function(){
 5                         $('#p').panel('refresh', 'test1.html');
 6                     }
 7                 }],
 8                 extractor: function(data){
 9                     var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
10                     var matches = pattern.exec(data);
11                     if (matches){
12                         console.log(matches[1])
13                         return matches[1];    // 仅提取主体内容
14                     } else {
15                         return data;
16                     }
17                 }
18             });