起因:
因為要動態的加入一個easyui渲染的dom對象,但是怎么動態生成都沒有樣式效果。

解決經過:
查看文檔發現,easyui的渲染是在在網頁加載完成后,相當於在$(document).ready()事件中,對整個網頁進行了一次掃描,發現某個input標簽含有easyui的屬性,就在相應的地方進行ui的修改。
因此,如果我們用什么append、appendTo方法動態在頁面中插入一段html代碼,或者用什么addClass方法給input標簽動態添加一個class屬性,這些操作EasyUI是不知道的,所以新插入的這些東東,即使有class="easyui-XXXXXXX"屬性,但沒有任何效果。
解決方案:
如何通知EasyUI呢?通過查詢資料,發現網上比較流行的一種方法是用:$.parser.parse()。一般像我這樣的小菜可能就直接拿來用了,把它放在插入html的語句之后,重新渲染界面,果然很管用,新加入的元素能被識別。
但是,很快就發現一個問題,由於使用了$.parser.parse()對整個頁面重新渲染,這會影響到以前已經渲染過的組件。
$.parser.parse()由於它對整個頁面進行渲染,以前正常的組件也被渲染了,相當於所有的組件進行了一次“初始化”,最終導致值丟失。
再次深究 發現$.parser.parse()是可以帶參數的,參數意思差不多就是傳入一個局部的DOM對象,只對局部進行渲染,避免影響其他組件。
var appendDoc=$('<div class="layui-col-md5 layui-col-sm5 layui-col-xs5 fileboxdiv"><input name="file" class="easyui-filebox filebox" /></div>').appendTo("#fileDiv");
$.parser.parse(appendDoc);
我們常常會通過appendTo方法把使用了datebox組件的input標簽插入到某個DOM中,別忘了appendTo方法是有返回值的,返回的恰恰就是剛剛插入的對象。我們拿到這個對象,單獨對它進行渲染,這樣既可以實現動態渲染,又能避免影響其它組件。
