现在的位置: 首页 > easyui > Layout > panel > 正文
panel改进:auto属性定制自动解析远程数据
2012年05月14日 panel ⁄ 共 3045字 暂无评论 ⁄ 被围观 3,919 views+
文章目录
[隐藏]

需求分析:

大家应该都知道,panel的内容可以通过content设置,也可以通过href属性设置远程数据。当我们使用href的时候,如果href返回了包含easyui内部样式的时候,easyui能够自动渲染获取到的远程数据为对应的组件。

这是个非常必要的功能,省去了我们每次对href的数据进行parse的过程。然而,是不是我们每次都希望href的数据立刻被parse呢?我想有些特殊场景还是不希望立刻被parse的,比如说,我的目标href里面包含了代码高亮html的内容,自动href的话就会出问题了。

鉴于以上原因,个人觉得更为灵活和合理的办法是:给panel增加一个属性auto,默认值为true,即,默认情况下是自动parse的,设置为false的话,panel将不自动parse目标href的内容。

属性的增加,通过覆写$.fn.panel.defaults和$.fn.panel.parseOptions就可以了,但是根据这个属性值处理是否要立刻parse远程内容就需要对源码稍作修改了,这也是不得已而为之的办法,并不是所有功能都可以通过扩展的方式实现的。

实现步骤:

1.覆写属性转化器$.fn.panel.parseOptions
/**
 * 覆写panel的属性转换器,使其增加对某些属性的转换。
 * @param {Object} target
 */
$.fn.panel.parseOptions = function(target){
    var t = $(target);
    return {
        //panel组件自带属性
        id: t.attr("id"),
        width: (parseInt(target.style.width) || undefined),
        height: (parseInt(target.style.height) || undefined),
        left: (parseInt(target.style.left) || undefined),
        top: (parseInt(target.style.top) || undefined),
        title: (t.attr("title") || undefined),
        iconCls: (t.attr("iconCls") || t.attr("icon")),
        cls: t.attr("cls"),
        headerCls: t.attr("headerCls"),
        bodyCls: t.attr("bodyCls"),
        tools: t.attr("tools"),
        href: t.attr("href"),
        loadingMessage: (t.attr("loadingMessage") != undefined ? t.attr("loadingMessage") : undefined),
        cache: (t.attr("cache") ? t.attr("cache") == "true" : undefined),
        fit: (t.attr("fit") ? t.attr("fit") == "true" : undefined),
        border: (t.attr("border") ? t.attr("border") == "true" : undefined),
        noheader: (t.attr("noheader") ? t.attr("noheader") == "true" : undefined),
        collapsible: (t.attr("collapsible") ? t.attr("collapsible") == "true" : undefined),
        minimizable: (t.attr("minimizable") ? t.attr("minimizable") == "true" : undefined),
        maximizable: (t.attr("maximizable") ? t.attr("maximizable") == "true" : undefined),
        closable: (t.attr("closable") ? t.attr("closable") == "true" : undefined),
        collapsed: (t.attr("collapsed") ? t.attr("collapsed") == "true" : undefined),
        minimized: (t.attr("minimized") ? t.attr("minimized") == "true" : undefined),
        maximized: (t.attr("maximized") ? t.attr("maximized") == "true" : undefined),
        closed: (t.attr("closed") ? t.attr("closed") == "true" : undefined),
        auto: (t.attr("auto") ? t.attr("auto") == "true" : true),
        //扩展的属性
        borderHeader: (t.attr("borderHeader") != undefined ? t.attr("borderHeader") : undefined),
        borderBody: (t.attr("borderBody") != undefined ? t.attr("borderBody") : undefined),
        auto: (t.attr("auto") ? t.attr("auto") == "true" : true)//本次扩展的auto属性
    };
};
2.扩展$.fn.panel.defaults,定义auto默认值为true
$.fn.panel.defaults = $.extend({}, $.fn.panel.defaults, {
    auto: true
});
3.修改源码,利用auto属性作为是否立刻paser的开关

1.2.6版本(1.2.5版本请查找相同功能的类似代码)的easyui找到panel组件的以下代码:

$.ajax({url:_18e.options.href,cache:false,success:function(data){
	_190.html(_18e.options.extractor.call(_18d,data));
	if($.parser){
		$.parser.parse(_190);
	}
	_18e.options.onLoad.apply(_18d,arguments);
	_18e.isLoaded=true;
}});

修改为:

$.ajax({url:_18e.options.href,cache:false,success:function(data){
	_190.html(_18e.options.extractor.call(_18d,data));
	if($.parser){
		if(_18e.options.auto)
		{
			$.parser.parse(_190);
		}
	}
	_18e.options.onLoad.apply(_18d,arguments);
	_18e.isLoaded=true;
}});

使用方式:

在javascript或者DOM中定义auto属性均可以:

$(selector).panel({title:"my panel",fit:true,href:"a.html",auto:false});
<div class="easyui-panel" title="my panel" href="a.html" auto="false" fit="true></div>

给我留言

留言无头像?


×