JS动态添加页面元素不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

2017-10-25698

指定class类名让解析器parser渲染

class的格式为：easyui-组件名，data-options属性是可选的，默认$.parser.auto的值为true（即是自动解析）。代码如下：

<body>
    <div class="easyui-dialog" style="width:400px;height:200px"
        data-options="
            title:'My Dialog',
            iconCls:'icon-ok',
            onOpen:function(){}">
        dialog content.
    </div> 
</body>

也可以关闭自动解析，采用手动解析的方式，代码如下

<script type="text/javascript">
    $.parser.auto = false;//放在延迟加载方法外
    $(function(){
        $.parser.parse();//解析所有配置好class的组件
        /*还可以解析指定UI组件，但需要指定其父类容器
            $.parser.parse('#mydia1');
        */
    });

</script>
<body>
    <div id="mydia1">
        <div  class="easyui-dialog" style="width:400px;height:200px"
            data-options="
                title:'My Dialog',
                iconCls:'icon-ok',
                onOpen:function(){}">
             这是dialog里的内容
        </div> 
    </div>
</body>

无论是自动解析还是手动解析，解析完毕后执行$.parser.onComplete函数，代码如下

<script type="text/javascript">
    //$.parser.auto = false;//放在延迟加载方法外
    $.parser.onComplete = function(){
        alert('解析完毕');
    };//也要放在延迟加载方法外
    $(function(){
        /*$.parser.parse();//解析所有配置好class的组件还可以解析指定UI组件，但需要指定其父类容器
            $.parser.parse('#mydia1');
        */
    });

</script>
<body>
    <div id="mydia1">
        <div  class="easyui-dialog" style="width:400px;height:200px">
             这是dialog里的内容
        </div> 
    </div>
</body>

注意：由于使用了$.parser.parse()对整个页面重新渲染，这会影响到以前已经渲染过的组件。

我们在使用时最好使用局部渲染代码如下：

<div class="box"></div>
var easyuiTabs={
		init:function(){
			var self=this;
			self.addHtml(function(){
				self.bindEasyUi();
			});
		},
		addHtml:function(callback){
			var html='<div id="tt" class="easyui-tabs" style="width:400px;height:250px;"><div title="Home"></div></div>';
			$(".box").html(html);
			$.parser.parse($(".box"));//使用局部渲染
			callback && callback();
		},
		bindEasyUi:function(){
			for(var i=0;i<5;i++){
				$('#tt').tabs('add', {title : "title"+i,content : "content"+i,closable : true});
			}
		}
}
$(function(){
	easyuiTabs.init();
});

赏

指定class类名让解析器parser渲染

相关文章