這是個(gè)小菜在實(shí)際工作中遇到的問題，相信很多EasyUI新手很可能也遇到這樣的問題，因此小菜覺得有必要拿出來分享一下。

這個(gè)問題要從EasyUI的datebox組件說起，小菜用這個(gè)組件的時(shí)候，發(fā)現(xiàn)用$("#id").val()這種形式，居然拿不到文本框的值！

經(jīng)過度娘的幫助，發(fā)現(xiàn)可以用$("#id").datebox('getValue')，但是這是為什么捏？

經(jīng)過一翻研究和探索，小菜發(fā)現(xiàn)，如果一個(gè)input加上class="easyui-datebox"，也就是聲明在此文本框上邊使用datebox組件，那么經(jīng)過EasyUI引擎的掃描，會(huì)自動(dòng)為此文本框加上各種樣式，與此同時(shí)，EasyUI去掉了此文本框上的id和name屬性！最后，它會(huì)在此文本框的附近，添加一個(gè)隱藏的文本框，這個(gè)文本框的name和原來文本框的name一樣，id屬性直接丟掉。。。。這個(gè)隱藏文本框的值，才是咱們看到的日期。如圖：

這下讀者應(yīng)該明白，為什么$("#id").val()拿不到值，因?yàn)樵瓉砦谋究虻膇d屬性已經(jīng)被拿掉，新創(chuàng)建的隱藏文本框也沒有id屬性，所以拿不到值，可以通過官方的給出的$("#id").datebox('getValue')彌補(bǔ)(具體人家怎么拿到的，小菜也不懂呀)。

但是，這僅僅是用id選擇器的情況，別忘了還有name，我們可以通過$("input[name='mydate']").val()這種方式獲取文本框的值。

因此，如果不想用$("#id").datebox('getValue')，那么就別加id，或者說別用id選擇器，給文本框加一個(gè)name屬性，很輕松的就拿到值了。

另外，補(bǔ)充一下，如果用的標(biāo)簽選擇器，也就是用的name屬性，然后又用.datebox('getValue')去拿值，那么會(huì)報(bào)錯(cuò)哦。。。例如：$("input[name='mydate']").datebox('getValue')，會(huì)報(bào)TypeError: $.data(...) is undefined。

說了這么多，貌似還沒有進(jìn)入正題，讀者應(yīng)該也能體會(huì)到，在某個(gè)input標(biāo)簽上添加class="easyui-datebox"，它就能自動(dòng)變成日歷，這其實(shí)是EasyUI掃描的結(jié)果，在網(wǎng)頁加載完成后，相當(dāng)于在$(document).ready()事件中，對(duì)整個(gè)網(wǎng)頁進(jìn)行了一次掃描，發(fā)現(xiàn)某個(gè)input標(biāo)簽含有class="easyui-datebox"屬性，就做上邊講到那些處理，不僅僅是EasyUI如此，幾乎所有的UI都是這個(gè)原理。

因此，如果我們用什么append、appendTo方法動(dòng)態(tài)在頁面中插入一段html代碼，或者用什么addClass方法給input標(biāo)簽動(dòng)態(tài)添加一個(gè)class屬性，這些操作EasyUI是不知道的，所以新插入的這些東東，即使有class="easyui-datebox"屬性，但沒有任何效果。

如何通知EasyUI呢？通過查詢資料，發(fā)現(xiàn)網(wǎng)上比較流行的一種方法是用：$.parser.parse()。一般像我這樣的小菜可能就直接拿來用了，把它放在插入html的語句之后，重新渲染界面，果然很管用，新加入的元素能被識(shí)別。

但是，小菜很快就發(fā)現(xiàn)一個(gè)問題，由于使用了$.parser.parse()對(duì)整個(gè)頁面重新渲染，這會(huì)影響到以前已經(jīng)渲染過的組件。

舉個(gè)例子：頁面原本有一個(gè)使用了datebox組件的input標(biāo)簽，用戶通過datebox組件選擇了時(shí)間，然后用戶又新增了一個(gè)使用datebox組件的input標(biāo)簽(這時(shí)候程序會(huì)重新渲染頁面)，奇怪的事情發(fā)生了：原來的input標(biāo)簽明明已經(jīng)選過時(shí)間，顯示的也正常，但卻拿不到值！

根據(jù)小菜的想法，原因正是出在$.parser.parse()上，由于它對(duì)整個(gè)頁面進(jìn)行渲染，以前正常的組件也被渲染了，相當(dāng)于所有的組件進(jìn)行了一次“初始化”，最終導(dǎo)致值丟失。

再仔細(xì)問問度娘，發(fā)現(xiàn)$.parser.parse()是可以帶參數(shù)的，參數(shù)意思差不多就是傳入一個(gè)局部的DOM對(duì)象，只對(duì)局部進(jìn)行渲染，避免影響其他組件。

舉個(gè)巧妙的應(yīng)用例子：

var targetObj = $("").appendTo("#id");

$.parser.parse(targetObj);

我們常常會(huì)通過appendTo方法把使用了datebox組件的input標(biāo)簽插入到某個(gè)DOM中，別忘了appendTo方法是有返回值的，返回的恰恰就是剛剛插入的對(duì)象。我們拿到這個(gè)對(duì)象，單獨(dú)對(duì)它進(jìn)行渲染，這樣既可以實(shí)現(xiàn)動(dòng)態(tài)渲染，又能避免影響其它組件。

因此，在讀者的項(xiàng)目中，最好使用局部渲染(無論用何種方法得到目標(biāo)對(duì)象)，避免使用全局渲染。

好啦，小菜的教程就寫到這，希望對(duì)大家有所幫助，高手勿噴~

感謝分享！

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的java 动态加载控件_JS动态添加节点后渲染为EasyUI控件，EasyUI动态渲染解析解决方案...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。