版权声明：wuyujin1997 reserve all rights. https://blog.csdn.net/wuyujin1997/article/details/89604615
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">
<!-- CSS: ICON和默认主题 -->
<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">
<!-- JS: jquery, jquery-easyui, easyui-中文支持 -->
<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>
<!-- 1.1 每个EasyUI插件的属性对直接写为HTML标签的属性对。 -->
<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>
<!-- 1.2 EasyUI插件的所有属性对都写在HTML标签的`data-options`属性的字符串值中。 -->
<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>
<!-- 2. 用JS对已有的HTML元素进行DOM编程，创建。 -->
<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>
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>
查看本panel的选项：
当然还有 更多成员