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");
}