解决 easyui 动态添加控件时无法渲染的问题

来源：互联网发布：js string match 编辑：程序博客网时间：2024/04/29 18:17

在使用easyui动态添加控件后，无法自动得到渲染，百度文库中有一篇非常详细的文章解决此问题，本文针对百度文库中的原文进行一些重要补充，避免大家走弯路。

动态渲染需要用到easyui自带的easyloader.js，在引用easyloader.js后，就不要再引用jquery.easyui.min.js。随后就使用我们自己的js动态调用easyloader加载渲染控件。

另外要注意的是，一定要将easyui的plugins目录（带上里面你需要用到的插件）放到easyloader.js同级目录下，这样才可以loader的到。

补充的关键内容就这么多，下面就按照转正的百度文库中的方法做就好了，以下为转载内容：

现象：

AJAX

返回的

html

无法做到自动渲染为

EasyUI

的样式

比如：

class="easyui-layout"

等

处理方法：

在

html

片段加载完毕后使用

代码

$.parser.parse(context)

即可重新渲染。

实现原理：

首先附上

jquery.parser.js

的源码

代码

(function($){

$.parser = {

auto: true,

plugins:['linkbutton','menu','menubutton','splitbutton','layout',

'tree','window','dialog','datagrid',

'combobox','combotree','numberbox','validatebox',

'calendar','datebox','panel','tabs','accordion'

parse: function(context){

10.

if ($.parser.auto){

11.

for(var i=0; i<$.parser.plugins.length; i++){

12.

(function(){

13.

var name = $.parser.plugins[i];

14.

var r = $('.easyui-' + name, context);

15.

if (r.length){

16.

if (r[name]){

17.

r[name]();

18.

} else if (window.easyloader){

19.

easyloader.load(name, function(){

20.

r[name]();

21.

})

22.

}

23.

}

24.

})();

25.

}

26.

}

27.

}

28.

};

29.

$(function(){

30.

$.parser.parse();

31.

});

32.

}

)(jQuery);

框架默认在页面加载完成后自动使用

$.parser.parse()

对整个文档进行渲染

代码

$.parser.auto //

是否自动进行渲染

$.parser.plugins //

包含目前

EasyUI

框架中所有的插件名称

$.parser.parse(context)

//context

为待查找的

DOM

元素集、文档或

jQuery

对象

为空时默认为整个文

档

渲染对象为：

class="easyui-pluginName"

的元素

jQuery EasyUI parser

的使用场景

2012

年

月

日

⁄

parser

⁄

共

1237

字

⁄

评论数

⁄

被围观

3,768 views+

文章目录

[

隐藏

]



自动调用

parser

：



手动调用

parser

：

2.1

(1)

解析目标为指定

DOM

的所有子孙元素，不包含这个

DOM

自身：

2.2

(2)

某些组件无法多次解析同一个

DOM

元素：

parser

，故名意思，就是解析器的意思，别看他只有那么几行代码，

jQuery Easyui

能够根据

class

就能正常渲染页面全靠它了。一般情况下，我们并用不到解析器，本文主要讨论一下，什

么情况下会用到它，如何使用。

自动调用

parser

：

我们之所以在页面中，只要书写相应的

class

，

Easyui

就能成功渲染页面，这是因为解析器在默

认情况下，会在文档装载完成的时候

($(document).ready)

被调用一次，而且是渲染整个页面。

手动调用

parser

：

有些童鞋反映，当页面装载完后，如果用

javascript

生成的

DOM

中包含了

Easyui

支持控件的

class

，比如说，用

javascript

生成了以下代码：

<div

class="easyui-accordion"

id="tt">

<div

title="title1">1</div>

<div

title="title2">2</div>

</div>

虽然页面上有这样的

DOM

了，

但是没有被渲染为

Easyui

的

accordion

插件，

原因很简单，

Easyui

并不会一直监听页面，

所以不会主动渲染，

这时候就需要手工调用

Easyui

的

parser

进行解析了。

不过手工调用需要注意以下几点：

(1)

解析目标为指定

DOM

的所有子孙元素，不包含这个

DOM

自身：

比如上面代码生成的

HTML

，

id="tt"

是我们想要的手风琴

DIV

，像下面代码去手工解析的话是

得不到你想要的结果的：

$.parser.parse($('#tt'));

道理很简单，

parser

只渲染

的子孙元素，并不包括

自身，而它的子孙元素并不包含任何

Easyui

支持的控件

class

，所以这个地方就得不到你想要的手风琴效果了，应该这样写：

$.parser.parse($('#tt').parent());

渲染

的父节点的所有子孙元素就可以了，

个人觉得通过

jQuery

的

parent()

方法是最安全不过

的了，

不管你的

javascript

输出了什么

DOM

，

直接渲染其父节点就可以保证页面能被正确解析。

(2)

某些组件无法多次解析同一个

DOM

元素：

如果页面上本身就有

元素：

<div

class="easyui-accordion"

id="tt">

</div>

页面装载完，你通过脚本向

元素

append

两个子

DIV

，然后解析：

$('#tt').append('<div

title="title1">1</div><div

title="title2">2</div>')

$.parser.parse($('#tt').parent());

不要以为你会得到一个满意的

accordion

，你什么也得不到，因为页面初始化的时候

parser

就

主动渲染过

元素，

这时候

已经被

parser

重构，

你再到脚本中

append

，

得到的

DOM

结构，

其实并不是你预想的结果了，所以要避免这种用法。

0 0