EasyUI panel 插件使用

深藏阁楼爱情的钟 2022-02-13 09:59 299阅读 0赞

# EasyUI 插件的两种使用方法 #

## list ##

使用EasyUI插件的两种方法：`直接通过标记创建`; `编程创建`。

*  直接从HTML元素创建
    
     *  EasyUI插件的每个属性对直接写为HTML标签的属性对。**不推荐**
     *  EasyUI插件的所有属性对都写在HTML标签的`data-options`属性的字符串值中。
 *  用JS对已有的HTML元素进行DOM编程，创建。

## HTML ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
        
        <link rel="stylesheet" type="text/css" href="/resources/jquery-easyui-1.7.0/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="/resources/jquery-easyui-1.7.0/themes/icon.css">
        
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
    
        <title>easyui-panel</title>
    
    </head>
    <body>
    
        
    	<div id="p11" class="easyui-panel" title="My Panel"
             style="width:500px;height:150px;padding:10px;background:#fafafa;"
             iconCls="icon-save", content="这是内容",
             collapsible="true", minimizable="true", maximizable="true", closable="true">
        </div>
    
        
        <div id="p12" class="easyui-panel" title="My Panel"
             style="width:500px;height:150px;padding:10px;background:#fafafa;"
             data-options="iconCls:'icon-save', content:'这是内容',
                collapsible:true, minimizable:true, maximizable:true, closable:true">
        </div>
    
        
        <div id="p2" style="width:500px; height:150px; padding:10px; background: #fafafa;"></div>
        <script>
            $("#p2").panel({
                cls: "easyui-panel",
                title: "面板title",
                iconCls: "icon-save",
                content: "这是内容",
                collapsible: true,
                minimizable: true,
                maximizable: true,
                closable: true
            });
        </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]

## `easyui-panel`插件的其他成员 ##

*  属性  
    `tools` 自定义工具组，可能为`selector`或`array`(每个元素包含`iconCls`属性和`handler`方法)。  
    `href` 惰性加载(面板展开才加载)远程的数据。  
    `loadingMessage` 加载时显示的消息。
 *  事件  
    `onLoad` 远程数据加载完成时触发。
 *  方法  
    `extractor` 提取器。定义从AJAX响应中提取数据的方式。  
    `options` 该方法返回本插件的参数选项。  
    \- 获取 `$("p2").panel("options")`  
    \- 打印 `JSON.stringify($("p2").panel("options"), null, "\t")`

<div id="p2" style="width:500px; height:150px; padding:10px; background: #fafafa;"></div>
    <script>
    	$("#p2").panel({
    		cls: "easyui-panel",
    		title: "标题",
    		iconCls: "icon-save",
    		collapsible: true,
    		minimizable: true,
    		maximizable: true,
    		closable: true,
    
    		// 工具条
    		tools: [
    			{
    				iconCls: "icon-add",
    				handler: function() {alert("add");}
    			},
    			{
    				iconCls: "icon-edit",
    				handler: function() {alert("edit");}
    			}
    		],
    
    		// 远程数据加载
    		href: "/GetData",
    		loadingMessage: "加载中...",
    		onLoad: function() {
    			alert("加载完成");
    		},
    		extractor: function(data) {
    			let text = "";
    			console.log(Object.prototype.toString.call(data));  // [object String]
    			let obj = JSON.parse(data); // 将json格式的字符串转换为object
    			for(let user of obj) {
    				console.log(user);
    				if (user.id < 3) {
    					text += JSON.stringify(user);
    				}
    			}
    			return text;
    		}
    	});
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]  
![在这里插入图片描述][20190427173649935.png]  
查看本`panel`的选项：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 2]

当然还有 [更多成员][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]: /images/20220213/dbe4b42e5abf4fc6a3c450733c4b78e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]: /images/20220213/55f1d1ba2b3447dda86a966c70e1a536.png
[20190427173649935.png]: /images/20220213/70ce1ab4d88d4a3ea2d39c9524e8b1f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 2]: /images/20220213/a2b535b41e3f4375984edc3cd25d22df.png
[Link 1]: http://www.jeasyui.net/plugins/159.html