js動(dòng)態(tài)修改Easyui元素不生效,EasyUI動(dòng)態(tài)渲染解析解決方案
起因:
因?yàn)橐獎(jiǎng)討B(tài)的加入一個(gè)easyui渲染的dom對(duì)象,但是怎么動(dòng)態(tài)生成都沒有樣式效果。

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

浙公網(wǎng)安備 33010602011771號(hào)