EasyUI - Panel 面板控件

效果：



html代码：

<div id="p" style="padding: 10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>

JS代码：

最重要的是加载数据：href: '../Json/PanelJosn.ashx',//一定要加上 “..” ，加载出数据后，会覆盖原始数据

其中有些属性，之间的使用有冲突。

tools属性，与href属性，与extractor属性，与loadingMessage属性，最为有用。

$(function () {
$('#p').panel({
width: 400,
height: 200,
title: '标题',
iconCls: 'icon-add',
//fit:true,//宽度自适应
//content:'时间就是金钱'//此处设置会覆盖原有内容
collapsible: true,//是否显示可折叠按钮
minimizable: true,
maximizable: true,
closable: true,
tools: [{//自定义工具菜单,面板的顶部
iconCls: 'icon-add',
handler: function () {
alert("ADD");
}
}, {
iconCls: 'icon-search',
handler: function () {
alert("Search");
}
}],
//collapsed: true,//是否在加载的时候折叠面板
//minimized: true,//是否在加载的时候最小化面板
//maximized: true,//是否在加载的时候最大化面板
//closed: true,//是否在加载的时候关闭面板
href: '../Json/PanelJosn.ashx',//一定要加上 “..” ，加载出数据后，会覆盖原始数据
loadingMessage: '正在加载信息，请稍等………………',//显示等待信息
//extractor: function (data) {//对Ajax返回的数据进行处理，其中data就是返回的数据
//    if (data == 'Hello World') {
//        alert("显示的信息是：Hello World！");
//    }
//    else {
//        alert("显示的信息不是：Hello World！");
//    }
//},
method: 'post',//使用HTTP的哪一种方法读取内容页。可用值：'get','post'
queryParams: 'id',
})
})

使用到的一般处理程序，.ashx代码：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
//Thread.Sleep(1000);//延时3S
context.Response.Write("Hello World");
}