jqueryEasyui重新渲染


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只渲染tt的子孫元素,並不包括tt自身,而它的子孫元素並不包含任何Easyui支持的控件class,所以這個地方就得不到你想要的手風琴效果了,應該這樣寫:

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

渲染tt的父節點的所有子孫元素就可以了,個人覺得通過jQuery的parent()方法是最安全不過的了,不管你的javascript輸出了什么DOM,直接渲染其父節點就可以保證頁面能被正確解析。

(2) 某些組件無法多次解析同一個DOM元素:

如果頁面上本身就有tt元素:

<div class="easyui-accordion" id="tt">
</div>

頁面裝載完,你通過腳本向tt元素append兩個子DIV,然后解析:

$('#tt').append('<div title="title1">1</div><div title="title2">2</div>')
$.parser.parse($('#tt').parent());

不要以為你會得到一個滿意的accordion,你什么也得不到,因為頁面初始化的時候parser就主動渲染過tt元素,這時候tt已經被parser重構,你再到腳本中append,得到的DOM結構,其實並不是你預想的結果了,所以要避免這種用法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM